Front End Tooling Setup With React + Webpack 2 + Sass + Bootstrap 4

Goal

Provide a brief overview of the tooling configuration necessary to setup a React application with Webpack 2, Bootstrap 4, and Sass. This assumes at least a high level working knowledge of all of the pieces individually. You can check the link for the repo at the end of the article for directions on how to clone and run the application.

Key files and directories

• package.json
• webpack.config.js
• /css
• /dist

Overview

Like any modern web application, we start by setting up a package.json file with the necessary modules included. This file is fairly standard but take note of the "scripts" key. Notice the keys "clean", "dev", and "prod". These are the different commands you can run from the command line to build and/or run the application.

npm run clean

npm run clean uses a package called rimraf which will clean the /dist directory (remove files). The /dist directory is created via webpack and is where all of the compressed files go when webpack builds the files.

npm run prod

npm run prod runs clean and runs webpack to regenerate the /dist directory with the needed files

npm run dev

npm run dev runs build(which also runs clean) and then starts up the webpack dev server

** Package versions are the most current as the the publish date of this post. Webpack 2 is in RC state, and Bootstrap 4 is Alpha phase as of this writing.

** Another quick note, if you have Webpack installed globally, you should consider removing it globally ( npm uninstall -g webpack). The reason is because if you are working on different projects, you might have a need for different versions.

package.json


Once you have your package.json setup, you can then look at the webpack.config.js file. This is the file needed to setup and configure webpack.

A quick run through this file
Start with declaring needed constants at the top. Then using commonjs standard module.exports, export the config setup. We will start with the entry: key and organize the files how they will be packaged out into a /dist directory (this can be named anything such as /public or /whatever).
Next is the module rules section which handles loading babel and styles.
Finally, most of the plugins loaded in the plugins array are CSS related.

webpack.config.json

Once you have these two configuration files setup and run npm install and then npm run dev, you are ready to go and could hit http://localhost:8080/

A brief over view of the working app in the /src directory. When you run webpack (npm run dev), that takes the files in the /src directory and copies them over to the /dist directory compressed. When the app runs it is running from that directory and not the /src directory. When writing code, you actually write in the /src directory. This is a standard react/redux setup with an actions, components, reducers folder setup.

Along with the standard react/redux folder setup, you will also see a /css directory. This is where the sass (.scss) files are stored. The /sass structure itself starts in the site.scss file and that imports all other needed .scss files. If you are wondering where this is coming from, check webpack.config.js and look for this line (site: './src/css/site.scss')