< Return to Blog

Rapid Learning: Google App Engine (GAE) Cloud Apps (in Python)

By Michael de Silva
Google App Engine, Google Cloud Apps, Python, Polymer

I like to look at new technologies (at least new to me, in the sense that I haven't tinkered with something directly or long enough — and long enough usually equates to at least one to two years) and YouTube is a fantastic resource, especially channels such as the excellent Google Chrome Developers.

This is a very short series where Paul Lewis provides a walk through on how he goes about to build the Chrome Dev Summit site — what's great is this is full of great advances such as Service Workers a la Polymer and so many other fun stuff.

What's interesting though, is there are some valuable frontend juju that Paul uses, that I haven't seen (or thought of!) before, especially some fantastic use of SVG and clip-path.

For the purposes of this blog post, and for my initial poking about, and given that I haven't had time to progress beyond his Day 6 video, he touches on SVG clip-path in the Developer Diary #Day 4 clip and gets interesting past past the 3:30 minute mark.

To this end, I decided to fork the repo on Github — and switch over to the commit where he'd completed adding in the masthead with SVG clip-path clipping.

commit ce3e0a4066b13ee6f7aaa0c698510902efcfde72
Author: Paul Lewis <github@aerotwist.com>
Date:   Thu Sep 22 15:58:26 2016 +0100

    Adds masthead with clipping

# (in master)
git checkout ce3e0a40
git checkout -b ui/masthead-with-clipping

This left me with a new tab in Google, pondering on how to get a basic dev setup going and thankfully, Paul had left some pointers in the README of the git repo.

The site is based on Google AppEngine, so you'll need the SDK and launcher (https://cloud.google.com/appengine/downloads).

Once you have that, you'll need to:

  1. Clone the project
  2. Go to the folder and run npm install followed by npm run build
  3. Launch the GAE launcher (launch a launcher is quite meta)
  4. File -> Add an existing project
  5. Point it to the cloned folder
  6. Start it and go to http://localhost:8080

The last couple points about GAE launcher left me somewhat puzzled, but I forged ahead and went over to download the Google AppEngine SDK first.

I could have gone with Java, or Go, but I know how much Google love Python, and I love Python too - so Python it was.

In MacOS, the steps were rather straight forward

# Check that Python 2.7 is installed
python -V

Following rest of the instructions, it boiled down to

  • Downloading the x86_64 binary, in my case google-cloud-sdk-132.0.0-darwin-x86_64.tar.gz (at the time of writing).
  • Extracting said gzip tar-ball.
  • Running ./google-cloud-sdk/install.sh
  • At the prompt I accepted for changes to be made to my PATH and the script intelligently updated by ~/.zshrc file, but I'm sure it would do the same even if you're on good 'ol bash.

With the install of the SDK done, I moved back into the root of the forked git repo and continued in the branch I had made, ui/masthead-with-clipping

$ npm install
$ npm run build
$ dev_appserver.py .

I was able to connect to the local dev server at port 8000 to look at some GAE internals (nice!) and http://localhost:8080/devsummit to be greeted with a simpler version of

Well, there you have it — quick distillation on how to get started with Google AppEngine apps in Python.