A simple boilerplate for react.js applications.
It uses browserify to bundle the javascript source files, and gulp.js to automate the building process. It also provides ways to listen to changes in files and rebuild the project automatically.
- Run
npm install
to install the necessary node.js modules - Run
npm install -g gulp
to install gulp globally - Run
gulp watch
and start developing - Open
build/index.html
to display the app.
With gulp watch
, changes in files trigger the rebuild of the relevant parts. However, deletion of files are problematic and do not trigger the rebuild. In those cases, clean with gulp clean
and re-run the watch task.
- Run
gulp build
.
You can find your build in the build/
folder.
- app/assets/: Static files (css, images, fonts, etc.)
- app/lib/: External javascript libraries
- app/src/: Application source code
- app/index.html: Application launcher
- gulpfile.js: Task configuration
This project includes two tasks which work quite similarly.
- The
app/index.html
file is copied tobuild/index.html
- Assets in
app/assets
are copied tobuild/assets
- Javascript libraries in
app/lib
are bundled tobuild/lib/lib.js
- Javascript source files in
app/src
are bundled tobuild/lib/main.js
using browserify (uses reactify for converting JSX code to regular js)
The watch task listens to changes in files and automatically rebuilds the project as needed. It does not minimize the code. The build task minimizes and uglifies the javascript code.
The gulp task uses the following modules:
- browserify: To bundle the javascript source files into one file
- del: To remove the build folder
- gulp: The task runner
- gulp-continuous-concat: To concatenate files
- gulp-if: Conditionally run a task
- gulp-notify: Gulp notifications
- gulp-streamify: Convert uglify pipe streams to browserify streams
- gulp-uglify: Minimize and obfuscate js code
- gulp-watch: To watch for changes in
app/assets
,app/lib
andapp/index.html
- reactify: Necessary if you need to parse JSX files before bundling with browserify
- vinyl-source-stream: Create input stream for browserify
- watchify: To watch for changes in browserify