Simple Gulp Workflow for React

On my newsletter, I recently shared that I’m taking a dive into learning React a bit. I’ve gotten to know the roller coaster that is Angular development and am ready to branch out. As I’ve stated before, always be learning.

React has been the library in the forefront of everyone’s mind recently. The fact that it was focused on doing one thing extremely well, is appealing to me. Angular is great for building complete apps, but you are committing 100% to that ecosystem for all pieces. React does the “V” in MVC and that’s it.

Since React uses jsx, a transpile step is somewhat required (although not always). I also wanted to throw Babel and Browserify on top of that to dive head first into using ES6 as well. I’ve setup a simple Gulp workflow for React that if you’re looking to get into React, is a good starting point for writing apps.

Workflow Goals

Simplicity is the key. I’m not a fan of overly complicated Gulp setups that are a spaghetti of commands. I feel the Gulpfile should be an easy read for anyone coming into the project afterwards.

The goal is to have one for bundling JavaScript, one for bundling CSS, and to have one, possibly two tasks for spinning up the Express server. The server tasks can be optional if the app is a purely static app.

Necessary Packages

The great thing about Gulp is that there’s a plugin for almost anything you want to do. This is a result of how Gulp is stream based so that plugins don’t have to be tailored specifically for Gulp. For my JavaScript workflow, there will be no Gulp specific packages.

Here’s the NPM install of the packages:

The weird one in that list is vinyl-source-stream. This is a small piece but it takes the result of browserify  and converts it into a stream that Gulp will still recognize. That allows up to stay within Gulp’s pipeline. This is a minor technicality but if you need to know more, you can read about it on vinyl’s Github.

Setting up the Task

Here’s my task:

The  app.js is the start of the React app so that’s where the pipeline starts. The ‘transforms’ are the other two machines that we want to use to process our code. Browserify bundles it all up, it then gets put through vinyl in order to continue the Gulp stream.

Lastly, the processed code gets saved to the  .tmp directory. This directory ends up getting ignored by source controls as compiled assets shouldn’t be checked in.

This can be enhanced by adding in watch tasks, and live reload to whatever server back-end you’re using, but this simple task should give you a solid starting point when getting into React development. Not only that, it brings ES6 into the forefront and allows you take advantage to all the new features it offers.

Since I’m new to React, I’m curious to see what you guys are using for Gulp tasks. This is a real simple example for newbies, but if you’re doing React in production, I’d love to discuss it.

  • Cy Brown

    Since you are using a transpile step with babel, you can easily have a look at TypeScript.

    It supports jsx syntax since the last update, and you’ll be able to have type checks inside your props and states (yes, kind of type safe templates).

    • I have actually been looking at TypeScript. It’s definitely neat. And you’re right, adding it into the workflow is pretty trivial. Honestly though, I haven’t done much in it outside of messing around in Visual Studio. Although, if it does support JSX out of the box now, I might have to give a more serious look. Thanks for pointing that out!