harp-browserify-react-rrouter/README.md

Template project for using browserify and watchify along with harp.

# harp + browserify (+ react + rrouter)

Project template showing how to use browserify for harp apps. Shows how to use a html5 history api router with externally working urls with harp.

## Demo

http://torgeir.github.io/harp-browserify-react-rrouter

## What does this project provide?

- An easy way to use browserify with harp apps

```
npm run watch
```

- Automatic recompilation - as smooth as with every other harp application, but with browserify goodness!

- Support for jsx and (partially) es6 using reactify.

- This specific example uses React and RRouter for routing using the html 5 history api

- An harp "hack" using layouts allows a history api router to hijack urls and render js views, even if the first url you navigate to is a fake one. See below for an explanation.

- A font-awesome mixin that abstracts away what icon font you may use from your css classes

```
.camera {
  .fa-icon(@fa-var-camera-retro);
}
```

## Run/Watch/Recompile

    npm run watch

## Compile

    npm run bundle-js
    ./node_modules/.bin/harp compile public target
    cd target
    python -m SimpleHTTPServer

## How does the harp routing hack work?

By adding empty files for your routes, e.g. `another.ejs`, while using a `_layout.ejs` (but without actually utilizing `yield`) and linking to them using the history api `/another.html`, the url is picked up by the router on page load and the correct js view can be rendered instead of actually loading a real file.

Try serving up this site and navigate directly to http://torgeir.github.io/harp-browserify-react-rrouter/another.html, then on to the index route `/`.

Nice, isn't it?

## Credits

This is an extension of https://github.com/sklise/harp-browserify