--- title: "Use One-Click Deploys for Secure Online VS Code" published: true description: Learn how to set up one-click deploy buttons for Render in your projects, use Blueprints and Docker images in your Render services, and check out Gitpod's OpenVSCode Server for free. tags: tutorial, productivity, vscode, coding cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qij4c9ssi1s43u1cnb0j.png canonical_url: https://render.com/blog/one-click-gitpod --- ## Introducing "Deploy To Render" I’m currently getting up and running with Render. Luckily, getting new users started with very little friction is core to our mission, and it shows. One of my biggest challenges in helping to maintain and grow the Spinnaker project was the friction around getting started with it. New users and potential contributors often had a difficult time with operations or simply with deploying Spinnaker for the first time to check it out. They became frustrated, and they moved on. This made my job hard. I think that’s why, for my very first project here, I gravitated towards playing with Render’s awesome [1-click deploy](https://render.com/docs/deploy-to-render) feature, which takes a few minutes to learn and use successfully. Setting up a Deploy to Render button also taps into our (expanding) infrastructure-as-code functionality, and that’s my jam. I get excited about use cases for Deploy to Render buttons: - **Enablement**! Remove institutional/project knowledge as a barrier to entry. Got an OSS project? Got new reports or colleagues who need to deploy services to become productive? Level the playing field. - **Testing & CI**! Incorporate polished, simple, and complete deployments into your process so you’ll *know* everything is working and can quickly (or programmatically) demonstrate. I have browser-based VSCode on the brain after reading [David’s post](https://dev.to/render/host-a-dev-environment-on-render-with-vs-code-and-tailscale-jah) about building hosted dev environments with VSCode, Tailscale, and Render. So, the first app I try deploying is [OpenVSCode Server](https://github.com/gitpod-io/openvscode-server), a neat project Gitpod recently open-sourced that shares a browser-friendly implementation of VSCode with a simple upgrade path and deployment strategy. It lets folks run the latest VSCode version on a remote server, and access it from anywhere in a browser.

Editing a render.yaml file in the browser using an Open VSCode instance hosted on Render — Open VSCode joins my crowded tab landscape, allowing me to quickly edit a render.yaml file in browser.

## Creating a `Dockerfile` for GitPod OpenVSCode Server Gitpod makes OpenVSCode Server easy to deploy in several ways, including by running it in a Docker container, which is the most Render-friendly approach. Given a stable Docker image in a public registry such as Docker Hub, it’s quick to deploy that image on Render. My first newbie challenge is figuring out exactly how. GitPod’s instructions for running the server in a Docker container are: ```shell docker run -it --init -p 3000:3000 -v "$(pwd):/home/workspace:cached" gitpod/vscode ``` I can’t wait for the day that *this* becomes ~1-click, and we can deploy registered images on Render in a single step. While we work on [this part of our roadmap](https://feedback.render.com/features/p/deploy-docker-images-from-public-private-registries), there’s a simple workaround you can use in the meantime. First, fork the project and add a basic `Dockerfile` to it that pulls the image you want to deploy: ```Dockerfile FROM gitpod/openvscode-server ENTRYPOINT [ "/bin/sh", "-c", "/home/openvscode-server-v$OPENVSCODE_SERVER_VERSION-linux-x64/server.sh"] USER vscode-server ``` ## Meet Blueprints and `render.yaml` Next, meet [`render.yaml`](https://render.com/docs/yaml-spec). A `render.yaml` is a Blueprint spec: it allows you to define environment variables, secrets, disks, build directories, start commands, healthchecks, deployment regions, and other configuration settings for your application without using a GUI. Since the `docker run` command in Gitpod’s OpenVSCode documentation mounts a volume, I need to add a volume mount to my Render service. I can easily add that in `render.yaml`: ```yaml services: - type: web name: gitpod-vscode-example env: docker repo: https://github.com/render-examples/gitpod-vscode-example.git envVars: - key: OPENVSCODE_SERVER_VERSION value: 1.60.0 disk: name: data mountPath: /home/workspace sizeGB: 1 ``` With my simple `render.yaml` and `Dockerfile` in place in the root directory of the cloned project, I am ready to deploy my new fork of OpenVSCode Server onto Render. I use the **New** > **Blueprint** drop-down to begin a new project, find the repository in the GitHub search, give the project a name, and that’s it. I click **Apply** and watch it deploy via the Events stream. When it’s ready, I can click on the public address from the service page in the Dashboard, and enter my nifty new VSCode environment.

Accessing my Open VSCode server instance from the Render dashboard — I click here to access my OpenVSCode Server instance.

dnilasor

Use One-Click Deploys for Secure Online VS Code

Join Our Newsletter. No Spam, Only the good stuff.