Abbett.org

Getting "normal" URLs with Backbone, PushState, and Apache

While developing the UI for ACT.md, I've been using the hash-based URLs that work by default with the Backbone.js Router.

When it came time for automated browser testing with Selenium IDE, everything came to a halt. When Selenium opens a URL that's just a change of hash, it won't detect the (obviously visible) page change and the open command times out. (Unfortunately, my bug submission has yet to be addressed.)

So, I finally bit the bullet and set up my environment to support "normal" URLs. These were the basic steps (with links to the resources I consulted):

1. Create/edit .htaccess file to rewrite URLs
2. Add { pushState: true } option to Backbone.history.start()
3. Edit all URLs in your code to remove the #/
4. Add { trigger: true } option to all application.navigate() calls
5. Hijack all internal link clicks and pass URLs to navigate() (thanks @tbranyen)

Setting up mod_wsgi on WampServer

I'm using Windows 7 and Python 2.7. I'm running a Flask app as alias /api/

General Resources

• Flask mod_wsgi documentation
• mod_wsgi Windows installation information

Installing mod_wsgi

1. Install Python
2. Install a 32-bit version of WampServer
3. Download mod_wsgi Windows binary and copy into WampServer's /bin/apache/apacheX.X.X/modules directory

4. Edit WampServer's httpd.conf file to load the new module, around line 128, e.g.

   LoadModule wsgi_module modules/mod_wsgi-win32-ap22py27-3.3.so
   

Configuring a WSGIScriptAlias

1. Create a WSGI file. Here's mine, stored with our application code, referencing our package act.rest.app:

   import sys
   sys.path.insert(0, 'c:/path/to/python/application/code')
   from act.rest.app import app as application
   

2. Use the WampServer system tray interface to create a basic Apache alias

3. Use same interface to "Edit the alias" (opens Notepad)

4. Change Alias to WSGIScriptAlias, remove the trailing slash after the relative URL, and change the directory location to point directly to your WSGI file. Simplify the Directory directives. Here's my alias file, api.conf:

   WSGIScriptReloading On
   WSGIScriptAlias /api "c:/path/to/python/application/code/app.wsgi" 
   
   <Directory "c:/path/to/python/application/code">
       Order deny,allow
       Allow from all
   </Directory>
   

5. Start/restart your Apache service. Python app is now accessible through http://localhost/api/