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 3 – React Component Approaches
Part 4 – Initial App Structure
Part 6 – Actions, Stores and Reducers
Part 7 – Connecting React to Redux
Part 10 – Async Writes in Redux
Part 11 – Async Status and Error Handling
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:
Setup Production Redux Store
Cory splits out configureStore.js into two versions: configureStore.dev.js and configureStore.prod.js
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
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.
Ten programming challenges for you to add to this application:
- Author administration
- Delete course
- Hide empty course list
- Unsaved change message
- Client-side validation
- Handle 404’s
- Show number of courses in the header
- Sort course table
- Revert abandoned changes
You can find some hints on implementing some of these in Cory’s React and Flux course.
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.
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.
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.
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
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
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
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.
Thanks for reading, and if you enjoyed it please leave a comment below or tweet me to let me know!