A browserify workflow, part 2

I wrote an article on working with React JS in a browserify workflow. Well, I got some more experience with it and here is PART2. You can grab this boilerplate at react-app-boilerplate.

There were specifically two things we did not handle very well on the initial workflow:

External dependencies

Testing

External dependencies

When browserify rebundles your project it goes through all the require statements in your application code and figures out what to put into your bundle. Luckily we have watchify that makes sure that it does not rebundle what it already has bundled, BUT browserify still goes through the files and figures out if something should be done. You might not notice this when only React JS is part of the bundle, but as you load up more dependencies it can take several seconds on each save and rebundle of your project.

What we want to do is only touch these external dependencies once and never touch them again during the workflow session. You will not do any changes to React JS or underscore I suppose?

Testing

The initial version of this workflow used Karma for testing. Now Karma is great, but by including browserify as part of the testing it got very slow. By letting our current workflow bundle our tests with external dependencies and watchify we can make this a lot faster! It would also be nice that our tests run automatically when we do changes to our project.

Getting in the flow

Start up a webservice in the “build” folder, f.ex. python -m SimpleHTTPServer 3000

Go to “localhost:3000”, here you will find your app

Go to “localhost:3000/testrunner.html”, here you will find your tests

To make LiveReload work you need to install an extension to Chrome, LiveReload. This puts a small button up in the right corner of your browser. When on you app and/or your tests, hit that button and you will see the little circle in the center will become a black dot. Now these pages will refresh on file changes either in your tests or application files… blazingly fast!