Welcome to the final part of this series on Cory House’s Pluralsight course Building Applications with React and Redux in ES6.

Cory is a Microsoft MVP in C#, founder of OutlierDeveloper.com, avid tech reader, and speaker.

He believes in clean code, pragmatic development, and responsive native UIs.

Also in this series:

Part 1 – Introduction and Background

Part 2 – Environment Setup

Part 3 – React Component Approaches

Part 4 – Initial App Structure

Part 5 – Intro to Redux

Part 6 – Actions, Stores and Reducers

Part 7 – Connecting React to Redux

Part 8 – Redux Flow

Part 9 – Async in Redux

Part 10 – Async Writes in Redux

Part 11 – Async Status and Error Handling

Part 12 – Testing React

Part 13 – Testing Redux

Production Builds

Intro

Cory explains that this subject is extremely import. Indeed, if you only watch a few of the modules in this course, and you haven’t yet setup your own production build, this should be your focus. I personally found this to be the most valuable module in the course.

The dev build of our course management application contains bundle.js which is currently a whopping 4.8 megabytes. We can trim a lot of fat away here.

We’re going to use the convention of src for source code and dist meaning production build for distribution.

We want to put our whole application into three files:

• index.html
• bundle.js
• styles.css

Setup Production Redux Store

Cory splits out configureStore.js into two versions: configureStore.dev.js and configureStore.prod.js

Setup Webpack

We also have two versions of webpack.config, one for each environment.

For our dev environment, we are using the devtool ‘cheap-module-eval-source-map’

For our production environment, the recommended devtool is ‘source-map’

We need to remove our hot reloading code from our production build:

‘eventsource-polyfill’ and ‘webpack-hot-middleware/client?reload=true’ are deleted, as are the webpack plugins HotModuleReplacementPlugin() and NoErrorsPlugin().

Our contentBase should be ‘./dist’ rather than ‘./src’

Cory creates a GLOBALS constant that sets the node environment to production.

There are five new webpack plugins that we add for file minification, and Cory describes each of these.

There are some updates to the module loaders files as well.

In our tools folder, Cory creates a new build.js and in here we set the node environment to production, logs to the console to let us know when the build is running, and logs any errors and warnings generated by the build.

Setup HTML Build

In the tools folder, we create buildHtml.js – this imports the following:

• fs, which is a node API for working with the file system.
• cheerio, which we covered in Part 12 – Testing React.
• colors for colorful console messages

Setup Dist Server

In tools we add distServer.js, which is similar to srcServer.js but with a few changes that Cory describes here.

Setup npm Scripts

In package.json, there’s a scripts section which includes the following steps:

• “clean-dist”: “npm run remove-dist && mkdir dist”,
• “remove-dist”: “node_modules/.bin/rimraf ./dist”,
• “build:html”: “babel-node tools/buildHtml.js”,
• “prebuild”: “npm-run-all clean-dist test lint build:html”,
• “build”: “babel-node tools/build.js”,
• “postbuild”: “babel-node tools/distServer.js”

Cory explains that rimraf is a `rm -rf` util for nodejs and will work fine on Windows, Mac and Linux

We’re using the buildHtml.js code that we just setup to build the html

Review Results

We see that the size of our bundle.js dropped from a bloated 4.8MB down to a slim 394KB.

We can get this even smaller with gzip compression, and Cory shows us this can be done with just a couple of extra lines of code in distServer.js

Now we’re down to a tiny 121KB.

Cory explains how this could be reduced even further down to just 64KB, and that there’s no way that you could get close to this with Angular 1.x, Angular 2.x or Ember JS.

Final Challenge

Ten programming challenges for you to add to this application:

1. Author administration
2. Delete course
3. Hide empty course list
4. Unsaved change message
5. Client-side validation
6. Handle 404’s
7. Show number of courses in the header
8. Pagination
9. Sort course table
10. Revert abandoned changes

You can find some hints on implementing some of these in Cory’s React and Flux course.

Course Complete

Congratulations on completing this course and I hope that you enjoyed it as much as I did. You will need to decide whether this is the right set of technology for your web projects.

There are a number of different technologies in this course, but you do not need to adopt all of them at once. In my opinion, each one comes with it’s own set of pros and cons and their adoption should be a separate decision.

Related Courses

There are a couple of other courses available that dig deeper into the specific technologies.

Babel and ES6

There is Babel: Get Started by Craig McKeachie which should give you a better idea as to whether ES6 to ES5 is the right approach for your team and company.

If you are a fan of transpilers and ES6, you might also be interested in TypeScript. You could try Using ES6 with TypeScript by Steve Ognibene.

Require

ES6 module imports are awesome, but only the very latest browsers support them. Babel JS typically transpiles these to Require JS code so that it works with ES5 browsers.

What if your ES6 development code works fine but there turns out to be a problem with the ES5 production code?

Would you know how to troubleshoot it in double quick time? It may be a good idea to learn how the code this Babel generated code works.

Fortunately Jeff “coding with spike” Valore has your back, because he’s produced a great course called RequireJS: JavaScript Dependency Injection and Module Loading

Webpack and other build automation tools

And Joe Eames has produced Webpack Fundamentals.

There are many alternatives to Webpack available for creating builds such as Grunt and Gulp, and if you decide that you want to use either of those instead there is:

Build Process, Workflows and Tooling With Grunt.js and Beyond by David Mosher

JavaScript Build Automation With Gulp.js by John Papa

Express JS and Koa JS

This course used Express to setup our dev server, but barely described what it was. There are a couple of courses that teach this in detail:

Web Development with Express JS by Hadi Hariri

Building Web Applications with Node.js and Express 4.0 by Jonathan Mills

Koa was written by many of the same developers as Express JS and has some advantages that you can learn in

Introduction to Koa JavaScript by Marcus Hammarberg

React

If you found some of the information in this course didn’t make sense, there are a couple of introductory courses of React that can introduce you more slowly:

React JS: Get Started
React Fundamentals

Remember if you’re not sure that you need Redux, then you probably don’t. But if you want another way to learn Redux in even more detail, a good option is the free egghead.io course Getting Started with Redux by the original creator of Redux, Dan Abramov.

JavaScript Language

Earlier this year I reviewed the JavaScript learning path and included advice on many other JavaScript courses as well.

Thanks for reading, and if you enjoyed it please leave a comment below or tweet me to let me know!