MandalaTV
Personal and Professional Blog of Rich Hauck

Modifying Yeoman gulp-webapp to use Browserify and React JS

by: Rich Hauck

yeoman

I’ve become a big fan of Yeoman’s gulp-webapp generator and have found myself integrating it into my regular development workflow since it handles code testing, text minification, live reloading, and image optimization.

In an effort to integrate Facebook’s React JS library I found several third-party generators, but wasn’t satisfied with any of them. Many stray from the vanilla gulp-webapp, whether it’s switching from SASS to LESS, eliminating Bower, or relying upon Grunt JS instead of Gulp.

One of the closest solutions I uncovered was a React Recipe that ships with the gulp-webapp repository. These step-by-step instructions worked fine, though it relies on your React classes being included in order of dependency. So, if you don’t place the <script> tags representing your classes in the right order within your index.html, your app will fail.

I felt that calling require() at the top of my Javascript class files to pull only the necessary dependencies was a more elegant solution. Call it nostalgia, but this is cleaner code harks back to my days of tinkering with Java and ActionScript. This approach requires Webpack or Browserify, of which I chose the latter. I should mention I came across this blog post that accomplished what I wanted to do, but it’s for a much earlier version of gulp-webapp and doesn’t work with the current version.

So here’s what I came up with:

1. Install the standard gulp-webapp by calling yo gulp-webapp in your command line.

  1. Install React via Bower: bower install --save react 
  2. Include the newly-downloaded React as a dependency in app/index.html (<script src="/bower_components/react/react.js"></script>)
  3. Install NPM dependencies: sudo npm install --save-dev browserify reactify vinyl-source-stream 
  4. Change gulpfile.js to include custom scripts() task. Task scripts() is called in serve() and html(). Task watch() has been modified to watch /.tmp and /scripts for changes. Here’s the scripts task:gulp.task('scripts', function() {
    return browserify({
    //paths: ['./app/scripts/'],
    entries: ['./app/scripts/App.js'],
    transform: ['reactify'],
    debug: true
    })
    .bundle()
    .pipe(source('main.js'))
    .pipe(gulp.dest('.tmp/scripts/'));
    });

    Basically, this task looks at App.js, converts it and all dependencies from JSX to regular JavaScript, then outputs all of the code into /tmp/scripts/main.js.

    When publishing via gulp build, it will JSHint the compiled JavaScript before copying it from /tmp into the /dist folder.

  5. Add javascript class files to /scripts directory. Delete main.js (as the gulpfile’s scripts() task will generate a main.js file). I chose *.js extensions only so that my text editor (Sublime Text 3 and Atom) would recognize the files and color the syntax.
  6. Add <div id="app"></div> to index.html, as this is where the app is being told to render itself in /app/scripts/App.js.

 

The whole thing is available on GitHub. I hope it helps someone else out. Feel free to drop me a line if there’s something that can be improved.

 


Categories:CSS javascript webdesign

Leave a Reply

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

About Rich Hauck

Rich Hauck

I'm a creative technologist at Hauck Interactive, Inc. and an adjunct instructor at HACC. I live in Harrisburg, Pa. with my wife and three boys. I enjoy good coffee, Trappist beers, Orioles baseball, and good design.


Archives