Dead simple App Engine static hosting
I have no idea why, but I have had tons of trouble finding a simple example for hosting app engine. I have been working on a client-side only site so all I wanted to do was host some static content. I spent way too long figuring it out, so… in this blog post, I’ll cover creating a basic statically hosted site.
Step 1: The App Engine content folder
Create a folder that you will host the files from and place one folder in it, titled static that will contain all of your App Engine files. Your folder structure will look like this:
/your_folder /your_follder/static
Place all of the files you want hosted in the static folder.
Step 2: Create your app engine project
Go to the Google app engine site and create an app engine project by clicking the Create Application button. Enter an application identifier, magicalcats for example, and remember your identifier because you’ll need it for the next step.
Step 3: Author the magical app.yaml file
This is usually the first place where I get lost. Instead of bothering with manually doing this, consider the following example from Stack Overflow:
application: your-app-name-here version: 1 runtime: python api_version: 1 handlers: - url: /(.*\.css) mime_type: text/css static_files: static/\1 upload: static/(.*\.css) - url: /(.*\.html) mime_type: text/html static_files: static/\1 upload: static/(.*\.html) - url: /(.*\.js) mime_type: text/javascript static_files: static/\1 upload: static/(.*\.js) - url: /(.*\.txt) mime_type: text/plain static_files: static/\1 upload: static/(.*\.txt) - url: /(.*\.xml) mime_type: application/xml static_files: static/\1 upload: static/(.*\.xml) # image files - url: /(.*\.(bmp|gif|ico|jpeg|jpg|png)) static_files: static/\1 upload: static/(.*\.(bmp|gif|ico|jpeg|jpg|png)) # index files - url: /(.+)/ static_files: static/\1/index.html upload: static/(.+)/index.html # redirect to 'url + /index.html' url. - url: /(.+) static_files: static/redirector.html upload: static/redirector.html # site root - url: / static_files: static/index.html upload: static/index.html
In my particular case, all I would need to do here is replace your-app-name-here with magicalcats.
Step 4: Deploy!
The following command is the simplest form of the appcfg.py command to deploy your app:
appcfg.py -e youremail@domain.com update .
The hamster wheels will spin up on your command prompt and if everything worked, BAM! Static hosted files on appspot under your_app_identifier.appspot.com, or, in my example, magicalcats.appspot.com.
Conclusions
Deploying static files to App Engine is stupid easy, it’s just tricky to navigate the documentation because it’s very much focused to covering EVERYTHING. Have fun and happy hacking!
See Also
Google App Engine: The Simplified Static Repo (Thanks Blaine!)
Thanks a lot for this. I had been working for a simple app.yaml example for several hours, and most were giving me errors or simply not getting the job done. This is perfect. Thanks again.
No mater how many times these tutorials tell me it only takes 5 minutes or dead simple, I can’t get it working. I did one time get html to upload and display in the browser though… 🙁
Let me know if there’s anything that I could do to help, would a video make it easier for you?
I made a slightly simpler version of this which can be found at:
https://github.com/blainegarrett/gae-static/blob/master/app.yaml
It doesn’t leverage the JS redirect (which won’t work for non browsers anywho) but rather serves up the same content for /folder and /folder/ with that content being /folder/index.html
Only downside I can see so far is that folder names cannot contain periods AND not have a trailing slash.
Also, the main point for that repo I linked to is a tutorial for non-programmers to get simple static sites up. I’d love some feedback or contribution to it. I need to add you to the credits section yet, since was inspired by this post.
Lean and mean, thanks Blaine for sharing, adding to the post!
Hi I put all my images in a ‘static’ folder and in the HTML I linked them to the static folder too. Everything works fine but the images just wont show! I dont understand why… I tried without the static folder (in the ) but to no avail! Why??
Check your files permissions e.g. ls -al. Maybe you’re setting them to be inaccessible before sending them? It’s been a while since I’ve looked at this and if memory serves, appcfg.py should present an error if you have your permissions set wrong. Are you pre-pending static to your image paths? You should be just requesting `http://yoursite.appspot.com/image.gif`. Also of note, app engine hosting is going to be case sensitive; check your caps, e.g. cartoon_wizard.gif is not the same as cartoon_wizard.GIF.
Really helpful, thanks so much.
Hi,
I can’t deploy my page anymore. I get this message in the dialog box when I click deploy.
“If your browser is on a different machine then exit and re-run this
application with the command-line parameter
–noauth_local_webserver”
Not long time ago I was able to put my username and password and everything worked. Now the browser opens with requests for permision. I accept it, but nothing happens.
Do you know what could be the problem?
I faced a problem with this approach and posted a question on stack overflow.
http://stackoverflow.com/questions/41631414/how-can-i-use-bucket-storage-to-serve-static-files-on-google-flex-app-engine-env
The requests for static files were hitting my nodejs servers (which means they are not using a CDN).