How to use Google Apps and App Engine to get free email, calendar, homepage and more

This article will explain how to setup email, calendar, online docs and more from Google Apps, as well as deploy your homepage using Google App Engine – all integrated and all under your own domain! Why? Because GMail is the best online mail client, because Google Calendar is awesome, because Google App Engine works blazing fast, and finally – because it’s all free!

There’s a lot to talk to, so straight into details – first you need a Google Apps account. New Google’s policy has hidden the free version somewhere behind, so what you are looking for is Google Apps Standard Edition. Register there, add an existing domain you have bought somewhere.

Domain setup

Correct DNS settings in your domain are very important. I assume you want to have the homepage, mail, calendar and docs at your service. Go to your domain DNS manager somewhere in the control panel where you bought your site (there are specific instructions for many sellers at Google Apps Help) and create CNAME records pointing subdomains to ghs.google.com – so you end up having something like www.example.com, webmail.example.com, calendars.example.com and documents.example.com. All these URLs point to a login page of your Google Apps that redirect to respective services.

Remember no to setup any CNAME for the so called “naked domain”, which is a non-www address like example.com. Instead, setup a forwarded in your domain control panel that points to www.example.com – and make sure it’s not a “stealth” forwarding, frames are evil.

While you’re in the DNS manager, you can setup correct MX records that will rely your emails. Do it just like in this help article, as it explains everything really well. What it doesn’t say is that you also can add a special TXT entry that would make it harder for spammers to mess with your domain in their massive mailings. Create a TXT record for the “naked domain” with this value:

v=spf1 include:aspmx.googlemail.com ~all

Google Apps setup

When you go to your Google Apps dashboard, you can do a bunch of stuff there, add users, change settings etc. Everything is quite well explained, so I’ll leave the exploring to you. What you have to do is activate the services you need (say email, calendar, docs and chat) and change their web addresses. You already have the subdomains prepared in the previous paragraph, so now it’s just a matter of typing in the each service, setting a proper URL.

Calendar and Docs have simple sharing settings that you can adjust to your needs. What I unfortunately saw is that it’s difficult to share calendars and events between Apps and GMail/Calendar users, something is not well syced there even if you set the maximum sharing.

Regarding email, it’s worth to turn on the “catch-all address”, and the outbound rely – because sometimes you just want to have a different from field.

Google App Engine setup

So we have all the necessary services under our own domain, but the www part should point to our website, right? Well, I did a lot of tricks to get it working. I have setup a “naked domain” CNAME record pointing to an external hosting with my site. It worked well, but the CNAME messed with my email and some messages were bounced back. I tried pointing the “naked domain” to www, but that was even worse. Finally I managed to stumble upon an information that after a recent change, if you want to hook App Engine websites under your own domain, you need to use the Apps. That’s when a lightbulb appeared over my head :)

Sign up for Google App Engine. Download the necessary SDK, launch Google App Engine Launcher and create your first project of whatever name. You should have a project folder, and there you should find 2 files named app.yaml and main.py. Edit the first one – it’s responsible of pointing requests to the correct locations. You will need to create the handlers as follows:

handlers:
- url: /gfx/(.*\.(gif|png|jpg))
  static_files: gfx/\1
  upload: gfx/(.*\.(gif|png|jpg))

- url: /css
  static_dir: css

- url: /index\.html
  script: main.py

- url: .*
  script: main.py

The first handler assumes you have the image files in the folder called gfx – this folder is located in the root of your project folder, at the same level as app.yaml and main.py. The second handler assumes you have all your style-sheets in the folder called css. The third points anyone trying to reach a generic index.html to your main script. The fourth catches the rest, again pointing to the main script.

So the hierarchy of your project folder should be similar to this:

app.yaml
css/
gfx/
index.html
index.yaml
main.py

The index.yaml is a part of App Engine, but can you notice index.html? Well, since it’s main.py that displays the webpage, and python seemed not very helpful to me in inserting HTML to its source code, I decided to create a separate HTML document that would be read as a text file by the python script and printed on the screen. The browser would interpret it and display as a regular page.

To achieve this, open the main.py script and locate the MainHandler class. For it to read and print out the HTML file, it should look somehow like this:

class MainHandler(webapp.RequestHandler):

  def get(self):
    html = open("index.html", "r")

    for line in html:
      self.response.out.write(line),

What this does is basically, upon a request, opens the HTML file and prints out each line. Python is a tricky language, text indentation matters the most, as well as last characters in the line, so copy carefully ;) Finally, in your HTML and CSS make sure you refer to every folder with a preceding slash, like this:

/css/style.css
/gfx/image.png

Now all you have to do is: deploy the app to App Engine, note the app’s ID, go to Google Apps control panel again, click Add more services, type that app ID in the Google App Engine section, and add it. Then, still in Google Apps, view that app’s settings and Add a new URL – use the www subdomain so that www.example.com will point to it. Uff, that was long ;)

If your webpage contains subpages it’s not a problem. You can add more handlers in the app.yaml and process them respectively in main.py. And if you are a python guru you might even code yourself a blog – or just use a redirection of some sort using the CNAME subdomain blog.example.com – pointing to myblog.myhosting.com for example.

CNAME redirection

There’s a catch to CNAME redirection – on some hosts, it’s not enough to point to myblog.myhosting.com, because what you can see is just a blank page or a “Successful Apache installation”.

Let’s assume that myhosting.com is the main domain with which you registered your external hosting. What you have to do, is trick your hosting to think it should operate the example.com domain. You first need to alter the domain’s name servers (NS), so that you are able to add the example.com as an add-on domain to the hosting. Then, you can point the NS back to your domain provider in order to manage the DNS etc. Finally, you need to setup an actual subdomain blog.example.com on your hosting, which points to the same directory as the myblog.myhosting.com. Only then, when you setup a CNAME with subdomain blog pointing to myblog.myhosting.com, will the CNAME redirection actually work.

This explanation may sound vague, so if you have any questions just write me in the comments, or tweet me at @f055.

Conclusions

So there you have it, a quick, easy and free way to have professional GMail, Calendar, online Docs, GTalk and more (check the services available in the Google Apps), along with your personal website, all under your own domain, on blazing fast Google servers. Could things get any better? ;)

Header photo by rickz