We kick off our project by creating some of the basic folders and files that will be needed to continue building our build system.
Before we continue with configuring our project, we need to install and configure the core babel compiler as well as the babel plugins that we will be using in this course.
With Babel installed and configured, we can move on to setting up eslint.
With eslint configured properly, we then integrate it into our editor to provide instant feedback while we work.
Now we install gulp, and configure it to allow us to compile our server code. We also take a look at how we can use sourcemaps in node applications.
With our build step out of the way, we now implement our watch and run tasks for our server - allowing us to be able to have our server be restarted automatically on file changes.
This video shows a basic way that we can hook unit tests into our application using the jasmine testing framework.
In this video we create a basic express app that servers out a templated view as well as our app’s favicon image.
To speed up the next few videos, in this video we install all the necessary packages for webpack.
Now we put together the configuration for our webpack client build.
In this video we finish the production configuration, integrate the webpack compiler with our gulpfile, and include font awesome into our project.
Next up we implement our final gulp tasks, and integrate them into being able to launch an entire development environment with a single command. We also setup the webpack dev server to serve out our client code when in development.
With our development server running, we next put together our configuration for hot module replacement; allowing us to hot-reload our styles without having to refresh the browser window.
Before we can take a look at hot-reloading our components, first we must install react and react-dom and take a look at how we will be using them in the context of our module loader.
We finish our build pipeline with enabling hot module replacement for react components.
We take a look at how we can debug our client code inside of both chrome and Visual Studio Code.
Finally we see how we can debug node applications inside of Visual Studio Code with sourcemap support.
To conclude this section, we recap how to work with the project structure we created in this section. This video is for people who wish to use the bundled project structure starter pack instead of going through the set themselves.