Skip to main content

How to Program Raspberry Pi Remotely, Using a Browser with VS Code

Raspberry Pi Code Server
(Image credit: Tom's Hardware)

Remotely editing code on a Raspberry Pi is possible, but it relies on taking a few steps to setup the working environment. Typically we would enable SSH and then connect using a terminal, access the files on the Pi via a sftp connection or run a VNC connection after doing a headless Raspberry Pi setup. However all of these methods have their drawbacks, whether it’s limiting yourself to text-based editors in the terminal or slowing yourself down by having to constantly reupload files or wait for a sluggish remote desktop. 

But what if we could write code, on our Raspberry Pi using a web-based interface that’s accessible from another device on your network such as a laptop or tablet? Well now we can and in this tutorial we will introduce code-server, a tool that enables us to program in in Microsoft’s Visual Studio Code application from the comfort of your device’s browser. Of course, since this is a Raspberry Pi, you’ll be using Pi-friendly languages such as Python or web-friendly languages like JavaScript, not Microsoft languages such as Visual Basic or C#. 

To install code-server, power up your Raspberry Pi 4 and follow these instructions.

1. Download and install code-server by entering this command in the terminal.  

curl -fsSL | sh

2. Autostart code-server on boot by running the server as a service in the background.

systemctl --user enable --now code-server

3. Open the config file for editing in Geany. 

geany /home/pi/.config/code-server/config.yaml

4. Change the bind address to enable any device on the network to connect.

(Image credit: Tom's Hardware)

5. Change the password to raspberry. Press CTRL + X, Y and then Enter to save and exit.

6. Get your IP address by hovering the mouse cursor over the Networking icon in the top right corner.

7. Reboot the Raspberry Pi and 

8. On a PC on the same network, open a browser and go to the IP address of the Raspberry Pi, followed by :8080. For example

9. Log in using the password “raspberry.” 

(Image credit: Tom's Hardware)

10. Click on Python, found under Tools and languages to install support for Python 3.

(Image credit: Tom's Hardware)

What makes code-server and VS Code different to other more beginner focussed editors is in how they can be extended to match the way we work.

(Image credit: Tom's Hardware)

Project files can be grouped into folders, tidying away the many files that are generated in a large project.

(Image credit: Tom's Hardware)

There are tools to work with source control, where code is stored in a version control system such as Git. We can publicly publish our project while still inside the editor.

(Image credit: Tom's Hardware)

We can step through the code, looking for bugs and issues in the code as they happen. Pause, rewind, restart or stop as the code performs each task.

(Image credit: Tom's Hardware)

Les Pounder is an associate editor at Tom's Hardware. He is a creative technologist and for seven years has created projects to educate and inspire minds both young and old. He has worked with the Raspberry Pi Foundation to write and deliver their teacher training program "Picademy".