DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,274 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Install code-server using npm

npm install -g code-server
Enter fullscreen mode Exit fullscreen mode

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 
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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;
        }
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.

Image description

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.

Image description

Oldest comments (2)

Collapse
 
andrewbaisden profile image
Andrew Baisden

Just a heads up that you can add highlighting to the code blocks if you'd like. Just change:

code block with no colors example

... to specify the language:

code block with colors example

More details in our editor guide!

Collapse
 
mrscripting profile image
Jorge Rodrigues (mrscripting) Author

🌚 Life is too short to browse without dark mode