How to install Google Coder on your Raspberry Pi

Google Coder is a free, open source project that turns your Raspberry Pi into a mini web server that allows you to create web content using HTML, CSS and JavaScript via a browser-based IDE. Or rather, it allows you to easily make cool web stuff. 

The interface is clean and simple and you can see the code side by side with the result and change it in real time. The section tabs physically and conceptually separate the HTML from the styles from the script, which is just how it should be.

Step 1 – Download Google coder file

Download the file from http://googlecreativelab.github.io/coder/ . 

It's about 1 GB so this may take a while.

Step 2 – Unzip the downloaded file

Once you've unzipped the file you'll need find the location of the image file raspi.img. Open the unzipped folder coder_v0.4, although this number may change with time as the version is updated.  Inside here will be another folder called coder_v0.4 and within that you should find the SD card image file raspi.img. 

Step 3 -  Flash an SD card

Next flash the above image file raspi.img to an SD card (4GB or greater). Instructions on how to flash an SD card can be found here

Step 4 – Boot your raspberry pi

Insert the flashed SD card into your raspberry Pi and boot. On the first boot you'll be presented with the configuration menu.

Expand the root file system by selecting the first option 'Expand Filesystem'. This should take e few seconds to complete 

Once that's done reboot, your Raspberry Pi. Since we access Google Coder from another computer you don't need to connect your Pi to a TV or monitor and you can unplug the mouse and keyboard. To access Google coder from another computer your Pi will need to be connected to a local network via a LAN cable or wireless adapter.

Step 5 – Install Bonjour to your windows PC

In order for Google coder to work on your windows PC you'll need to install Apple’s Bonjour print services, which can be found here, http://support.apple.com/kb/DL999

Download and install Bonjour print services, now you should be ready to start using Google Coder.

Step 6 – Using Google Coder

Ensure your Raspberry Pi is up and running and make sure it's connected to your local network. From your PC (connected to the same network) open a web browser (e.g. Google chrome or internet explorer) and type http://coder.local into the address bar.

The first time you will be asked to choose a password. Choose a password and then login. Once logged in you'll see this:

What does it do?

Google coder is a browser-based web app development environment which has tabs for HTML, CSS, Javascript, and Node.js. Unlike many educational resources, the tutorial 'Hello Coder' is actually a good place to start. Comments at the top of each page explain what’s going on and it’s easy to start altering and 'hacking' the code, just click on the > symbol in the top right of the page. ‘Space Rocks‘ actually has a ‘Hack‘ button that lets you play about with variables, which is always a great way to explore a program.

So go download Google Coder and have some fun!

Shutting down cleanly

If you're running your Raspberry Pi 'headless' without a keyboard or monitor then the easiest way to shut down cleanly is to remotely accessing it via SSH. Details on how to remotely access your Raspberry Pi can be found here. Login using the pi using user name and password you chose for Google Coder then shut down cleanly by typing the following command:

sudo shutdown -h now