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.
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:
- Install the crouton integration extension into your Google Chrome
- Download crouton and install it with these extensions:
sudo sh ~/Downloads/crouton -t core,xiwi,keyboard,x11,cli-extra,extension
This is will install crouton with these targets:
- 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:
Great we are in Ubuntu now.
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 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:
php -S localhost:8000
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 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 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:
cat ~/Downloads/.bashrc >> ~/.bashrc
Now you can enter chroot with just
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
Ultimate guide for Web Development on Chromebook — Part 2: ChromeOS tricks and workflows
In the previous article I recommended using Crouton with no desktop environment and with xiwi instead. The best thing…
— — — — —
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 email@example.com or firstname.lastname@example.org