Google App Engine – Building a Microsite

Having the ability to quickly deploy a live microsite is becoming easier and easier.  Microsites can be great choices for supporting strategic launches, special events and limited Enterprise initiatives. Microsites allow easy inclusion into existing sites as a portal element or as a jump site. Since the lifecycle of a microsite tends to change frequently, developers need a way to ensure quick and perhaps timed deployments. In this blog post, I’ll cover how to quickly and concisely package and deploy the GAE (Google App Engine) application to create a microsite.

So, why would you want to develop on GAE? For most people the answer is likely to be that GAE provides a great platform for growth. If you plan to expand or add functionality over time and need something that can easily leverage the toolset available within Google, then GAE is a good option to consider.

The GAE provides a framework for Java, Python and Google’s Go experimental language. For this blog entry, I will be using the Java framework. Yes, even though I may not be utilizing any Java code in favor of only HTML/CSS/Javascript, the framework provides all Java GAE components service aspects as well as providing a consistent deployment framework using Maven. And if I wish to further evolve the site, I can easily use additional frameworks on top of the Java platform.

This is just one way to skin the cat.  There is a great blog post on using GAE as your CDN via Python.

Environment Setup

There are a couple of dependencies that you will need to get your environment going:

  • Java SE 1.6+ SDK
  • Maven 2.2.1 or 3.x+
  • Google Gmail Account

Once you have acquired the above dependencies you should be ready to prepare a stubbed-out site project. Maven will pull the remaining dependencies from here on out.

Using the Mavin GAE plugin, there are a variety of Boilerplate/Archetypes available to define what type of structure will be generated.

Here is a list of those available:

  • Plain JSP based example -DarchetypeArtifactId=gae-archetype-jsp
  • Wicket based example -DarchetypeArtifactId=gae-archetype-wicket
  • GWT based example -DarchetypeArtifactId=gae-archetype-gwt
  • JSF based example -DarchetypeArtifactId=gae-archetype-jsf

Also, you can use JAppStart or Spring Roo as tools to generate various project frameworks for the Google App Engine environment within the Java platform umbrella. But for our example we will generate a plain JSP project and then modify the structure for an even simpler structure for our HTML-only environment.

From your command line run the following command →

$ mvn archetype:generate -DarchetypeGroupId=net.kindleit \

-DarchetypeArtifactId=gae-archetype-jsp \

-DarchetypeVersion=0.9.2 \

-DgroupId=com.mydomain.mysite -DartifactId=test-tmatrix-app001

run output →

You will be prompted for several items. Selecting the defaults should be fine, except for the GAE version. This should be set to the latest and greatest of the GAE SDK. Currently, it is 1.6.2.1

Finalize Environment Setup – Directory Structure

Now you have a stubbed-out file system hierarchy for your project as well as a new Maven POM for the project with the necessary dependencies specified.

Depicted below is the file system after the initial Maven generate command. Now you need to prune and create some directories. First change to the directory of the application that you just created: cd test-tmatrix-app001. You should see a structure like this:

All of the items marked in red have been removed as this microsite does not using any data or message services.

Your directory structure should now resemble the following:

Now you need to create the following directories for serving the static HTML/CSS and Javascript:

webapp/public

webapp/public/css

webapp/public/fonts

webapp/public/images

webapp/public/js

Create your index.html under webapp/public/ and place your necessary HTML/CSS/Javascript and images in the appropriate directories you have just created. Also, create a new app.yaml file, which will contain a very simple GAE configuration. Your directory structure should now resemble the following:

Sample app.yaml file for Google App Engine

Edit the webapp/WEB-INF/app.yaml to contain the following:

Sample Google App Engine webapp/WEB-INF/app.yaml

You also need to edit the web.xml source file to remove the generated servlet, which is not necessary.  The web.xml should resemble the following:

Sample Google App Engine web.xml

Click image to enlarge

The Maven WAR Packaging plugin requires a web.xml. This one is actually overridden by using the app.yaml configuration file, which when recognized by the GAE plugin will generate the web.xml and the necessary appengine-web.xml.

Finalize Environment Setup – Maven pom.xml

Ok, you’re almost there. Now you need to modify the pom.xml so you can remove some dependencies that are not needed—such as data persistence and other frameworks, which are not being using at the moment. Please see the following edits to remove the JDO and other unnecessary dependencies:

Sample Maven pom.xml

Click image to enlarge

Sample Maven pom.xml

Click image to enlarge

Sample Maven pom.xml

Click image to enlarge

Obtaining GAE SDK

Now you can download the GAE SDK into this environment. From the command line within the application, run –> test-tmatrix-app001 jeffschenk$mvn gae:unpack

After a series of downloads you should see the following messages indicating that the GAE SDK has been successfully downloaded and extracted into your local Maven repository.

[INFO] Extracting GAE SDK file: /Users/jeffschenk/.m2/repository/com/google/appengine/appengine-java-sdk/1.6.2.1/appengine-java-sdk-1.6.2.1.zip

[INFO] To path:/Users/jeffschenk/.m2/repository/com/google/appengine/appengine-java-sdk/1.6.2.1

[INFO] ————————————————————————

[INFO] BUILD SUCCESSFUL

Now you need to obtain access to GAE from Google before you can deploy the site.

Obtaining GAE Access

Go to URL: http://code.google.com/appengine/ to obtain access to the Google App Engine.

Step 1

Sign up for a Google App Engine account. Here is where your Gmail account will be necessary.

Google App Engine sign up - step one

Click image to enlarge

Step 2

Once you have verified access to the Google App Engine, go to URL: https://appengine.google.com/ to access your App Engine Dashboard. If you have multiple Google accounts, simply select the Google account for which you want to create a new application.

Google App Engine sign up - step two

Click image to enlarge

Step 3

You will see a list of existing applications. Select the “Create Application” button to begin creating a new application.

Google App Engine sign up - step three

Click image to enlarge

Step 4

Enter the appropriate unique application identifier. For this example it is test-tmatrix-app01.

Google App Engine sign up - step four

Click image to enlarge

Step 5

Create application.

Google App Engine sign up - step five

Click image to enlarge

Step 6

Confirmation of application registered successfully.

Google App Engine sign up - step six

Click image to enlarge

Step 7

Using the application Dashboard.

Google App Engine sign up - step seven

Click image to enlarge

Now you have your GAE instance bucket for your application defined and are ready to deploy an application version to the instance.

Deploy to GAE

Assuming that you have placed your HTML/CSS/Javascript in the appropriate directory structure, you can now deploy your initial version to GAE. From the command line simply enter the following:

$ mvn gae:deploy

[INFO] Scanning for projects…

[INFO] ————————————————————————

[INFO] Building test-tmatrix-app001

[INFO]    task-segment: [gae:deploy]

[INFO] ————————————————————————

[INFO] Preparing gae:deploy

[INFO] [resources:resources {execution: default-resources}]

[INFO] Using ‘UTF-8′ encoding to copy filtered resources.

[INFO] Copying 2 resources

[INFO] [compiler:compile {execution: default-compile}]

[INFO] Nothing to compile – all classes are up to date

[INFO] [resources:testResources {execution: default-testResources}]

[INFO] Using ‘UTF-8′ encoding to copy filtered resources.

[INFO] skip non existing resourceDirectory /Users/jeffschenk/jas/MyWorkspaces/GOOGLE/SANDBOX/test-tmatrix-app001/src/test/resources

[INFO] [compiler:testCompile {execution: default-testCompile}]

[INFO] No sources to compile

[INFO] [surefire:test {execution: default-test}]

[INFO] No tests to run.

[INFO] [war:war {execution: default-war}]

[INFO] Packaging webapp

[INFO] Assembling webapp [test-tmatrix-app001] in [/Users/jeffschenk/jas/MyWorkspaces/GOOGLE/SANDBOX/test-tmatrix-app001/target/test-tmatrix-app001-1.0-SNAPSHOT]

[INFO] Processing war project

[INFO] Copying webapp webResources [/Users/jeffschenk/jas/MyWorkspaces/GOOGLE/SANDBOX/test-tmatrix-app001/src/main/webapp] to [/Users/jeffschenk/jas/MyWorkspaces/GOOGLE/SANDBOX/test-tmatrix-app001/target/test-tmatrix-app001-1.0-SNAPSHOT]

[INFO] Copying webapp resources [/Users/jeffschenk/jas/MyWorkspaces/GOOGLE/SANDBOX/test-tmatrix-app001/src/main/webapp]

[INFO] Webapp assembled in [321 msecs]

[INFO] Building war: /Users/jeffschenk/jas/MyWorkspaces/GOOGLE/SANDBOX/test-tmatrix-app001/target/test-tmatrix-app001-1.0-SNAPSHOT.war

[INFO] WEB-INF/web.xml already added, skipping

[INFO] [gae:deploy {execution: default-cli}]

[INFO] Updating Google App Engine Server…

Reading application configuration data…

Feb 27, 2012 1:04:06 PM com.google.apphosting.utils.config.AppEngineWebXmlReader readAppEngineWebXml

INFO: Successfully processed /Users/jeffschenk/jas/MyWorkspaces/GOOGLE/SANDBOX/test-tmatrix-app001/target/test-tmatrix-app001-1.0-SNAPSHOT/WEB-INF/appengine-web.xml

Feb 27, 2012 1:04:06 PM com.google.apphosting.utils.config.AbstractConfigXmlReader readConfigXml

INFO: Successfully processed /Users/jeffschenk/jas/MyWorkspaces/GOOGLE/SANDBOX/test-tmatrix-app001/target/test-tmatrix-app001-1.0-SNAPSHOT/WEB-INF/web.xml

Beginning server interaction for test-tmatrix-app001…

Email: <gmail account>@gmail.com   <– Enter Your Gmail Account Email Address

Password for <gmail account>@gmail.com: <– Enter Your Gmail Account Password

0% Created staging directory at: ‘/var/folders/p7/h7p294_j60b0gxy80_2tx0bc0000gn/T/appcfg8864957916118846892.tmp’

5% Scanning for jsp files.

20% Scanning files on local disk.

25% Initiating update.

28% Cloning 5 static files.

31% Cloning 23 application files.

40% Uploading 12 files.

52% Uploaded 3 files.

61% Uploaded 6 files.

68% Uploaded 9 files.

73% Uploaded 12 files.

77% Initializing precompilation…

80% Sending batch containing 8 file(s) totaling 20KB.

82% Sending batch containing 4 blob(s) totaling 15KB.

90% Deploying new version.

95% Will check again in 1 seconds.

98% Will check again in 2 seconds.

99% Will check again in 4 seconds.

99% Closing update: new version is ready to start serving.

99% Uploading index definitions.

Update completed successfully.

Success.

Cleaning up temporary files…

[INFO] ————————————————————————

[INFO] BUILD SUCCESSFUL

[INFO] ————————————————————————

[INFO] Total time: 51 seconds

[INFO] Finished at: Mon Feb 27 13:04:49 PST 2012

[INFO] Final Memory: 36M/3925M

[INFO] ————————————————————————

Jeff-Schenks-MacBook-Pro:test-tmatrix-app001 jeffschenk$

Now go to the Versions tab for your GAE account and see the uploaded Version:

GAE versions tab

Click image to enlarge

Take advantage of the GAE version capability for easy deployment and the ability to deploy and then set the default version when ready to launch.

You have now successfully built out an HTML/CSS/Javascript microsite with version control, full monitoring and an efficient and continuous deployment process.

Conclusion

If you do not need a back end that’s rich with services and you are only serving native HTML, CSS and Javascript, your microsite has been deployed and you are done! If any changes are required, simply apply or accept those changes via the normal deployment lifecycle.  There is a little bit of work involved to create your first Google App Engine application, but after that you should be able to clone and add necessary dependencies if and where needed. Also, adding a job to your Jenkins / Hudson or continuous-build environment will allow for timed deployment, automatic release and version updates. Review the Maven GAE plugin documentation for more information on available maven goals for interacting with the Google App Engine’s versioning and release management.

If you are interested in using GAE back-end services to evolve the site, you can easily use Java Spring JSP, GWT, JSF or even GAElyk, a Groovy toolkit for GAE.  However, care should be taken to monitor your service usage as how your application is developed using GAE back-end service will cost based upon usage.

References

Bookmark and Share

Add a New Comment

Required