Sunday, August 19, 2012

Free hosting for your web applications in Google

You read it right, Google offers developers the ability to build and host the web applications in google infrastructure. Every Google App Engine application will have enough CPU, bandwidth, and storage to serve around 5 million monthly pageviews for free.

Contents:

Pre Requisites

To start with you will need to decide an application name you want to host. This application name will be your website address. By default, http://<your app name>.appspot.com as your url. If you own a domain name, you can later on point the app to that domain.

I decided my app name to recurtrix, My app can be found @ http://recurtrix.appspot.com and it is pointing to my own domain http://recurtrix.com as well.

Google App Engine Account

Once you have decided the name of your app, go to Google App Engine and Create an account.

Eclipse IDE (recommended)

I will show how to deploy your static web application to google apps, using Eclipse(Helios) in this tutorial. You can follow this link to Eclipse installation instructions and other setup required.

Get A Web domain on your name (optional)

You can get a domain from one the domain name services like godaddy.com, namecheap.com etc. For me I wanted to host a simple static web site, so I opted for just domain name purchase from godaddy.com, I did not take any hosting options since google give it for free!!!

Create Google Apps Account (optional)

Google apps is a cloud based productivity software. When you register yourself with Google Apps, You get a account with loads of free features like 10 user emails, 10GB email inbox size, custome email address like yourname@domian.com and lots more :)

Fill out the domain name and other details to finish Google Apps account setup.

Account Verification

Another step before your app is created is Account Verification. Google needs a mobile number to setup the app. Once you enter the mobile number along with your Country code, you will recieve a key which you will have to enter and submit.

Once account verification is successfully completed, you will be displayed with Create App Page where you can create the app.

Create A Web App in Google Apps

This is where you decide what you want to call your app. Lets call it myawesomewebapp.

  • Enter the app name, preferably use only small letter, hiphens.
  • Application title.
  • Choose the kind of authentication required to access app. I choose (Experimental) Open to all users with an OpenID Provider since my web site is static and I dont want to hide any deatils for now.
  • Read terms and condistions, check the accept box and submit.

Congratulations!!! your app / website is ready to be deployed now now.

Clicking on http://myawesomewebapp.appspot.com should display a ERROR NOT FOUND Page. Inspecting the response headers in firebug/developer tools should like something like below.

Initial 404 Error Page
App Engine : 404 Not Found Error Page

Install Eclipse Plugin

If you are using the Eclipse development environment, the easiest way to develop, test and upload App Engine apps is to use the Google Plugin for Eclipse. The plugin includes everything you need to build, test and deploy your app, entirely within Eclipse.

  • Click on Help in Menu -> Install new software.
    Eclipse Install new Softwares
    Eclipse Install New plugin / software
  • Enter GWT - http://dl.google.com/eclipse/plugin/3.6 in the window and click on Add button and OK in pop-up
    My version of Eclipse helios(3.6). Depending on the version of your eclipse your url might change.
    You can find out your Eclipse version from: Eclipse Menu Bar -$gt; Help -> About Eclipse
    GWT components
    Select GWT Components
  • It will take some time to calculate the dependencies and list out the items as below. Click Next
    GWT Resolved Dependencies
    GWT Resolved Dependencies
  • It will take you to License Agreement page. Accept the and wait for the installation to finish.
    GWT License Agreements
    GWT License Agreements
  • Restart Eclipse...

That's it. Your Eclipse GWT Plugin is ready.

Create Simple Eclipse Project

  • Create a New Eclipse Project
  • Create New Java Project Eclipse
    Create New Java Project Eclipse

  • Create a New Eclipse Project, Fill Details and Click Finish
  • Create a project called myawesomewebapp
    Create a Project name of your Choice. Click Finish
  • Create Below Folder Structure in project Explorer.
    • war
      • WEB-INF
        • appengine-web.xml - Every App should have this file in WEB-INF folder. It has your app related deatils and configurations.
        • logging.properties - What should be the level of application logging.
        • web.xml - web.xml is part of the servlet standard for web applications.
      • index.html - Simple "hello World" html file with external CSS
      • simple.css - Simple CSS file.

Configuring Project Properties

Eclipse App Engine Properties
Select Use Google App engine

Application Id: myawesomewebapp
Note: put the web application id you configured in Google App Engine

Eclipse Google Web Toolkit Properties
Click on User Google Web Toolkit and click OK

Configure appengine-web.xml


<?xml version="1.0" encoding="utf-8"?>
<appengine-web-app xmlns="http://appengine.google.com/ns/1.0">
  <application>myawesomewebapp</application>
  <version>1</version>

  <!--
    Allows App Engine to send multiple requests to one instance in parallel:
  -->
  <threadsafe>true</threadsafe>

  <!-- Configure serving/caching of GWT files -->
  <static-files>
    <include path="**" />
 
    <!-- The following line requires App Engine 1.3.2 SDK -->
    <include path="**.nocache.*" expiration="0s" />

    <include path="**.cache.*" expiration="365d" />
    <exclude path="**.gwt.rpc" />
  </static-files>

  <!-- Configure java.util.logging -->
  <system-properties>
    <property name="java.util.logging.config.file" value="WEB-INF/logging.properties"/>
  </system-properties>
</appengine-web-app>


Configure web.xml

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<web-app xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" version="2.5" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee                http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">

  <!-- Default page to serve -->
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
  </welcome-file-list>

</web-app>

Simple HTML file

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My Awesome Web App</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="My Web app is about .... ">
    <meta name="author" content="Raghu Kiran">
    <link href="simple.css" rel="stylesheet">
    <style type="text/css">
      body {
        padding-top: 60px;
        padding-bottom: 40px;
      }
    </style>
  </head>
  <body>
  <h1>Hello, World</h1>
  <p>This is a simple text content</p>
  </body> 
</html>

Simple CSS file


h1 {
 color: #336699;
 font-family: Verdana, tahoma, Geneva, sans-serif,'lucida grande';
 font-weight: bold;
 text-align: center;
}

p {
 color: #333333;
 font-family: Verdana, tahoma, Geneva, sans-serif,'lucida grande';
}

Deploy the application.


  • Right click on the project
  • Select Google from Context Menu...
  • Deploy App to Engine.
App Engine Deploy from Eclipse

  • Enter Your App Engine username and Password in the dialog.
  • Click on Allow Access
Eclipse App Engine Deployment creds
  • Once the deployment is done, You can go to app page and see the static pages displayed.
  • Go to http://myawesomewebapp.appspot.com to see your app live.

What Next...

You can configure your domain to point to your app.
You can host a JSP page or servlets....
You can play around with the project settings, and other stuff... :)

Be the first to comment on this post

Post a Comment