DEV Community

Cover image for Setup Javascript Dev on ChromeOS
Tim Apple for Vets Who Code

Posted on • Edited on

Setup Javascript Dev on ChromeOS

I recently bought myself a Pixelbook Go so I could play with ChromeOS and I was pleasantly surprised at how great it actually was. This made me want to do some development on it. The set up was pretty easy and I thought I would share it here.

The Chromebook is an actual Linux machine running Gentoo, but we still have to install a Linux VM to get access to Linux. Luckily they make this ridiculously simple on ChromeOS.

Go to your settings and look for Developers and you will see the toggle to install Linux.

Alt Text

It doesn't get much easier than that. You just wait a minute or two and let it do it's thing.

Next we can install Visual Studio Code from this link. Just click on the link to download the .deb file as seen below.

Alt Text

Once you have it downloaded it should show in your Downloads in the file manager. You just then double click it and it will install.

Alt Text
Alt Text

You will be able to find VSCode in your Chrome Menu or through desktop search. You can run it and pin it to the taskbar if you wish.

Alt Text

At this point you can install your favorite extensions and be productive. But let's customize a bit and get Node.js installed and running.

Your Terminal app should be easily accessible in the ChromeOS menu. You can see it circled below.

Alt Text

Once we open the terminal we will be doing some text file editing so we will need to install an editor, I prefer nano.

$ sudo apt install nano

Next we will install the .zsh shell. I do this because it makes it easier to manage node with plugins.

$ sudo apt install zsh

Let's install a couple tools to make sure you have them also.

$ sudo apt install wget git

Now we install Oh-My-Zsh
$ wget https://github.com/robbyrussell/oh-my-zsh/raw/master/tools/install.sh -O - | zsh

$ cp ~/.oh-my-zsh/templates/zshrc.zsh-template ~/.zshrc

$ source ~/.zshrc

We'll add the plugin 'zsh-autosuggestions' this is very handy by using past commands to help you auto fill future ones. The command for install is..

$ git clone https://github.com/zsh-users/zsh-autosuggestions ~/.oh-my-zsh/custom/plugins/zsh-autosuggestions

And zsh-nvm will help us keep a current node install and even change versions if needed.

$ git clone https://github.com/lukechilds/zsh-nvm ~/.oh-my-zsh/custom/plugins/zsh-nvm

Once you have done all of the above commands we will edit our .zshrc. First make sure your in your /home directory by typing cd and pressing enter. Next run nano .zshrc.
we want to add the plugins we installed earlier. This is a little further down the config. Just enter them as I have in the picture below.

Alt Text

Once this is done you will press ctrl + o to write the file and ctrl + X to close nano.

Now type source .zshrc to load your plugins and theme.

And now we install the LTS version of node simply by typing nvm install --lts

Now you can create a directory in you Linux environment using the terminal or your file manager. Then just right click it to open in Visual Studio Code.

Alt Text

You should be more than on your way now. If there are any details I may have missed let me know and I'll edit this document. I hope it helps. ChromeOS is very nice and light with battery power lasting ages. Great for when your out and about.

Alt Text


9 April 21

I learned that syncing your VSCode is troublesome. The issue is no key-manager installed by default on the ChromeOS vm. This fixes the issue and seems to add the least amount of packages.

sudo apt install gnome-keyring

Top comments (0)