Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Boilerplate setup for App Engine with html5-boilerplate 2.0, OpenID, memcache, user preferences, and more
branch: master

This branch is 3 commits behind metachris:master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
app
.gitignore
README.md
upload_to_appengine.sh

README.md

App Engine Boilerplate is a versatile yet minimalistic setup for new App Engine projects.

  • html5-boilerplate 2.0 (including it's automated build toolchain for minification and concatenation of js+css)
  • Beautiful OpenID login with openid-selector
  • Flexible user-preferences model with auto-caching (plus Gravatar link)
  • BaseRequestHandler for simplified rendering and access to UserPrefs
  • @login_required decorator
  • Memcaching setup for requests and responses
  • Templates and template addons
  • Tools such as is_testenv() and slugify(url)
  • Automatically subscribe users to your MailChimp newsletter
  • app.yaml configuration for admin areas, static files
  • Released under the BSD license

This project does not contain a lot of code. To get the best understanding of it's features we recommend to simply browse through the files! You can see a rather minimalistic live version here.

OpenID Authentication

User authentication with OpenID works out of the box, including a nice user interface via the openid-selector jQuery plugin (also used by stackoverflow). Be sure to enable OpenID authentication in your app settings on app engine.

Alt text

More infos about appengine and openid:

Memcaching

Returning cached data usually improves the performance of a website. App Engine provides a custom version of memcache to store various data types, which can be used to efficiently cache the results of datastore queries, or commonly used elements on the homepage.

app/mc/cache.py contains an exemplary method of querying data from memcache with a datastore fallback if not yet cached. Simply adapt as you need it!

HTML5-Boilerplate

html5 boilerplate is a great base setup for building the website frontend, and furthermore includes a build script which minifies and compresses html, css, javascript and images.

html5-boilerplate is located in /static_dev, and it's build script outputs an optimized release version to /static_dev/publish.The only modification to the standard html5-boilerplate is adding a few blocks to /static_dev/index.html: {% block header|main|scripts|footer %}

During development the symlink /static points to /static_dev. On publishing the project upload_to_appengine.sh invokes the html5-boilerplate build script and changes the symlink /static to /static_dev/publish, in order to upload the optimized version.

upload_to_appengine.sh

upload_to_appengine.sh is a tiny shell script which simplifies invoking the html5-boilerplate build tools before testing and uploading your app to app engine. To use it you need to set CMD_APPCFG to your local dev_appserver.py.

Exact steps of ./upload_to_appengine.sh:

  • Asks if it should run the build process with ant minify
  • Changes the /static symlink to the production version
  • Waits for you to test and confirm
  • Uploads the app to appengine
  • Reverts /static to the development environment

These would be the manual steps:

# go into html5-boilerplate's build directory    
$ cd static_dev/build 

# run ant, which compiles an optimized version into static_dev/publish
$ ant minify

# go back into the main directory
$ cd ../../

# change reference of /static symlink to optimized version
$ rm static
$ ln -s static_dev/publish static

# Test the optimized version
# Publish to web with appcfg.py

# After publishing you can change back to static_dev
$ rm static
$ ln -s static_dev static

Adding CSS Files

CSS files are no longer imported from index.html but exclusively through using @import in style.css.

html5 boilerplate automatically includes, minifies and concatenates css files which are imported via an @import statement from within style.css. Add references to your custom stylesheets from there, never from within index.html.

Enjoy

Feedback, improvements and critique are greatly appreciated. You can reach the author via @metachris. Fork away!

Ideas

Some ideas for future improvements:

  • Update openid-selector
  • OAuth login: Twitter, Facebook, LinkedIn, Dropbox, etc.
  • About page with feedback form
  • Feedback dialog
  • akismet, twitter, bit.ly modules?
Something went wrong with that request. Please try again.