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

Martin Malinda
Sep 9, 2015 · 6 min read

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:

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:

Great we are in Ubuntu now.

Git

Using version control is quite essential as was explained before.

NPM + 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:

Sublime Text 3

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.

Now you can launch Sublime with:

Apache + PHP + MySQL

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:

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:

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.

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.

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:

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

Now you can enter chroot with just

Additional useful software

What’s next?

— — — — —

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

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store