Setup Javascript Dev on ChromeOS
Tags: beginners, javascript, chromeos, linux
Published: 2021-04-07 15:23:53

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2lshnn8xym1fz9e5mj1x.png)

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](https://code.visualstudio.com). Just click on the link to download the .deb file as seen below. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ovvb08k0z7t8z70hftq0.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6vjx6xvf0lqz90xt1g69.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m0v8d1yn2cuk48gg3nne.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0sh663h2zknncifl7v12.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/arzubmh3ws6wmrg99g7s.jpg)

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](https://ohmyz.sh/)
$ `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](https://thepracticaldev.s3.amazonaws.com/i/h98ke8uhgn64s2tror5a.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x95flkr3x5f380jk9oh8.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ejcebk97ohcgng35vo8.png)

---

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`