My old setup was a dual boot desktop with Ubuntu 20.04 and Windows 10. Ubuntu is mainly for the great support for development tools like Docker and I used it because my production systems run in Linux. As a gamer and hobby game developer, Windows is a must. Recently, I decided to work in a shared office space and bought a Macbook Air with the new M1 chip.
Docker for Mac is supported and the Apple CPU support is in beta. I got it running but quickly ran into performance issues related to volume mounts which are not new for Docker on OSx. There are workarounds for it, like mounting volumes as NFS, but it is all very OSx specific, a bit complicated to set up, and still slower than running Docker on Linux. Therefore, I tried an alternative: remote development.
The remote development server
The core idea is that not your own machine but a remote machine will do the bulk of the development work. Freeing up resources of your own machine for chrome tabs. So the first step in the process is deciding the remote machine that you will use. After trying a cheap droplet from DigitialOcean, and running into memory issues (I would recommend at least a machine with 4GB RAM preferable 8 GB). I decided on a powerful machine from Hetzner, namely the CX31, a 2vCPU, 8 GB RAM, 80GB disk space for only € 10.59 a month (no affiliation).
Setting up the server
The one skill you need to learn is how to use SSH, if you haven’t already, you have to generate a key (supported on all systems). Generate a new user and add the public key (e.g. the content of ~/.ssh/id_rsa.pub) from the client to the authorized keys file on the server ~/.ssh/authorized_keys. So you will be able to connect to the server in a secure way without a password.
Next is to install all the software you need for development. In my case, it was just installing docker, docker-compose, and git. When the server needs access to private repositories you can generate an SSHkey for the server and add the public key from the server to your user on Bitbucket / Github.
It is a good idea to enable automatic updates for ubuntu to keep the software secure.
By default, Docker will be accessible from the outside. Anyone that knows the IP of the server could potentially access your development website. This is mainly a feature as it will be easy to show your work to your collages but you have to be extra careful measurements to not to have sensitive private data exposed. When you really have to develop or debug with production data you can set up the firewall to block all traffic except the SSH connection.
Setting up Visual Studio Code
Remote development is officially supported in VS Code. After installing the extension you can connect with SSH to the server with view -> command palette… -> connect to SSH hosts -> add a new SSH host. Put in your SSH connection string <user>@<ip> -A
You should be able to connect to the server or else you need to look into the SSH configuration and see if you can connect manually from the terminal. Now you should be able to open a folder on the server and start a new VS Code project. You need to open a VS Code project to use port forwarding.
An important concept is that all development extensions that are not related to the VS Code user interface are installed on the server. The VS Code project files will also be located on the server. Furthermore, when you debug your application it will basically all be done on the server and most of it will work out of the box without having to configure remote connections.
To be able to access your application like you are working on your local machine (or when you have the server behind a firewall) you can set up SSH port forwarding with: view -> command palette… -> forward port. When you add port 80 here you localhost:80 will access the port on the server. You can quickly enter the server with the terminal by going to view -> terminal.
How well does it work?
I am now remote developing for close to a month and the experience is very smooth. The only downside is that you will need to have an internet connection but even on unstable networks as long as you have a connection the experience was sound.
Experienced benefits remote development vs local development:
- The Docker server runs very smoothly on relatively cheap hardware. Quick compiling leads to faster feedback during development.
- Having the website available on the server. You can quickly test the responsiveness of a new feature on your own phone.
- The same project files are available on my Macbook Air and both operating systems on my desktop. The development experience is nearly identical.
- The server keeps running when you are offline. No need to start the docker containers when you start developing.
- It is easy to scale up when extra CPU or RAM is needed for more intensive tasks.
Potential benefits for the future when I hire an junior developer.
- No large investment needed in pricy hardware. No operation system requirements for the employee.
- A senior engineer can set up a complete working environment including debugging tools in advance and quickly get the new developer up to speed.
Should you try it?
I would recommend trying out remote development. Especially, when you buy a new machine and will have to spend time for set up time either way. You can save a lot of money by having to spend less cash on expensive hardware and pay a monthly fee instead. Kudos to VS Code for making the experience very easy to set up and user-friendly.
The worries I had for stability were not really valid and there is always a backup hotspot on my phone if needed. You do need to understand SSH, but most developers do, and all developers should understand and use this already.
A remote server gives unexpected flexibility. For example, I am now sometimes also developing on my Windows system instead of on Ubuntu where I can use tools like Adobe XD.
Ivor · August 25, 2021 at 4:53 pm
Blast from the past here: we did HMI together when we were at UTwente! Good times! By chance, I ran into your blog when searching a bit for Svelte stuff. So great job on your SEO 😉 I just wanted to let you know that I appreciate the content.
In regards to this article: interesting too read about this setup. I’m considering to take my girlfriends Chromebook because they are so cheap. I was a but worried because I don’t know how good the Chromebook will perform for a developer. So knowing this option is out there eliminates another doubt I have. I’ll try it out asap.
Looking forward to new content!