Vscode server

So you have an ipad or chromebook and you want to use it for programming too? Why not use vscode for it?

Visual Studio Code is not directly available on the apple store so we will use the raspberry pi as our host for visual studio code. But instead of remoting via vnc we will use the web version of vscode.

You will need to have a fully working raspberry pi so if you are new to it just check this page and it will guide you through Setting Up Raspberry Pi

With your raspberry pi installed and fully available via ssh it’s time for us to install a ssh app from the ipad store.

You can remote into the raspberry pi using the ssh app. In this case let’s say my raspberrypi address is 10.1.1.254

ssh pi@10.1.1.254

Let’s install some requirements for installing visual studio code server.

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
nvm install 14.4.0

Install code-server using npm

npm install -g code-server

Now we need to add our code-server to systemctl. For that we are going to use the pm2 module.

sudo npm install pm2@latest -g
pm2 start code-server
pm2 startup systemd 

This will produce a command copy and paste it. It should look something like this:

sudo env PATH=$PATH:/home/pi/.nvm/versions/node/v14.4.0/bin /usr/local/lib/node_modules/pm2/bin/pm2 startup systemd -u pi --hp /home/pi
pm2 save

Now restart the raspberrypi and when it starts check the service status

It should look like this:

pi@raspberrypi:~ $ systemctl status pm2-pi.service
● pm2-pi.service - PM2 process manager
   Loaded: loaded (/etc/systemd/system/pm2-pi.service; enabled; vendor preset: enabled)
   Active: active (running) since Sat 2022-03-26 19:33:15 GMT; 1min 59s ago
     Docs: https://pm2.keymetrics.io/
  Process: 854 ExecStart=/usr/local/lib/node_modules/pm2/bin/pm2 resurrect (code=exited, status=0/SUCCESS)
 Main PID: 932 (node)
    Tasks: 11 (limit: 3720)
   CGroup: /system.slice/pm2-pi.service
           └─932 PM2 v5.2.0: God Daemon (/home/pi/.pm2)

So the vscode is available at localhost:8080 but we need to access it from outside. The best way to acomplish this is by installing and configuring the reverse proxy nginx.

Install it by running:

sudo apt update
sudo apt upgrade
sudo apt install nginx

Now we need to expose the website:

sudo cp /etc/nginx/sites-available/default /etc/nginx/sites-available/code-server
sudo vim /etc/nginx/sites-available/code-server

Comment the default site configuration and uncomment the virtual host configuration. Notice the location parameter is diferent. Just add the code bellow by changing the port where your code-server is listening. On our case we are using port 8081 for the nginx and 8080 for the code-server:

server {
        listen 8081;
        listen [::]:8081;

        server_name raspberrypi;

        #root /var/www/example.com;
        #index index.html;

        location / {
                proxy_pass http://localhost:8080;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection 'upgrade';
                proxy_set_header Host $host;
                proxy_cache_bypass $http_upgrade;
        }
}

Check for configuration errors, enable the newly created site and restart the nginx service:

sudo nginx -t
sudo ln -s /etc/nginx/sites-available/code-server /etc/nginx/sites-enabled/
sudo systemctl restart nginx

And that’s it. You now can use it from your ipad, computer or any other device and keep your files and extensions centralized. You can even expose it using your home router and use it on the go. But for that you’ll need to tighten security.

Although this setup automatically configures a password for the web page (you can check it at ~/.config/code-server/config.yaml) it may not be enough to secure your server. So invest some time in securing the setup.