Ultimate guide for Web Development on Chromebook — Part 1: Crouton

UPDATE 25. 11. 2019:

Linux is now available in beta version right inside ChromeOS!

So why would anyone want to use Chromebook for web development? There’s a couple of reasons:

It sort of makes sense to use a Web oriented Operation System as a Web developer. You get to experience the web apps more. You can get inspired by them, learn from their mistakes, get familiar with their UI and UX. You are on the web probably more than on any other OS.

Chances are, you are experiencing more cutting-edge web features. ChromeOS apps are being built for Chrome. There’s flexbox, FileSystem API, WebGL and more.

And finally, you are forced to use the CLI quite a lot. If you intentionally avoid installing desktop environment like I did, you will have to get around by using CLI. That can be quite frustrating in the beginning but feels more and more awesome over time.

Lastly, Chromebooks are cheap. For a couple hundred bucks, you get a device with great battery life and great booting time. That can be good for student like me, who works only part-time and not always for revenue.

There are cons of course. Quite a lot of them. Even though with crouton you have Ubuntu working, the structure is different. Oftentimes there’s errors you have to deal with. Clipboard might sometimes act funny when copying data across windows. And ChromeOS generally does not try to protect your data that aren’t synced to the cloud. If you encounter a system failure and ChromeOS decides to do a powerwash, your data will be wiped. Backups and version control is crucial.

Install crouton

Unless you plan to use a cloud based solution such as Nitrous.io as your development environment, ChromeOS apps will probably be not enough to develop the web efficiently. Fortunately Crouton is a great tool that let’s you install Ubuntu right into the ChromeOS. Through crouton you can utilize most of the features of Linux: launch servers, set up build tools, install your favorite text editor, image editor and so on. I highly recommend visiting the crouton github page before proceeding here.

This guide will generally focus on using crouton without a desktop environment and with xiwi instead to launch applications right in the Google Chrome windows or tabs. But even if you choose to install a desktop environment, I believe a lot of tips and tricks below will still be useful to you.

To install the Crouton, you need to enter the developer mode on your Chromebook.

If you have successfully launched the terminal with CTRL+ALT+T, we can get started:

1. Install the crouton integration extension into your Google Chrome
2. Download crouton and install it with these extensions:

shell
sudo sh ~/Downloads/crouton -t core,xiwi,keyboard,x11,cli-extra,extension

This is will install crouton with these targets:

• core
• Xiwi: for embedding linux applications inside Chrome tabs and windows
• Keyboard: To be able to use keyboard shortcuts properly in linux applications
• X11: X Window System. Essential to run most programs.
• cli-extra: installs a couple new features to the Command line interface.
• extension: supports to the Crouton browser extension. The extension implements clipboard syncing through WebSockets so you can copy paste from browser to xiwi tabs and windows without issues.

Now you can enter the chroot with:

sudo enter-chroot

Great we are in Ubuntu now.

Git

sudo apt-get install git

Using version control is quite essential as was explained before.

NPM + NodeJS

curl -sL https://deb.nodesource.com/setup_9.x | sudo -E bash -
sudo apt-get install -y nodejs

This will install NodeJS v9. You might want to check if there’s a newer version that is worth installing.

To be able to install packages into global directory, we need to move it under home:

npm config set prefix '~/.npm-packages'
echo 'export PATH="$PATH:$HOME/.npm-packages/bin"' >> ~/.bashrc
//this should work now:
npm install -g bower grunt gulp ember-cli

Sublime Text 3

sudo apt-get install software-properties-common python-software-properties -y
sudo add-apt-repository ppa:webupd8team/sublime-text-3
sudo apt-get update
sudo apt-get install sublime-text-installer

At this point, I recommend installing Nautilus (a file browser) to get full support of the gtk windowing system. Sublime fails to launch without it and on top of it, you get a GUI for file browsing. That may be handy sometimes.

sudo apt-get install nautilus

Now you can launch Sublime with:

xiwi -t subl

Apache + PHP + MySQL

sudo apt-get install apache2 -y
sudo apt-get install mysql-server libapache2-mod-auth-mysql php5-mysql
sudo mysql_install_db
sudo add-apt-repository ppa:ondrej/php5
sudo apt-get -y update
sudo apt-get -y install php5 php5-mhash php5-mcrypt php5-curl php5-cli php5-mysql php5-gd php5-intl php5-xsl

This should give you PHP of version 5.6. Setting virtual hosts may be very tricky, because there is no easy access to ChromeOS hosts file. What I have used to develop php sites is the build-in php webserver:

cd ../your-www-directory/
php -S localhost:8000

Now you can visit the website at http://localhost:8000. Getting MySQL might be a bit tricky. This command should work to start a mysql server:

sudo /usr/sbin/mysqld

If you want MySQL server start automatically, check this wiki entry.

Be prepared and don’t loose any data!

Using Chromebook is all about having your data synced with the server. And ChromeOS kind of counts on that. If you are unlucky and you encounter a fatal system failure, ChromeOS will try to powerwash itself in the next boot. Even though that it’s quite harmless to usual Chromebook users which mostly loose just the content of their ~/Downloads directory, this can be very painful to developers using crouton.

It is therefore a good practiceto use version control for your projects and push changes very often. And whenever you install new software on your chroot, backup the chroot.

sudo edit-chroot -b chrootname

Then just move the tar.gz file into the google drive or a physical storage of your choice.

I also highly recommend using git and push your projects online to Github or BitBucket at the end of every development session!

Improve the CLI experience

Since the CLI is an essential part of web development and especially on ChromeOS, it is a good idea to work on an efficient workflow there.

Terminator

Terminator is especially useful because you can create new terminal tabs within it. That way you don’t have to press CTRL+ALT+T every time you need to launch a new program. It also support color highlights and various plugins which extend its functionality.

sudo apt-get install terminator
sudo xiwi -t terminator

Aliases

Aliases can save you a lot of time and energy, here is a few I use very frequently:

Aliases have to be stored in ~/.bashrc to persist indefinitely.

There is also one handy alias that can allow you to get into chroot a bit faster. It has to be stored in .bashrc outside chroot:

echo 'alias ec="sudo enter-chroot"' >> ~/Downloads/.bashrc

And then leave chroot, and move it to the chronos home .bashrc:

logout
cat ~/Downloads/.bashrc >> ~/.bashrc

Now you can enter chroot with just

shell
ec

Additional useful software

sudo apt-get install unzip
sudo apt-get install ruby
sudo apt-get install gimp
sudo apt-get install inkscape
sudo apt-get install imagemagick
sudo apt-get install filezilla
sudo apt-get install build-essential

What’s next?

Ultimate guide for Web Development on Chromebook — Part 2: ChromeOS tricks and workflows

— — — — —

I am a Freelancer Developer currently looking for work for upcoming months. I specialise in building single page applications with Ember.js and performance optimisations. Feel free to contact me at malindacz@gmail.com or twitter.com/@martinmalinda.cz