Deploying Web Pages on App Engine (Programming in Python)

Deploying Web Pages on App Engine

Google's App Engine is a cloud computing platform that allows you to deploy web sites on Google's servers. These notes provide the why and the how.

Google Sites allows you to create a web site and store it on Google's servers. But sites created with Sites are limited:

You are limited to a particular look and feel within Sites-- you can't build arbitrary web pages.
You can only build primarily static pages. You can import widgets, but in general you can't creates pages that gather information from the user or show dynamic data. For instance, you can't build Twitter with Sites.

Google's App Engine allows you to create and deploy any type of web page. You can use any HTML editor or write HTML directly, then upload to App Engine. You can also build dynamic web sites using HTML and either the Python or Java language. So App Engine is providing both space for the files, and computing power to run the "server" code.

App Engine is more difficult to use than sites, but it is more powerful in what you can build.

Another system similar to App Engine is Amazon's Elastic Computing Cloud (ECC).

These cloud computing sites provide everyone, even those without access to some company server, to put stuff on the web.

Your Turn

For this exercise, you'll deploy a sample web site on Google's App Engine. The site is a static one, but it has a menu, some CSS styling, and some javascript to make the menus drop down. You can use this sample to build other sites, and part of your task will be to modify the code given here.

1. Create a folder named samplesite within your home directory Within that folder, create the subfolders pages, images, css, and js. You're going to download some files and you'll need to put each file either the samplesite folder, or one of the subfolders, depending on the type of file it is.

2. Save the attachments at the bottom of this page (http://sites.google.com/site/usfcomputerscience/deploying-web-pages-on-app-engine). The easiest way is to right-click on them and choose 'Save Link As'. Be sure and name them exactly as they are named in the attachment, and to choose the proper subfolders as specified below:

Save app.yaml and app_controller.py in the main samplesite folder.
Save the two html files in the pages subfolder.
Save the css files in the css subfolder.
Save the .png and .gif files in the images subfolder.
Save the .js file in the js folder.

3. Open a terminal. We'll use the Linux command-line terminal to start up a test server. To open a command-line terminal, choose Applications | System | Terminal from the top menu. A black window should appear.

4. Start the local test server by entering the following in the terminal window:

dev_appserver samplesite

5. Test your application in the browser. The command above starts a development app server. This server is running on your local machine, but it acts as if it is a server somewhere on the Internet. You can test your program by opening a browser and entering the following URL in the address bar:

http://localhost:8080/simplesample.html

This will 'run' the program you just created by accessing the server you just started.

6. Deploy your application to Google. If you've made it this far, your web app works, but its really not on the web yet-- your browser is just accessing a 'test' server on your local machine. Now we'll upload your application to the web, and specifically Google's App Engine servers:

The first step is to register or sign-in with Google's App Engine service. Go to http://appengine.google.com/start If you are registering, you'll have to step through the registration process, including giving Google your cell phone #.
Once you are signed in, click 'Create Application' and set the application identifier to something like 'Davessample', with your name instead of Dave. The name can be anything, but it has to be unique in the Google system.
You need to put the name of your application, which you just set at Google, into the configuration file of your application, app.yaml (the one you downloaded from the attachments on this page). With your text editor, open the file app.yaml. The first line of text in that file is the application name, and says 'application: staticsample'. Change 'staticsample' to the application identifier you just registered and save the file.

You're now ready to upload your program to Google. Back at the terminal window, do the following:

hit control-c to stop the dev server.
at the linux prompt, enter: appcfg update samplesite
You have just uploaded your program as a real web app on Google's servers.

7. Test your deployed application. Go to a browser and enter the name of your application, followed by 'appspot.com/simplesample.html'. For instance, if your application identifier was 'DavesSample', then enter 'DavesSample.appspot.com/simplesample.html' in your browser.

If all is well, you should see a web page that looks the same as when you ran your program with the development server. Only this time, your application is really running on the web.

8. Modify Your Sample Application

Your task for this second part is to personalize the sample site. You can create any type of site you want, but be sure and make the changes specified below. One possibility is to make a site introducing major project and linking to pertinent pages about it.

a. Change the main menu to different menu headings and menu items of your choice. The menu appears in the HTML files within the pages subfolder. Open the simplesample.html file and search for links (<a href=...). You'll want to change these links. For instance, you could change the USF menu item to a link to Amazon by changing this code:

<a href="http://usfca.edu">USF</a>

to:

<a href="http://amazon.com">Amazon</a>

b. Add some real content, including text and images, to the body of the HTML pages. To do this, find the start of the body (<body>) and change the code between that and the end of the body (</body>

c. Change the logo for the site. You can do this by creating a logo and saving it as logo.png in the images subfolder to overwrite the existing file. You can create a logo with GIMP on Linux, Fireworks on Windows, or any other drawing program.

Attachments (9)

anotherpage.html - on Nov 17, 2009 9:05 AM by David Wolber (version 1)
2k Download
app.yaml - on Nov 17, 2009 9:03 AM by David Wolber (version 4 / earlier versions)
1k Download
app_controller.py - on Nov 17, 2009 9:03 AM by David Wolber (version 3 / earlier versions)
1k Download
bluetab.gif - on Nov 17, 2009 9:04 AM by David Wolber (version 1)
1k View Download
bluetabactive.gif - on Nov 17, 2009 9:04 AM by David Wolber (version 1)
1k View Download
bluetabs.css - on Nov 17, 2009 9:04 AM by David Wolber (version 1)
2k Download
dropdowntabs.js - on Nov 17, 2009 9:05 AM by David Wolber (version 1)
7k Download
logo.png - on Nov 17, 2009 9:04 AM by David Wolber (version 1)
81k View Download
simplesample.html - on Nov 17, 2009 9:05 AM by David Wolber (version 1)
2k Download