harp-browserify-react-rrouter
v1.0.0
Published
Template project for using browserify and watchify along with harp.
Downloads
15
Maintainers
Readme
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