Tuesday, October 15, 2013

How to deploy a HTML5 project on Google App Engine (http://appspot.com)

How to deploy a HTML5 project on Google App Engine (appspot.com)

Step-by-step tutorial showing how to use appspot.com to deploy and host your HTML5 projects.

Steps

  1. Signup to Google App Engine
  2. Download, install, and setup Eclipse IDE
  3. Deploy your application
Before we get started, let me give you a few features that makes Google App Engine a really good alternative to you host your projects.

App Engine applications are easy to build, easy to maintain, and easy to scale as your traffic and data storage needs grow. With App Engine, there are no servers to maintain: You just upload your application, and it's ready to serve your users.

With App Engine, you only pay for what you use. There are no set-up costs and no recurring fees. The resources your application uses, such as storage and bandwidth, are measured by the gigabyte, and billed at competitive rates. You control the maximum amounts of resources your app can consume, so it always stays within your budget.

App Engine costs nothing to get started. All applications can use up to 1 GB of storage and enough CPU and bandwidth to support an efficient app serving around 5 million page views a month, absolutely free.
  • Run your web applications on Google's infrastructure.
  • Google App Engine is fully-integrated development environment
  • You can serve your applications with your own domain (such as http://example.com), or you can use the App Engine domain for free (just like http://emersonestrella.appspot.com)
  • You can use server side languages such as PHP, Java, Python, and Go.
  • For storage on Google App Engine you can use the App Engine

1. Signup to Google App Engine (Appspot)

Go to http://appengine.google.com and signup to App Engine with your Google Account. After that you can create your application on Google App Engine using the Admin Console. Just click the button "Create Application"...


Fill up the form...

2. Download, install, and setup Eclipse

Go to http://www.eclipse.org/downloads/ and download the lasted version "Eclipse IDE for Java EE Developers"...

Then extract and execute the binary.

Next step is to configure Google Plug-in for Eclipse. Open the Eclipse IDE and go to "Help" -> "Install new software"...

Click in the "Add..." button to add a new update site and then fill the field location with one of the following urls based on the version of Eclipse you have installed:

After you add the new update site you can go back to "Help" -> "Install new software" and select the Google Plugin Update Site from the list...

... a list of available plugins and tools will be populated. Choose the "Google Plugin for Eclipse" and click "Next >". After that restart Eclipse and the Google Plugin will be available.


3. Deploy your application

Create a new project on Eclipse to "hold" your application. To do that go to "File" -> "New Project" -> "Google" -> "Web Application Project"...

Add the project files under the folder "war" that is inside your project folder on Eclipse Workspace.

Before deploy your application to Google App Engine you have to link your Eclipse project to the application that you have created using the App Engine Console (Step #1). To do that you have to edit two little things in the file: "../war/WEB-INF/appengine-web.xml"

  • Add the same name of the application you have created on App Engine Console between the application tag...
    • <application>my-application</application>
  • Add the application version number between the version tag...
    • <version>0.1</version>
Now you're ready to deploy your application. Sign in with your Google Account by clicking in the bottom right button "Sign in to Google"...


And finally, click on the Google button in the menu bar and choose the option: "Deploy to App Engine"...

After that the upload process will start and in a few seconds your application will be available on Google App Engine.


That is all. Hope that help you guys who are wondering how to use Google App Engine. If you find any problem during this process, please leave a comment. Thanks!