Ngrok + Code-Server: Setup Cloud Development Environment on Raspberry Pi

Photo by Jainath Ponnala on Unsplash

This tutorials helps you access your raspberry pi or desktop on internet for development. We will setup remote development environment with it. We will use ngrok free tier and open source code-server from coder.com to make it happen.

Prerequisite

• Raspberry Pi (or any system you want to connect on internet)
• Basic Linux commands with SSH

Hope that you have working raspberry pi and connected to LAN via ethernet or wi-fi. Grab its ip address and ssh to machine.

ssh username@192.168.0.111 (rpi ip-address in lan)

Code-Server Setup & Demo

Code-server is open source cloud development environment. Its open source and provides web based vscode interface.

visit one of below link

• https://github.com/coder/code-server
• https://coder.com/docs/code-server

You will find commands to install and start code-server their. Also you can copy paste below command in raspberry pi terminal to install code-server

curl -fsSL https://code-server.dev/install.sh | sh

once installation is done you can start code-server locally by enabling it

sudo systemctl enable --now code-server@$USER

we need to update an ip address to accept connection outside local network. For that we have to update bind address to 0.0.0.0

code-server configs are stored in user config directory. It’s usually in /home/username in linux systems and /Users/username in mac machines.

vim ~/.config/code-server/config.yaml

config should look similar to below.

# config.yaml
bind-addr: 0.0.0.0:8080
auth: password
password: password
cert: false

Here, we are using password based access but you can configure oauth solutions or other options by external authentication page

Now start browser and visit http://192.168.0.111:8080 you will able to see similar to below image.

code-server (image from git repo)

You can configure it and play around like choose folder or user home directory. Try terminal with few commands.

Ngrok Basics & SetUp

Ngrok is reverse proxy server which connects local devices to internet or private network. It provides two things one is custom subdomain and command-line tool to bring devices over internet on same custom domain.

Visit Ngrok Site https://ngrok.com/ and create account. You need to verify email address and add multi factor authentication. I used Google Authenticator, you can choose any suitable. Then you will be redirected to dashboard.

ngrok dashboard

They have provided installation ngrok on raspberry pi.

Get Vishvaraj Dhanawade’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

To install ngrok on Raspberry Pi

snap install ngrok

If you have install ubuntu server on raspberry pi and preper to use apt package manager. Then you can use below command instead of snap command.

curl -sSL https://ngrok-agent.s3.amazonaws.com/ngrok.asc \
 | sudo tee /etc/apt/trusted.gpg.d/ngrok.asc >/dev/null \
 && echo "deb https://ngrok-agent.s3.amazonaws.com buster main" \
 | sudo tee /etc/apt/sources.list.d/ngrok.list \
 && sudo apt update \
 && sudo apt install ngrok

once ngrok installation is complete you can validate it by checking help info

ngrok --help

Now, lets connect ngrok tool to your account. This command is provided on your ngrok dashboard. Else you can click on “Authtokens” in left sidebar and replace token in below command.

ngrok config add-authtoken your-ngrok-auth-token-here

You are done setting up ngrok tool on raspberry pi.

Now lets create static subdomain for ngork. Click on Domains in left sidebar. Here if no domain is assigned to you, then you need to click on “New Domain” to generate new domain.

ngrok domain page

Now you can test code-server over internet manually. Locally code-server runs on 8080 port. Replace domain name in below code and hit enter. Visit domain name to access code-server on internet.

ngrok http --domain=your-subdomain.ngrok-free.app 8080

SetUp Service To Automatically Connect Domain

Now lets create system service to bring code-server over internet with ngork tool automatically. This will help when you are away from device and it restarts due to electricity or updates. Whenever it’s started it will be available on ngrok subdomain.

We have already enabled code-server service, so it will start with system.

create service file for ngrok command

sudo vim /etc/systemd/system/ngrok.service

add below content in it. Don’t forget to update your relevent paths

[Unit]
Description=Ngrok Service
After=network.target

[Service]
ExecStart=/usr/local/bin/ngrok http -domain=your-subdomain.ngrok-free.app 8080
WorkingDirectory=/home/your_username
Restart=always
User=your_username
Group=your_groupname

[Install]
WantedBy=multi-user.target

press ESC then type wq! to write file and quite.

Let’s restart daemon and start ngrok service

sudo systemctl daemon-reload
sudo systemctl enable ngrok            # enable ngrok service
sudo systemctl start ngrok             # start ngrok service in background
sudo systemctl status ngrok            # check service status

Done! Now visit ngrok domain name and everything should work fine.

Security

In our approach, we have choosen password based approach for simplicity. You can use OAuth provided to improve security.

Both code-server and ngrok supports oauth plugins

• code-server oauth
• ngrok oauth

Hopefully everything should work fine. Let me know if you face any issues.