Coding is not an easy process, especially if you have to be super focused to do it relatively fast and without bugs. Keeping the focus on coding only is quite a difficult challenge, but this story is more about how to make the ultimate setup to code from anywhere with the internet and browser!
We at Hexometer.com traveling a lot, and sometimes switching computers to check our tools for a few days intensively, that’s why I needed an environment that will support the same coding flow on any kind of computer with internet and browser.
Probably this is not for nerd low-cost travelers, because they usually getting cheap places with a bad internet connection, and as you can imagine, the only way of making a laptop independent coding setup is to make it over the internet using a basic browser because guess what Browsers are everywhere!
What are the advantages?
I’ve been always chasing to get the most powerful ultrabook around to make my coding process faster and code compile time seamlessly. As you can guess that could be expensive, and the power you get is affecting the laptop’s battery time. Usually, MacBooks are fine to code about 4–5 hours without changing them, which is not bad, however, you are blocked to that specific laptop and sometimes moving to a new laptop getting harder and harder over time.
I will be honest, for the past 4–5 years I’ve been using only MacBooks primarily for my coding projects, and I love the way how they built and how they are running OS specifically optimized for them, BUT when I started to work with remote servers and DevOps stuff, I realized that moving entire coding flow to server will give more advantages than disadvantages
- - 1GB/s internet network! this is a HUGE benefit, specifically if you are installing remote packages or pulling/pushing Docker containers quite often.
- Powerful CPU Cores without any UI overheads. You can get powerful Xeon or i7 CPU cores for your coding server cheaper than you can buy them as a laptop bundle, but the most significant difference is that laptop’s OS’s (all) using 3–5% CPU just to keep Desktop UI operating, which drains batteries faster if you combine powerful IDE with it.
- Having your localhost accessibly remotely! As a web developer, I used to run a tool called ngrock to make some remote tunneling, for showing up some experimental projects to clients. Now it is extremely useful to have even dedicated domain attached to my dev environment, code and share stuff online directly from one place!
- Very flexible disk space. I’ve been using laptops with 256GB SSD almost all the time, but having the ability to scale it dynamically is just giving the ability to run some good data collection tests directly inside your coding environment.
All of these points coming as a bonus to the main benefit of Coding inside the browser literally on any device with a browser.
VS Code inside your browser
There is several tools/services which are giving the ability to run VS Code like editor inside your browser. However, there is one open-source project, which is doing the exact VS Code copy inside the browser, by replacing Electron’s functionality with WebSocket based server communication.
It works fine even with the 3G network over a mobile hotspot, however, sometimes when the internet connection is bad, you will be very disappointed, but that’s the tradeoff for being laptop independent.
Anyway, you are getting more benefits than you can even imagine at the beginning.
Code-Server is based on VSCode BUT they changed all connection parts with the Electron desktop app to work over Browser + Websocket connection, to run services on server-side and deliver results to the browser. Code-Server works on all platforms including MAC, Windows, and Linux, but for most cases, I’m sure you will use Linux as a server OS to run code-server.
# Running code-server from CLI ~# code-server --auth none --port 8888
This will start code-server, and now you can access to VSCode functionality from browser by navigating to http://localhost:8888
If you are going to run this for a long term and would like to manage all your projects over it, you are going to make it run as a background service, let’s say using with SystemD (that’s what I’m using).
Basic SystemD configuration for my case looks like this
[Unit] Description=Code Server [Service] PIDFile=/tmp/coder-99.pid User=coder Group=coder Restart=always KillSignal=SIGQUIT WorkingDirectory=/home/coder ExecStart=/usr/local/bin/code-server --auth none --port 8080 [Install] WantedBy=multi-user.target
As you can see I’m not using public port directly from code-server, this is because it actually can expose all my projects without any access control (their password thing is not that secure). To make it more secure I’m using Nginx in front of it, and making specific configurations just to proxy stuff and set an HTTP Authentication + some SSL configurations to secure it only accessible over VPN.
Is it really working on ANY device?
I’ll say Yes! and No!
Some devices have Unicode input problems, where they are using some character converting service, like most of the Android devices, BUT for Apple devices, it works great! Even on iPad Pro you will feel the complete joy of coding and accessing server CLI over VSCode terminal.
I worked for a while on Acer Chromebook 14, which is a very low power device, BUT it worked for me pretty fine because most of the autocomplete and service processing work on the Server-side not blowing up your local laptop’s CPU.
This is defiantly not for everyone, if you are mainly coding on applications not requiring desktop view or specific OS, then you can do it. I even did React Native coding with it using Expo, where they are covering all OS independent flows.
I hope you will enjoy coding inside the browser and be laptop independent as I’m now!