Using Angular’s html5Mode with Harp

Angular is great framework for creating client side web applications as you may already know. One of the greatest benefits is that you don’t need any server processing nor compilation of your code since everything is happening in web browser. Because of that something like Python’s SimpleHTTPServer is sufficient tool for development on localhost.

This is cool but just until you don’t want to write your awesome applications in some prettier way – using JADE instead of bare HTML, SCSS or LESS instead of CSS and CoffeeScript instead of raw JavaScript. Fortunately there is harp. And no, it’s not that musical instrument. Harp is simple static web server with build-in, realtime preprocessing for all these fancy compile-to languages. If you don’t know about it check their web. Let me show You what caveats you may face developing Angular app with Harp.

html5Mode

When html5Mode for nice URLs during navigation in your Angular application, you effectively shadowing real file structure of your application. This is problem with Harp because whenever you try to reload or open URL known to your Angular app, Harp server will look up for the file and shows error 404 (except the file actually exists):

Browser Harp
Open / Serves /index.html
Loads JS and templates Serves your assets
Navigate to /todos Nothing
Reload -> Browser send request for /todos Look up for /todos.html -> Not Found 404

 

Unfortunately Harp doesn’t provide any configuration options to add any fallback or mapping of URLs to files. One solution that I found is to use Harp as module with Express framework.

First of all make sure that you have installed express:

Then create server.js file inside your Harp application directory and put there code below. I’m using Harp in “framework style” so my application is under /public dir.

To start server, run

 

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">