Setting up Web Dev Environment / Angular in Pixelbook (Chromebook)

Great, just got my Google Pixelbook not long ago! Time to setup the web development environment.

For your information, Pixelbook runs on ChromeOS. Personally, I feel that ChromeOS is something more like “Android on laptop” than typical OS - Windows, MacOS and Linux. The installation of apps are through Play Store, not like you can download a random executable (dmg, exe), “run & bam! You are ready” type because there’s no Nodejs in Play Store…

Here is the list of software I need for my development environment:

  • Git & SSH
  • Nodejs & nvm
  • Yarn
  • Code Editor / IDE — Visual Studio Code
  • Python — not necessary for web dev, but I need it

There are two options:-

  1. Using Crouton
  2. Using Built in container — Linux for Chromebook (preferred)

Option 1 — Using Crouton

Searching through the web, the most common option I found is using Crouton,— you can install a Linux distribution (Ubuntu, Debian) in ChromeOS by using crouton. After following a few articles + videos and done more than 4 times installation (Just to try out all options), I would say the following resources are the best if you go down to this route:

Here is a screenshot of Visual Studio Code in Crouton. The UI looks pretty primitive huh?

Screenshot after I complete the installation

Option 2 [preferred] — Using Built in container Linux for Chromebook

I found another new and better way — Google announced a completely integrated Linux desktop to the Chromebook. This new Chromebook Linux feature is Crostini, the umbrella technology for getting Linux running with Chrome OS.

At the moment, it’s still in beta, and you can only enable it if you are using Pixelbook (at the moment, support for other Chromebooks should be coming soon!).

I found a pretty good article written by the Android team on how to enable Linux on Chromebooks feature, follow the instruction — until the part it ask you to install Android Studio (because we don’t need android studio!).

After enable Linux and restart, you should see the following icon in your launcher. Cool, we are ready to install our web dev software!

Setting up Web Dev Environment

Install git & ssh

sudo apt install ssh git

Install node & nvm

follow instruction on nvm to install latest version, below serve as an example only.

wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash

nvm install 10

Install yarn

Follow instruction on yarn to install latest version, below serve as an example only.

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list

sudo apt remove cmdtest

sudo apt-get update && sudo apt-get install --no-install-recommends yarn

Install Visual Studio Code (VSC)

Download latest .deb 64 bit from VSC page

There is a Linux files “folder” in your directory, drag the deb file in
1. Drag the downloaded .deb file into your Linux folder
2. Install the deb by running the following command:
sudo dpkg -i <your_file_name>.deb
3. Install dependencies by running the following command:
sudo apt install -f
4. You should see VSC icon show in your launcher, click and open it!
up until this point, you should be able to see the VSC, running node, yarn, npm command

Up and Running! Angular Project ( or any web dev project)

Let’s test if everything work ok until now — I will test by running an Angular project.

ip address to be use later
1. Before we start, run sudo ifconfig in terminal, remember your inet ip, we need to use it later.
2. Create a folder call code in Linux files & navigate to the folder in terminal by running the following command:
cd code
3. Clone an Angular project by running the following command:
git clone https://github.com/chybie/ngxs-coffee
4. Navigate to the project folder by running the following command:
cd ngxs-coffee
5. Install project dependencies by running the following command:
yarn
5. Start the project, set inet ip as host, in my case, it would be:
yarn start --host=100.115.92.194
6. Open Chrome, navigate to http://100.115.92.194:4200, you should see coffees!

Please note that we cannot run yarn start or ng serve because our code is in Linux container, not the localhost of our chromeOS. Therefore, we need to binding the host ip like mentioned above.

Navigate to the url, you should see coffees!

Setting up Python

Installing Python in Linux is not fun… it’s not as smooth as installing it in mac. Get a bunch of errors here and there (which I have no idea what they are).

I use pyenv — Python Version Management to manage different version of Python.

Before installing, I suggest you to open this page Common build problems, give it a read (because most likely you will get into build problems, heh).

Ready? Take a deep breathe.

1. Run the following command to install prerequisites libs (refer to Common build problems article):-
sudo apt-get install -y make build-essential libssl-dev zlib1g-dev libbz2-dev \
libreadline-dev libsqlite3-dev wget curl llvm libncurses5-dev libncursesw5-dev \
xz-utils tk-dev libffi-dev liblzma-dev
2. Install pyenv by running the command below:-
curl -L https://github.com/pyenv/pyenv-installer/raw/master/bin/pyenv-installer | bash
3. If you do hit any problems, refer to Common build problems article or internet to find solution. I ran into a libncursesw6 error, which I need to run the following line to symlink it. You might not need to.
sudo ln -s libncursesw.so.5  /lib/x86_64-linux-gnu/libncursesw.so.6
4. Close and reopen terminal, check if pyenv install successfully
pyenv -v
4. Install a python version buy running the following command. At the moment of writing, I'm using 3.6.1:-
pyenv install 3.6.1
5. Check if python install successfully.
python --version

Summary

Actually I got into a few errors during setting up especially during option 1, at one time my Pixelbook is giving me blue screen and require an USB for recovery (I seriously have no idea what I’ve done, I swear I follow the tutorial guide…).

I hope you found this article or the mentioned video and article before installing Python or going down to route 1. 🤣😘

I am pretty happy with my Pixelbook, the only complain would be to familiarise myself to all shortcut keys again and getting use to Ctrl-C for copy… (no more Command button!)

That’s all. Happy coding!