Google Coder: a simple way to make web stuff on Raspberry Pi

Apologies for the late post today—I started playing about with Coder this afternoon and kind of got side tracked for four hours because it’s quite wonderful. (By ‘playing’ of course I mean carrying out an Educational Evaluative Assessment.)

Coder 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. Coder was made by a team of Googlers in New York—thanks Coder Team!

So why use Coder and not some other environment? It’s a brilliantly simple out of the box solution, perfect for people aren’t sure where to start or for schools where setting up servers and IDEs can be a nightmare for teacher and technician alike. Beyond this it’s an instant hacking environment and a web development sandbox. As well as letting you make stuff it’s also a great introduction to the concept of web servers and some of the main languages that underpin the web.

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. I could go on but instead I’ll tell you how to get started.

How to get started

Full instructions are on the Coder site but here’s the gist:

  1. Download the image file and flash a 4Gb SD card
  2. Pop it into your Pi and turn it on. You won’t notice too much difference to a standard installation whilst it’s booting (Raspbian lurks beneath) but you’ll end up at the prompt ‘coder login:‘  (You don’t need to login.)
  3. Open a browser on any computer on the same network as the Pi and type ‘http://coder.local‘ into the address bar**

From booting to playing around with web pages took less than two minutes. The hardest bit was coming up with a strong password (what the hell is wrong with ‘pooface1’? My bank is OK with it).

A Machine of Doom? I’ll take three.

So once you’re in, what can you do? Unlike many educational resources, the tutorial 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 tweaking and hacking the code—just click on the </>.  Personally I went for the eyeball and gave it a huge, red sclera because it was looking at me funny. ‘Space Rocks‘ actually has a ‘Hack‘ button that lets you play about with variables, which is always a great way to explore a program (and who can resist giving themselves hundreds of lives? Cheating at its finest.)

Big red & sclerotic — that’s better.

Coder is what all educational resources should be: focused and fun but with loads of potential. It’s a damn fine piece of software. You can also get involved with Coder directly as it’s open source and the Coder Team would love your help.

Download it and have a play—we love it. I’m off to make huge, monkey headed missiles  for my spaceship.

**Note: Windows users will have to install Apple’s Bonjour Print Services first. NOTE: When I tried to install BPS in Windows 8 it fell over, refusing to create the shortcut due to some rubbishly random nonsense about privileges. I fixed this by first manually creating a new folder called “Bonjour Print Services” in C:\ProgramData\Microsoft\Windows\Start Menu\Programs and then installing. Ho hum.

Glossary for beginners

IDE Integrated Development Environment.  Software that brings together a bunch of tools and utilities to assist in software development.

CSS Cascading Style Sheets. A language that is used to tell a web page how it should look.

HTML Hypertext Markup Language. The main language that web pages are written in.

Web server A computer that stores web content (text, images, scripts, video, style sheets etc.) and sends it to other computers when they request it. For example, your browser requested this blog page from the server and then displayed it on the screen.

JavaScript A programming language that can be used in web pages to provide interactivity and functionality, from checking password strength to games.

37 comments

The Raspberry Pi Guy avatar

Awesome! I will be having a look at doing a tutorial for this!

The Raspberry Pi Guy

Kieran avatar

Will it come as something we can load on top of a webserver in Raspbian for example?

David Palmer avatar

I’d like to bump that feature request. I am currently running my Pi as 1) a Tiny-Tiny RSS replacement for Google Reader and 2) A web-based camera server using the camera module under development.

Being able to add it on to an existing system rather than replacing it would be useful. (Although, admittedly, the number of people who are in my situation who want this is much smaller than the number of people who have never set up a webserver and therefore want this.)

AndrewS avatar

It’s all open source, so I don’t see why it couldn’t be done, just need someone to work out some instructions ;-)
Ah, just checked and in fact there’s already a request open for this
https://github.com/googlecreativelab/coder/issues/8

Might be interesting to see if both Google Coder and Adafruit’s WebIDE could be made to work on the same Pi (IIRC they both use node.js).

Neil C Ford avatar

Biggest issue with this currently is that it is single user, so it’s not really a useful tool for education as each pupil in a class would need both a Pi and a regular computer.

Hopefully this will change at some point. Until then it’s a nice proof of concept but not overly useful.

clive avatar

On the contrary — it’s very useful for education. For example, my friend’s son is currently using it to learn HTML and CSS even though he showed no interest in the past using other tools. Education isn’t just for schools and proof of concept this ain’t.

A multi user version would of course be welcome, although this was never the dev team’s intention when they set out. But we are only on v0.4 after all ;)

Stephen avatar

I plugged it into our school network and it picked up an ip address using DHCP.

I then checked what the address was, using ifconfig.

I’ve already had a couple of students at a time access the development environment directly at the same time using the ip address.

They just enter the password when prompted and create a new App for themselves, or work on an App with their partner.

So far it has worked really well. My next step is to have about 5 configured and set up for our class, that way students will share 1 between 4 when learning web development.

Definitely applicable to the classroom in my opinion.

clive avatar

Hi Stephen — this sounds great, I’d be really interested to see how you get on so please do drop me a line, or post in the forums, to let us know.

Stephen avatar

Hi Chris

Had 16 students working on two Raspberry Pi / Google Coder webservers today.

I just connect the Pi’s to our school network via either DHCP or assigning a static ip.

Once I know the ip’s (ifconfig), the kids use these to navigate to one of the Pi’s from Chrome on our Windows computers. All they had to do was enter the set password and away they go.

They know enough about programing (via Python) to get straight into the HTML and CSS.

All kids created their own App. Some worked on Apps from scratch using our HTML & CSS basics tutorials, others copied the contents from Eyeball or Space Rocks, then played around to understand the relationships which existed between the HTML, CSS and JS. I did not mind which method they chose as their learning path. They could not just play however.

One boy is now working on having two Eyeballs on his App. Was quite a neat idea. Lots of boys made changes to Space Rocks. Different ships, different shapes, colors, bullet sizes and rate, invincibility etc etc.

When creating our own Apps from scratch, the trick was to ensure that you keep the bit in the tags to reference the CSS and JS pages within the App. Otherwise any CSS does not work.

It is definitely a concept that works and far more engaging that a HTML page written in Notepad (like we used to do). A great way for many kids to work together on a web server, even on the same App. It was so easy to explain the concept of a web server to them given that we were looking at two of them in our classroom (i.e. the Raspberry Pi’s).

Thanks to Google for providing the tools to create a creative environment for all levels of students in my class to get into web programming. I am looking forward to our next lesson.

Stephen

Arjen Wols avatar

some small notes:
– a bit difficult when running ssh due to resolving host name problems.
– will only run with Chrome.
– even Chromium on RPi (localhost) won’t work (yet???)

clive avatar

– will only run with Chrome.

This is not the case. I have tested it with both IE 10 and Firefox 23. Both work perfectly.

ramstrong avatar

Since I have multiple Raspberry Pi, can I use one for coder and the other for browsing?

konrad roeder avatar

Sure. The Coder Pi is running a service which runs the web server. You can see this on the coder Pi by running the command ps -aux | grep coder which looks through all of the services and shows the ones that contain the string coder.

The “regular” Pi is not running this service.

AndrewS avatar

even Chromium on RPi (localhost) won’t work (yet???)

Hmm, that seems a bit short-sighted given that Eben’s said several times that the RaspberryPi was designed to be usable “standalone” (unlike Arduino) and not be reliant on other computers.

AndrewS avatar

Turns out this has already been asked for ;)
https://github.com/googlecreativelab/coder/issues/3

Ian Barton avatar

I got it to work on my Linux PC using this post:
http://chrismcleod.me/2013/09/13/run-coder-for-raspberry-pi-on-your-linux-pc/

The same procedure should work on your Pi.

Greg Havenga avatar

You don’t need bonjour – it just is a way to resolve http://coder.local. If you have netscan or some other scanner for your network, you can discover the IP address of the pi. If you hook up a monitor, the IP address is displayed when it boots. In either case, from Windows 8 – or anything that can run Chrome, you can simply go to that IP address (http://192.168.1.28 on my network). I even used my Nexus 7 tablet!

clive avatar

Thanks Greg, you’re right of course. We are just going with the flow based on the official instructions that are aimed at beginners (although if you are hooked up to a monitor I personally find the IP address two lines before the login much easier than downloading petulant software ;))

Rich Shumaker avatar

This is a general question not specific to this post but does include this post as it has an Embedded YouTube.
Any chance the foundation could create a YouTube playlist for all the stuff that gets posted?
The embedded YouTube videos don’t play for me so I have to play them in YouTube but I have to find them first.

Thanks for all the computing awesomeness.

3xBackup's avatar

right click on the video and click on “Copy video URL”, press Control-T (to open a new tab) and paste it in works for me.

RobV avatar

This is your bank speaking.
Naughty Naughty. You know why.

Bill Oldroyd avatar

Please could you say which forum should be used to discuss Coder as there is a danger discussions could be placed in many forums.

Could there be a forum in Programming for Web development – HTML, CSS, Javascript ?.

Gadgetoid avatar

I used the GitHub repo and got Coder running on my Mac in a couple of minutes and my Pi in a few more.

Here’s the guide: http://pi.gadgetoid.com/article/running-google-coder-on-your-existing-raspberry-pi-or-desktop-pc

Richard Jones avatar

Love this. Just suck it in, and embrace. Off to buy a 4gb sd tomorrow. Our boys just going to love it.

Keshav@Salentro.in avatar

It really looks interesting. I can’t wait to try it on for some of our new projects.

InverseSandwich avatar

This should be included in NOOBS!

Todd Cudaback avatar

I second that motion

Andy avatar

If I write a program using separate html, CSS and JS sections in Coder, how can I translate that into a format that I can upload to my hosted website so it can be run from there anywhere in the world? Is it as simple as putting the code from all three sections into one file?

Anyone have a suggestion?

americanpi avatar

The FAQ has the answer on this. You can export your projects as a zip file, and up load them elsewhere.

WesDu avatar

I’m new to RIP and new to LINUX…
…and my experience is like this:
Started Google Coder, got to this blue screen, but before I did network setup I exited, and got to command line. Now every time I reboot I getting command line, and have no idea how to setup my network to be able to see CODER from my other computer. Can anybody help. Thanks

Dave Auld avatar

Here is my article written about Coder on the Raspi.

Article

Enjoy!

Scott avatar

Word is spreading… My 15 year old just started a Raspberry PI club at his La Costa Canyon High School here in Carlsbad Calif. Don’t know what they are doing yet but sure is a great start. 8 members wanting to learn and explore. Anyone out there willing to donate a few Raspberry Pi boards for the group?

vini avatar

how can i connect raspberry-pi to a webserver to upload my image that was captured by a camera. if you can please share the code of that?

Groc avatar

Can coder run chrome extensions?

Merlin Spiers avatar

add to noobs.. im losing squeeze and risc os for this

Ash avatar

So its made to handle client side script like JS very well. But can I use PHP using this coder and the SD card on Raspberry Pi ?

Dominique Cave avatar

Wow, this is awsome! Going to offer an html after school club next term and this is definitely a good contender for making it happen. Can’t wait to try it out on the school network tomorrow. Excellent product, thanks.

Comments are closed