Ads Top

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')

8 comments:

  1. how can you run "npm run dev" without "dev" script in package.json???

    ReplyDelete
  2. A powerful share, I just given this onto a colleague who was doing a bit evaluation on this. And he actually bought me breakfast as a result of I discovered it for him.. smile. So let me reword that: Thnx for the deal with! However yeah Thnkx for spending the time to debate this, I really feel strongly about it and love reading more on this topic. If potential, as you turn out to be expertise, would you thoughts updating your blog with more particulars? It’s highly helpful for me. Huge thumb up for this weblog put up! new york website design company

    ReplyDelete
  3. The posh distributed could be described as distinctive; customers are actually yearning for bags is a Native aspirations. Which strange surroundings is built that is to market diversity furthermore importance with travel and leisure market trends. hotels special offers website designer nyc

    ReplyDelete
  4. I see something really interesting about your web site so I saved to bookmarks . branding agencies in san francisco

    ReplyDelete
  5. I am usually to running a blog and i actually recognize your content. The article has really peaks my interest. I am going to bookmark your website and keep checking for new information. best branding agencies san francisco

    ReplyDelete
  6. Woah! I’m really loving the template/theme of this blog. It’s simple, yet effective. A lot of times it’s difficult to get that “perfect balance” between user friendliness and visual appeal. I must say you have done a amazing job with this. Also, the blog loads super quick for me on Opera. Excellent Blog! brand identity design agency

    ReplyDelete
  7. I discovered your blog site on google and test a few of your early posts. Continue to keep up the superb operate. I simply further up your RSS feed to my MSN Information Reader. Searching for ahead to studying extra from you afterward!? I am typically to blogging and i really appreciate your content. The article has actually peaks my interest. I’m going to bookmark your web site and maintain checking for new information. view website

    ReplyDelete
  8. Nice! Thanks for sharing this kind of information. Dianapps is the best iOS app development company in usa.

    ReplyDelete

Powered by Blogger.