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

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.

  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
  • 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.
sudo enter-chroot

Git

sudo apt-get install git

NPM + NodeJS

curl -sL https://deb.nodesource.com/setup_9.x | sudo -E bash -
sudo apt-get install -y nodejs
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
sudo apt-get install nautilus
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
cd ../your-www-directory/
php -S localhost:8000
sudo /usr/sbin/mysqld

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.

sudo edit-chroot -b chrootname

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

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:

echo 'alias ec="sudo enter-chroot"' >> ~/Downloads/.bashrc
logout
cat ~/Downloads/.bashrc >> ~/.bashrc
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?

--

--

Creative through code. Inspired by nature.

Love podcasts or audiobooks? Learn on the go with our new app.

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