Run VSCode in browser from a remote server?

August 4, 2019 1.7k views
Development

Is it possible to run VSCode on a remote server and access it via a browser?
What are the benefits/drawbacks to running a Web IDE this way?
What kind of server specs do I need?
What are the steps to setting it up?
How do I make sure the server is secure?

1 Answer

Hello,

Thanks for the great question!

Yes this is definitely possible thanks to a company called Coder. They recently open sourced a project called Coder Server. It basically allows you to run VScode on a remote server and access it via your browser.

Benefits:

  • This allows you access your IDE from any machine (even your phone if you needed to)

  • You could have multiple people working on the same project from the same editor

  • And of course if you run it on DigitalOcean you could easily add more resources to the server that you are running the VScode on at any time

  • Even though you would be working from your browser it actually feels just as you were to work on your desktop

Drawbacks:

  • I’ve noticed that when saving files there’s some delay as the files have to actually be saved on the remote server, though to be honest when writing code you can’t notice the lag

  • You would have to pay for the resources that you use, though again if the laptop that you use is not very powerful it would be quite handy for you. For example I have an old MacBook Air with only 4GB of RAM so running my IDE on a DigitalOcean server saves me a lot of local resources

  • Another downside is that you would always need internet access to be able to work on your project

Server Specs:

  • As far as I know it is recommended to start with at least 2 CPUs and 7-8GB of Memory

  • I’ve tested it on Ubuntu but it should work on any other major Linux Distributions

Installation and Configuration:

Before you start you would need to create a droplet via the DigitalOcean control panel with the recommended 2 CPUs and 8GB of RAM. Then you would have to SSH to the droplet. If you are not sure how to do that you could follow the step here:

https://www.digitalocean.com/docs/droplets/how-to/connect-with-ssh/putty/

Once you’ve created and accessed your VM, you need to get a copy of the latest release of Code Server and deploy it on the droplet.

  • First go to Github and copy the link to the latest release:

https://github.com/codercom/code-server/releases/latest

  • You can download the file to your VM with the wget command:
wget https://github.com/cdr/code-server/releases/download/1.1156-vsc1.33.1/code-server1.1156-vsc1.33.1-linux-x64.tar.gz

Note: Change the URL with the latest Code server release to make sure that you are running the latest version!

  • Then extract the file:
tar -xvzf code-server1.1156-vsc1.33.1-linux-x64.tar.gz
  • Go to the code server directory:
cd code-server1.1156-vsc1.33.1-linux-x64
  • Make the code-server binary executable
chmod u+x code-server
  • Finally run the code server on port 80 so that you could access it via your browser:
./code-server -p 80
  • Take a note of the password in the output and then go ahead and access your droplet’s IP in your browser via https:// and port 80 appended at the end. Example:

https://my.ip.goes.here:80/

As by default code server uses a self signed SSL, you would get an SSL warning in your browser that you could accept and ignore.

That is pretty much it, now you would have your IDE running on DigitalOcean and it would work and feel just like the on your desktop!

  • Or if you are a docker fan you could also run it in a docker container:
docker run -it -p 8443:8443 -v "${PWD}:/home/coder/project" codercom/code-server --allow-http --no-auth

Security

What I would suggest is the following:

  • Use Apache or Nginx as a reverse proxy. If you are not sure what reverse proxy is, I would recommend going through this great step by step guide on the DigitalOcean site:

https://www.digitalocean.com/community/tutorials/how-to-configure-nginx-as-a-web-server-and-reverse-proxy-for-apache-on-one-ubuntu-18-04-server

  • Also having Apache or Nginx installed would then allow you to install fail2ban and that way you would protect your IDE from brute force attacks. For more information regarding the recommended fail2ban config you could take a look here:

https://github.com/cdr/code-server/blob/master/doc/security/code-server.fail2ban.conf

And

https://github.com/cdr/code-server/blob/master/doc/security/fail2ban.md

  • Also another benefit of having Apache or Nginx installed you could point a custom domain name to your droplet (ide.yourdomain.com for exmaple) and use Let’s Encrypt with certbot to issue an actual SSL certificate so that you don’t get the SSL warning. You could have a look at this guide on how to setup certbot and Nginx:

https://www.digitalocean.com/community/tutorials/how-to-secure-nginx-with-let-s-encrypt-on-ubuntu-18-04

Hope that this helps!
Regards,
Bobby

by Hazel Virdó
by Kathleen Juell
In this tutorial, we will show you how to use Let's Encrypt to obtain a free SSL certificate and use it with Nginx on Ubuntu 18.04. We will also show you how to automatically renew your SSL certificate. If you're running a different web server, simply follow your web server's documentation to learn how to use the certificate with your setup.
  • There is an additional and aligned component to the answer above: if you just want Visual Studio Code / VS Code Hosting on a cloud development machine and available in the browser, you can skip all those steps and be running in less than 2 minutes by starting a code-server 1-Click App on a 2GB or 4GB RAM Droplet immediately, by going to the DigitalOcean Marketplace: https://marketplace.digitalocean.com/apps/code-server

    This particular Marketplace 1-Click App is released, maintained, and supported by Coder Technologies, the company mentioned above, and we really appreciate them for it!

    💙🦈

    alt text

Have another answer? Share your knowledge.