Thursday, December 13, 2012

Building a Website with Google App Engine


A few weeks ago I was asked to build a website for my sister-n-law's new photography business.  Of course, I jumped at the idea!  I chose Google App Engine to host my site.  The pricing was just right - FREE!  Well mostly.  If your usage of their services stay under some thresholds then you're okay.  Since most of the pages will be static content this falls well within their free limits.

Google App Engine supports server-side coding in either Python or Java.  Initially I was going to do the backend in Java, but after taking a closer look at Python I changed my mind.  The coding in Python was so much simpler.

To get started, download the Google App Engine SDK for Python 2.7 at https://developers.google.com/appengine/downloads.  After finishing the installation, start the Google App Engine Launcher.  Select File and click on Create New Application.  You'll be prompted to enter an application ID.  By simply signing up to Google App Engine you'll get a free account to play with with a free whatever.appspot.com domain.


This creates a basic "hello world" website in Python.  Go ahead and select the site in the list and click Run.  Once the web server starts you can navigate your browser to http://localhost:8080 to view the page.

At this point I already had a good start to my website by creating the basic html files, CSS, and JavaScript.  I just need to bring those into my project.  My site has simply 3 static html pages:  home.html, pricing.html, and contact.html.  My other static content can be found in the css, images, js, and templates folders.

For the web server to serve the content of those folders, static content handlers must be added to the app.yaml file.  This makes it easier for entire directories to be served from the application root directory.

A static handler looks like this:

- url: /css
  static_dir: css

Next you'll need to configure the WSGI application to receive requests and dispatch the appropriate handler and return the result to the client.  Here's how I've setup my handlers.  I plan on using Django Templates later for my header and footers which is why you see the empty template_values variable being unused.

#!/usr/bin/env python
import webapp2
import os
import logging

from google.appengine.ext.webapp import template

class MainHandler(webapp2.RequestHandler):
    def get(self):
        directory = os.path.dirname(__file__)
        path = os.path.join(directory, 'home.html')
        template_values = ''
        self.response.out.write(template.render(path, template_values))

class PricingHandler(webapp2.RequestHandler):
    def get(self):
        directory = os.path.dirname(__file__)
        path = os.path.join(directory, 'pricing.html')
        template_values = ''
        self.response.out.write(template.render(path, template_values))  
  
class ContactHandler(webapp2.RequestHandler):
    def get(self):
        directory = os.path.dirname(__file__)
        path = os.path.join(directory, 'contact.html')
        template_values = ''
        self.response.out.write(template.render(path, template_values))

app = webapp2.WSGIApplication([
    ('/', MainHandler),
    ('/pricing', PricingHandler),
    ('/contact', ContactHandler),
    LogSenderHandler.mapping()
], debug=True)

Once you've perfected your site and have tested it (on several browsers) and you feel you're ready to deploy - well that's easy!  You can do that from the Google App Engine Launcher too.  Click on the Deploy button and supply your email and password to the Google account used for hosting your site.

After a few moments your site will be deployed to your whatever.appspot.com domain.  And you're done!

Here's my final product - http://www.koryleephotography.com/.

No comments:

Post a Comment