How to create a remote workspace

Gathering your needs

To get your on-the-go environment ready we should get some needs. We want an IDE that will run within our browser, which means we do not want to install on the device we will be using this on. So what are we going to use?


1) Ubuntu Server

The core where we'll host our code server, this will be remotely accessible from anywhere you want. This is our on-the-go workstation. I recommend getting yourself a Ubuntu 18.04 server or one with the latest LTS version.


2) Code Server

Visual Studio Code, a free popular editor/ide by Microsoft. It comes with powerful extensions and themes. Now also available as a server. The code server allows you to work on the file system of your Ubuntu server. Plus you can host a live server when creating HTML based websites :)


3) Process Manager 2

Highly recommended way of managing processes in Ubuntu. I mainly use it to run things like Node and binary files. We are going to use it to run the code server and keep it alive even after a server reboot. Also, we use its config file to specify certain options for the code server.


4) NGINX

Normally a web server, but he will be forwarding all the requests to our server and binding it to a domain name. Also, it will be managing our live preview URL and will take care of whitelisting if needed!


Creating the environment

I expect you to know how to SSH into your server so let's do that! From here on we will be updating our server with a simple one-liner. Also we will get some needs...

sudo apt-get update -y && sudo apt-get upgrade -y && sudo apt-get install nginx -y


Now we have that ready to go we are going to create a directory where we can put our code server in. I like to keep all my stuff in a newly created /data folder. But this is up to you.

sudo mkdir /data && sudo chmod 774 /data && sudo chown $USER:www-data /data && cd /data


Since our server is now ready we only need a couple of things in order to get this working. Let's start off installing PM2(Process Manager 2) with the following command, keep note that Node.JS needs to be installed on your system.

sudo npm install pm2 -g


Everything is ready except... code server, so that is what we are going to grab now. Keep in mind the URL used in this example might not be the most recent version, so get the right download URL yourself. You can find the releases over at https://github.com/cdr/code-server/releases. And you will copy the link from the "code-server-{VERSION}-linux-arm64.tar.gz" release unless you are on a different system than given above.

wget https://github.com/cdr/code-server/releases/download/3.2.0/code-server-3.2.0-linux-x86_64.tar.gz


Once downloaded you need to extract it. You can do that using the following command:

tar -xzf code-server-3.2.0-linux-x86_64.tar.gz && cd code-server-3.2.0-linux-x86_64


When you have got the code server in your directory and everything is installed we will be creating an ecosystem file. This file will contain all options and starting instructions code server needs.

pm2 init

When this is the first time using pm2 don't forget to make it work on a startup. pm2 startup


Open this file with nano on your server or with a preferred editor via SFTP.

module.exports = {
  apps : [{
    name: 'Code Server',
    script: './code-server',
    exec_interpreter: "none",
    exec_mode: "fork_mode",
    env: {
      "PASSWORD": "helloworld"
    },
  }]
};

You can change the password. But keep in mind the app should be restart or even readded to pm2 to have the environment variables updated.


Optional options

It's now running and should be accessible within your browser. This step is optional but I like to proxy it so I can access it via a domain. Something like code.example.com or vsc.example.com would be nice to have. For this purpose, I have recreated this setup on my WSL with this NGINX config.

server {
    listen 80;
    server_name vscode.local;


    location / {
        proxy_set_header X-Forwarded-Host $http_host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_http_version 1.1;


        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_pass http://127.0.0.1:8080;
        proxy_pass_header Sec-Websocket-Extensions;
    }
}


Now let's get coding :)