gulp react template

What?

A starter project for React.js that uses gulp 4 as a task manager. It includes a basic page with a router and an example of a home and 404 route. In addition, for the backend it also includes an express and socket.io implementation, since I've found that I use this combination quite frequently.

Why?

Since I like gulp. It's simple, clean, and very easy to understand and extend.

How?

Clone the repository and run npm install to install the dependencies. After, run gulp to build the sample code, which will be deposited into public/js.ui.js. To see how it looks, run the built in server using the command npm start. Your server should be launched, and you can then access it on localhost:8080.

What tasks are in the gulpfile?

The following tasks are implemented:

• ui - the main and default task that takes the react.js code and outputs a non-minifed JavaScript bundle file.
• ui-min - when you are ready to deploy, this runs the same code as ui, only it minifies it at the end and applies the production environment.
• watch - this task does not end, it watches for changes in any of the JS or JSX files in the src directory and runs the ui task whenever there is a change.

The following tasks are not meant to be run individually, but only as sub-tasks for the above.

• ui-babel - the actual transpilation task, outputs the result in the tmp directory.
• browserify - takes the transpiled results and creates a single JS file as a result, places it in the public/js directory.
• minify - takes the ui.js file that browserify produced and generates a ui.min.js file in the same directory.
• clean - deletes the tmp directory which contains the intermediate JS files generated by Babel
• apply-prod-environment - sets the production environment variable to production, used in the minified file.

License: MIT