Our team had a task to develop complex Application for StackMob. During the development we have faced a need to host HTML5 application on our internal server to increase productivity of our QA department. This article explains how one can host HTML5 application on any server running Apache2, provided you have full control on the Apache modules and configuration.

StackMob is a backend as a service provider to help developers create mobile applications. StackMob aims at handling a lot of boilerplate that is often needed in web apps like user logins, facebook integration, database access via REST, etc.

StackMob is rather new on the scene and we have faced an issue with HTML5 hosting being down at times for our applications during the last month. So we had to seek good work around to continue our development.

One of the possible work arounds is to use provided stackmobserver.py to launch HTML5 on our own server and let QA team access it. The problem with this solution is that stackmobserver.py is ultimate single-threaded and hence it becomes very sluggish to unusable degeree even on a slight load.

Because stackmobserver.py is unusable for multi-user usage, we decided to learn what stackmobserver.py does and configure Apache2 web server accordingly. This was a bit tricky. But after a while we have succeeded. Here is a pretty self-explaining working Apache2 web site definition for StackMob HTML5 application:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

*:80>
    ServerName myapp.myserver.com

    DocumentRoot /var/www/myapp

    /var/www/myapp>
        Options Indexes
        Order allow,deny
        Allow from all
    

    ErrorLog ${APACHE_LOG_DIR}/myapp-error.log

    # Possible values include: debug, info, notice, warn, error, crit,
    # alert, emerg.
    LogLevel warn

    CustomLog ${APACHE_LOG_DIR}/myapp-access.log combined

    # Don't proxy static files of HTML5 application to StackMob
    ProxyPass        /static !

    # Proxy the rest of URLs of HTML5 application to StackMob
    ProxyPass/ http://api.stackmob.com/
    ProxyPassReverse/ http://api.stackmob.com/

    RewriteEngine on

    # Set X-STACKMOB-FORWARDED-HOST to be the host from the URL
    RewriteRule .* - [E=INFO_HTTP_HOST:%{HTTP_HOST},NE]
    Header Add X-STACKMOB-FORWARDED-HOST "%{INFO_HTTP_HOST}e"
    Requestheader Set X-STACKMOB-FORWARDED-HOST "%{INFO_HTTP_HOST}e"

    # Set X-STACKMOB-FORWARDED-PORT to be the host from the URL
    RewriteRule .* - [E=INFO_SERVER_PORT:%{SERVER_PORT},NE]
    Header add X-STACKMOB-FORWARDED-PORT "%{INFO_SERVER_PORT}e"
    RequestHeader set X-STACKMOB-FORWARDED-PORT "%{INFO_SERVER_PORT}e"

    # Set X-FORWARDED-PROTO the same way it is done by stackmobserver.py
    Header add X-FORWARDED-PROTO "HTTP"
    RequestHeader set X-FORWARDED-PROTO "HTTP"

    # Set VERSION the same way it is done by stackmobserver.py
    Header add VERSION "HTTP/1.1"
    RequestHeader set VERSION "HTTP/1.1"

For this config to work for your application the HTML5/JS files of the application need to be in some subfolder, in this example the subfolder is "static". All the requests that have the form of http://myapp.myserver.com/static will not be proxied to StackMob. All the rest of requests will be proxied to StackMob with correct headers set. Also, you need to enable modrewrite, modproxy and mod_headers for your Apache2 web server.

Hope this helps,