Software development on a Chromebook
Tags: cloud, webdev, vscode
Published: 2023-06-24 20:48:34

[](https://code.visualstudio.com/insiders/)> Not only is it possible, with some reasonable compromises it is even pleasurable

## What was I thinking?

Despite being, or maybe because I am, a full-time Software Engineer, I regularly have a number of personal development projects on the go. They are seldom very elaborate but can be anything from a single file investigation to a small trial application. I like to document my projects, sometimes in the repo’s ReadMe file, other times in a separate on-line blog (dev.to), and occasionally both. Primarily this is for my own benefit but should someone come across them and find them useful, I would like to think they have all the information they require.

![Dell G7 17" Intel i7](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zd4boo284y54mbzssg3f.png) Dell G7 17" Intel i7

At home I have a large personal laptop with a 17 inch screen and loads of power/storage but it is far too heavy, cumbersome and valuable to take anywhere, so I usually take something smaller. I have tried smaller mobile devices (tablets) in the past but found they were only good for reading posts, email and watching videos. Attempting any form of development, even with a good WiFi connection, was a futile exercise. There were many reasons for this but one of the biggest was I just could not get on with the soft keyboard that took up half of what was already a small screen. So recently I decided to purchase a cheap and light-weight laptop to use when travelling.

![ASUS 14 CX1400CMA](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n005p4zx5z2pawnvyf6v.png) ASUS 14 CX1400CMA

Of course the range and type of software development achievable on a low power device would be limited but I was genuinely surprised at how capable my chosen device was. In fact, the setup I have been using to write some experimental code (in JS) is very similar to that I currently use as a professional frontend developer on a medium-size project. 

## Why a Chromebook

I have always been quite impressed by the power to cost ratio Chromebooks offer. I have revitalised old laptops in the past by installing ChromeOS. However, they often incurred a similar weight issue as my G7 and needed to be plugged in all the time as the battery was long dead and not worth replacing.

Another reason for choosing a Chromebook over a Windows laptop was they are so different. My expectations of the lower powered device would be tempered. This would hopefully limit what I would ask of the machine to that within its capability and not what I really need a larger machine to archive. In the past I also owned a Windows XP Acer netbook, which was very good but I found it very frustrating because the Intel Celeron processor was not up to my unreasonable expectations. 

Another consideration of being constantly reminded the machine was not running Windows, I would refrain from doing anything sensitive on the machine like online banking. Should, on my travels, the device fall into the hands of someone unscrupulous, I will not be providing them with a front door into my personal life.

For a few years I have been aware of on-line development environments such as [JSBin](https://jsbin.com/?js,console), [JSFiddle](https://jsfiddle.net/) and [CodePen](https://codepen.io/your-work). They have spearheaded on-line development and more recently a new breed of on-line resources have become available including [CodeSandbox](https://codesandbox.io/), [Stackblitz](https://stackblitz.com/) and [Replit](https://replit.com/). You can even access your GitHub repos directly through an in-browser (web) version of MS Visual Studio Code by pressing the full-stop (try it in one of your own repos). Of course there are also cloud offerings from Amazon, Google, Microsoft, etc. but they require a little more configuration and setup than I was happy to incur. Finally, there are two relatively new offerings in this space in the form of [GitPod](https://gitpod.io/) and [GitHub Codespaces](https://github.com/features/codespaces). I have signed up but not yet explored what they have to offer.

### My hardware

As mentioned earlier, at home I have a personal Intel i7 laptop with a 17” screen, 8GB of RAM and 2TB of storage, running Windows 11. At work I also use Linux via AWS on a similarly spec'ed machine. So this is what I have become accustomed to using for professional software development.

I wanted a machine that was considerably lighter than my personal machine so I was happy to consider a screen size between 13” and 15”. Also, I did not need as much storage or the power of an i7 processor. However, a small Windows laptop, from a manufacturer I recognised, started at around £400, which was about twice what I was willing to pay. 

Thinking I may have been unrealistic in my requirements I started to think slightly out of the box and reconsidered what I would use the machine for. It was then I found some Chromebooks in the £200 range. Yes, I was being miserly because this machine was only ever going to be used when I travelled and so had a high risk of being lost or damaged in transit.

## My Experience

I will document my experience in three stages; what I was expecting as a minimum, what I was hoping might be possible and finally, what actually was possible.

> **Spoiler-alert:** It worked out much better than I had hoped.

### My initial setup (out of the box)

Hardware: ASUS CX1400CMA

- 14” screen
- Full HD (non-touch) screen
- Physical keyboard (very important)
- Intel Celeron N4020
- 4GB RAM
- 64GB eMMC

Not exactly a powerful piece of equipment but cheap, light, quick (as it happens) and with superb battery life (12hrs); ideal when travelling.

### Minimal expectations

Whilst travelling I want to be able to:

- Research places to visit and plan my journeys
- Keep an online journal of my adventures
- Read articles that have been accumulating on my reading list for weeks
- Experiment with some minor coding projects and document my findings.

All things well within the capability of a Chromebook. I was sure as long as I had a reasonable internet connection I would be happy, and I am.

### My stretch expectation

As a professional software engineer I work with code for a living, 5 days a week 8hrs a day. However, as a principal software engineer opportunities to engage in coding myself are becoming extremely rare. Instead I am engaged in many other activities involved in professional application development (planning, designing, code reviews, mentoring, etc.), all of which I enjoy (so I am not complaining). What this does mean, however, is I also feel the urge to code (personal projects) and investigate new techniques in my personal time. To be fair I have always done so but these days it seems more important than ever, even when I am travelling.

In my downtime I was really hoping to be able to ramp up my personal investigations using more advanced online resources like CodeSandbox or Stackblitz. Fully aware of the limitations imposed on me by the Chromebook, I considered my expectations to be somewhat ambitious. I was pleasantly mistaken.

CodeSandbox (CS) worked exactly as you might expect with an up to date browser such as Chrome 112+. At this stage in my investigation I was not intended to capture my findings in a post like this. I opened CS with the intention of developing some example code to demonstrate the topic of another post and started by creating a new vanilla JS sandbox. Right away my eye was drawn to some menu options I did not recall seeing before.

![GitHub menu option](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bvcr1sjvzu4qbjufxqop.png)

I suspect the GitHub option has been available for some time but I never really needed it. However, on this occasion I thought I would take a look and clicked the button to be shown the following dialog. 

![Copy Sandbox as a Repository dialog](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vq2reyx75d44o2u2ju5s.png)

As I usually sign in to CS using GitHub credentials, it did not surprise me when I was not prompted for them again but if you try replicating this action, you might. I entered the name of a new repo and pressed the 'Create repository' button and there it was, a Git repo accessible from my CS environment. I soon realised that what this offered me over using VS Code in the browser was a runtime environment; very handy. But what if you already have a sandbox, well then that is when the next “new” option becomes interesting.

### Now for the icing on the cake

Before we venture into using VS Code with CS, there is another important change we should discuss and that is how there are now two environments. Older sandboxes and those created using some of the basic templates are known as Browser Sandboxes and run entirely client-side (within the browser), which might be all you need. 

![Starting MicroVM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hv28p8098d89yklkytqd.png)

Newer Cloud Sandboxes run remotely on CodeSandbox's microVM technology, which has a free tier for personal and small team (up to five contributors) developments.

![VS Code menu option](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lvauengwdj2em2qsvadu.png)

Clicking the VS Code button presents the following dialog to take the Browser Sandbox and create a new Cloud Sandbox from it, leaving the original untouched.

![VS Code dialog](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fjgzrydaap7yz2p1qlbn.png)

Once the Cloud Sandbox is created it will appear in the dashboard with a ![Cloud sandbox icon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cgi1du5ri9tde31784nu.png) label. Inside the sandbox you are shown the project in the web version of VS Code, almost the same as the environment you get for CS repos in the browser but richer. Curiously, there was another reference to VS Code in the top-right corner of the screen with a drop-down menu.

![VS Code menu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kwe1zfysf9tbip0sx91c.png)

Selecting the “Open in [VS Code Insiders](https://code.visualstudio.com/insiders/)” option presents the following dialog.

![Launching VS Code dialog](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mfqqcqm1l0vlcd0amuhh.png)

If VS Code is already installed on the local machine, pressing the “Launch in VS Code” might try to install the “insiders” edition before opening the application to provide you with remote access to the environment over a Secure Shell (SSH) connection. But, look at the lower half of the dialog and you see something I found really interesting.

### The cherry on the top

My first thought on seeing the installation instructions was “but I cannot install VS Code on this tiny machine, it is not available for ChromeOS from Microsoft nor is it through the Google Play Store”. I was wrong again but there was a little more to it.

The link in step 1 presented me with a couple of Linux varieties of VS Code to download. I thought “what’s the harm” and downloaded the Debian package assuming the website would be aware I was using ChromeOS and would not have offered it if it were unsuitable. I downloaded the package and started installation, which is when it got very interesting. Before installing VS Code, ChromeOS enabled its “Linux development environment” feature, which is a little like WSL (Windows Subsystem for Linux), and prepared a virtual machine (VM) for me. It went on to install and configure VS Code on my VM and provided an icon in the ChromeOS launcher.

The link in the second step commenced installation of the “CodeSandbox Extension for VSCode”. Once complete I noticed CodeSandbox was not the only plug-in that had been installed but Remote Explorer (and associated SSH extensions) had also been installed.

What this means now is, I have VS Code (IDE) installed locally, a Cloud Development Environment (CDE) provided by CodeSandbox and a secure connection between them. I also have the option to protect projects in a GitHub repo and potentially develop an application with a small team. 

![Combined Integrated and Cloud Development Environments](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0vual498oxb9d0efhpmd.png)

As stated previously, as long as I have a reasonable internet connection I can develop code and execute it in an environment almost certainly more capable than my local machine. I would argue many developers these days would find their jobs almost impossible without ready access to the internet and it is only in extreme cases when such restrictions are imposed on a team.    

### More for another post

By this point I had to draw this post to a close and concentrate on my original task but during the latter stages of my journey I encountered two other interesting technologies.

[GitHub Codespaces](https://github.com/features/codespaces) are a step on from Cloud Sandboxes with a wider variety of virtualized hardware. There is a free account but it is time limited depending on the size of virtual machine you select. Check this [YouTube](https://youtu.be/_W9B7qc9lVc) video out for an introduction.

[GitPod](https://www.gitpod.io/) can integrate with a range of Git repo hosts and supports a number of popular IDEs, not just VS Code. The Starter account gives you 50 hrs free per month.

## Conclusion

So I have to admit, in retrospect, I think the title of this post should have been “Software development through (or “using”) a Chromebook”. A (justifiable) criticism hardware designers have of software engineers is that, as soon as they increase the computational capability of computers, software developers go and squander the benefit, but not in this case. The availability of [Cloud Development Environments (CDE)](https://www.gitpod.io/cde) greatly reduces the need for a powerful laptop in order to engage in quite significant software development. 

Since starting this article I have discovered the same (or similar) hardware is available, at a similar price, but with Windows 11 installed. However, I do not regret getting the Chromebook. It is very quick to start and run and appears to be very battery efficient.

### Supplemental

I have been using the hosting environment provided by [Netlify](https://www.netlify.com/?utm_source=google&utm_medium=paid_search&utm_campaign=12755510784&adgroup=118788138897&utm_term=netlify&utm_content=kwd-309804753741&creative=645259053270&device=m&matchtype=b&location=1006734&gad=1&gclid=CjwKCAjw1MajBhAcEiwAagW9MYCpVEEA3vH_9-DzKJKxBx4LEHp_eVChKzKEgj2JIjTQ8qcVergo7xoCDN4QAvD_BwE) for years. I am aware there are several available including [Vercelli](https://vercel.com/try/better-on-vercel?utm_source=google&utm_medium=cpc&utm_campaign=17296587986&utm_campaign_id=17296587986&utm_term=netlify&utm_content=136831421917_598689760262&gad=1&gclid=CjwKCAjw1MajBhAcEiwAagW9MfXw7kLahoGMRuNhmmxwsEx8-JXBK9UQg0K99yT6M9IpzFmFH7cq-RoCqhgQAvD_BwE) and [Heroku](https://www.heroku.com/), to name a few, but Netlify was the first I tried and it continues to work well. It links into my Git repos on [BitBucket](https://bitbucket.org/product?&aceid=&adposition=&adgroup=146989416150&campaign=18815940676&creative=632894025969&device=m&keyword=bitbucket&matchtype=e&network=g&placement=&ds_kids=p74128754417&ds_e=GOOGLE&ds_eid=700000001551985&ds_e1=GOOGLE&gad=1&gclid=CjwKCAjw1MajBhAcEiwAagW9MeeN7mWRVe-jfUHCjY4swMXvSSVYHRTMXW31uaAmse58W3kZp7ERABoCTG8QAvD_BwE&gclsrc=aw.ds) and also offers Functions-as-a-Service (FaaS) for experimentation and small projects. Netlify is also a prime advocate of the [JAMStack](https://jamstack.org/) architecture that is gaining considerable interest.

In a very recent development [Oracle](https://www.oracle.com/uk/cloud/free/) have made available “always free” online Linux servers. For more details I suggest you check-out this YouTube video and I will let [Gary Explain](https://youtu.be/zWeFD4NNF5o) as he does it so much better.