Wednesday, January 21, 2009

How-to: Setting up Google App Engine for Simple Sites

I wanted to find a simple way to publish a custom website or two for low cost, and settled on Google App Engine as the best current solution. This post focuses on getting an Eclipse environment up and running to debug and publish your Python and other code to Google App Engine.

I initially planned to do the site in Flex, but changed my mind after looking at SEO problems with Flash applications. It does look like there are solutions for getting search engines to index Flash content, but I haven't put in the effort to really explore them yet. My sites are (for the moment) done in plain old HTML with CSS. The only twist is that the Python code strings together several fragments of HTML code to build each page. (I'll talk about that in a later post.)


The Basics
I won't repeat what Nick Berardi already said in his great how-to post. Please check that out for step-by-step instructions on getting your own domain, creating an app engine application, and uploading your content with one command. (You can do this without a domain, but since it's a whopping $10/year there is little reason not to).

Once you have followed these instructions & have an engine application connected to your domain, there are still a couple of steps you need to follow so you can debug the Python portion of the code.

The following is adapted from Google's tutorial here:
  1. Install Python 2.6 if you have not already done so. (There is a newer version, but this is what I used.)

  2. Install pydev eclipse extension for Eclipse through the Eclipse update manager (Help | Software Updates in Eclipse) using this url: http://pydev.sourceforge.net/updates/

  3. Tell PyDev where to find the interpreter (create a pydev project and Eclipse will prompt you to do this). I just browsed to the default install location of "Program Files/Python26/python.exe".

  4. Install the google app engine SDK if you have not already done so.

  5. Create the "helloworld.py" and "app.yaml" files as described in Google's Tutorial.

  6. Test the dev server. I kicked off my mini program with this command-line:
    • "\Program Files\Google\google_appengine\dev_appserver.py"
      "/Users/Erik/projects/PythonTestBed/src"
    • This runs the dev app server and kicks off the app.yaml script in
      my PythonTestBed/src directory.

  7. Fire up a browser with http://localhost:8080. It should show "hello world".

Debugging GAE Python in Eclipse
You can run Python programs in two ways (I tried both & they worked):
  • By selecting "Python run" in Eclipse.
  • By going to the http://localhost:8080 page as above & refreshing it.

I like to view the Python output inside of Eclipse, so I needed to tell PyDev where the api libraries are under Window | Preferences:



The bottom five folders were added with the "New Folder" button. I probably don't need anything other than the appengine, webob and yaml folders for what I'm doing, but I added the others anyway.

I ran into a hitch in calling urlfetch (I needed to parse an RSS stream and feed it into my site as well-behaved HTML. I'll talk about this in a separate post). Because Google uses a proxy to do the actual fetch, it wouldn't run from my local machine until I imported some stubs:

…and then set the stubs up before calling urlfetch in my code…

This will get you up and running. Getting the Python, html, css and javascript pieces uploading and working together will be the subject of a future post.

Thursday, January 8, 2009

Stupid Firefox Tricks

I encountered what I think is a bug in the way Firefox handles Javascript. The fix to the problem was simply not to use any Javascript in the body of the page, and I'd be interested to see if anyone else has encountered this.

The Problem
I found what appears to be a thoroughly annoying bug on Firefox, and I'm wondering if anyone else has seen something similar. I suspect that it may have something to do with my configuration, otherwise I should have seen some other mention of it.

I was trying to embed a Feedburner blog summary in a new website, and this worked fine in IE. If you've never tried it, it involves sticking a chunk of Javascript in the middle of your page. Here is a sample (replace all instances of "[...]" with "<...>"):


[html][body]
...my other html...
[script src="http://feeds.feedburner.com/IndependentInDetroit?format=sigpro"]
...
[/body][/html]

The script tag returns:


document.write('[div class="feedburnerFeedBlock" id="IndependentInDetroit2842309"]');
document.write('[p class="feedTitle"]
[a href="http://independentindetroit.blogspot.com/"]Independent in Detroit[/a][/p]');
...(a dozen more lines of javascript-generated html)...
document.write('[/div]');

On the left is the IE screenshot. Notice that the site banner is at the top of the page, as expected. On the right is the Firefox screenshot, where you can see that the banner is not visible. It also says "Loading" which continues indefinitely or until you click the stop button.




Viewing the source shows something bizarre - the page contains only the expanded javascript. All of the other HTML (head, body, etc.) has been stripped off. It appears that Firefox interprets "script tag inside the body" to mean "redirect to a blank page containing only the javascript". Very odd.

The Solution
My fix was to do a urlfetch from Python (this site is hosted on the Google App Engine), then strip off the "document.write(' " and " ');" portions of each line, then stuff the HTML directly into the page. Here is a snippet of the (very simple) code. The second-last line is there because one of the steps (probably "theResult.content", which converts the result object to a String) escaped the single quotes in the string, so they came out looking like " \' ".

...
# Get the feedburner summary, strip out the javascript, then write it.
result =
urlfetch.fetch("http://feeds.feedburner.com/IndependentInDetroit?format=sigpro")
respOut.write(stripJavaScript(result))
...
def stripJavaScript(theResult):
outString = theResult.content.replace("document.write('", "")
outString = outString.replace("');", "")
outString = outString.replace("\\'", "'")
return outString

It worked well, but isn't a very satisfying solution. Has anyone else encountered this? Did I miss something obvious?