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
- Code Editor / IDE — Visual Studio Code
- Python — not necessary for web dev, but I need it
There are two options:-
- Using Crouton
- 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:
- Video (step by step, clear instruction, awesome!): Setup your Chromebook for Web Development by Stephen Fluin
- Article: How to Easily Install Ubuntu on Chromebook with Crouton
Here is a screenshot of Visual Studio Code in Crouton. The UI looks pretty primitive huh?
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
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
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 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.
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:
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:
5. Install project dependencies by running the following command:
5. Start the project, set inet ip as host, in my case, it would be:
yarn start --host=100.115.92.194
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.
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
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.
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!