Chapter 9. Preparing Your Code for Deployment

Going through the ReactJS fundamentals and flux, we have almost approached the end of this book. After developing any application, we are left with the most crucial part of making the application available to the outside world, thus deploying your application. It's a good practice to keep the code in a source control repository such as GitHub or Bitbucket and to version control the code using Git. These help while working in a group and retrieval of any code as and when necessary. The explanation of how to set up the earlier-mentioned things is beyond the scope of this book, but there are a plenty of resources available for the same.

In this chapter, we will be exploring the following topics:

• An introduction to Webpack

• The ways of deploying a React application using Webpack and Gulp

• The configuration options used for browserify

• Installing a simple web server

An introduction to Webpack

Webpack is a module bundler, which is used to deploy JavaScript-based applications. It takes the input as modules with dependencies and then outputs these into static assets.

From the Webpack documentation site (https://webpack.github.io/docs/what-is-webpack.html#how-is-webpack-different), the following image explains the same.

Building a simple React application

As in the earlier chapters, let's build a simple React-based application with which we will be integrating the Webpack and deploy thereafter.

Install the packages vis npm from a terminal as:

sudo npm install babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-2
npm -g install httpster

Note

httpster: It is a simple http server to run the static content. In chrome browser, the index.html file sometimes doesn't render due to the X-origin error. Hence, running this webserver from your application directory will be easier to test your application in Chrome. Just run the command httpster.

By default...

Advantages of Webpack

Along the various advantages of using Webpack, as yet another bundler, these are the most important ones:

1. Code splitting: Based on the code size, it helps modularize the code chunks of code and loads these modules as and when needed. You can define the split points on your code, based on which the code chunks will be used. Thus, it helps in faster page load and performance improvement.

2. Loaders: As in the earlier-mentioned image, in the left-hand side, you can see that there are various other formats such as coffescripts/jsx instead of JavaScript and .less instead of .css. Thus, these loaders (npm packages) are used to convert these other formats into the accepted standardized formats, which makes the life of the developers much easy to code into any format they want. In React-based applications that we were seeing earlier, JSX formats are widely used. Hence, these loaders will come handy.

3. Clever parsing: It helps to parse most of the third-party library and handles the...

Introduction to Gulp

Now that we have seen a module bundler, let's see what Gulp will do for us. Gulp is a build tool for compiling and compressing JS/assets, and it does live reload on the browsers. Gulp file is basically a file with the set of instructions, which Gulp should do. The file can have a default task or several other tasks to be called from one another.

Installing Gulp and creating Gulp file

Let's install gulp and configure it with our existing application:

npm install -g gulp (for globally installing gulp)
npm install gulp –save-dev (as a developer dependancy)

Next, create a simple gulpfile.js file at the root of your app directory:

var gulp = require('gulp');

gulp.task('default', function() {
  // tasks goes here
});

Let's execute the command from terminal:

A console screenshot, after the gulp command is executed

Then, we are installing some other packages for Gulp-related tasks. We are adding these in our package.json file and running npm install, in order to install these:

Package...

Summary

In this chapter, we came to know how we can deploy our React applications using Webpack and the way Gulp eases our life by automating tasks, minifying our assets (JS, JSX, CSS, SASS, images, and so on), watching any changes on these files and live-reload built in the browser. In Chapter 10, What's Next, we will be exploring some advanced concepts of ReactJS.