The article explains how to do a minimal scaffolding of React application using Webpack.

  1. Setup Git.
  2. Setup npm.
  3. Install packages.
  4. Setup babel.
  5. Setup Webpack.
  6. Define entry.
  7. Include bundle.
  8. Run application.

Setup Git

Setup a git repo as follows.

Setting up a git repo is optional if you are only doing a demo. The next step which creates a project uses the git repo information.

Setup npm

Do npm init and accept the defaults. This will create a package.json file in the project. Package.json has information like the package name, version, author, production dependencies and development dependencies. Production dependencies are required to run the application. Development dependencies are required for building the application and for running lint, tests, etc.

Install packages

The production packages to install are react, react-dom.

The development packages to install are babel and webpack. babel-core is the root babel functionality. babel-loader is required for Webpack to perform a build using babel. babel-preset-es2015 is used to transpile ES6 code to ES5 code (normal JavaScript). babel-preset-react is used to compile JSX to normal JavaScript.

Setup Babel

Babel is required for writing ES6 code and compiling JSX to JavaScript. Create a .babelrc file. This file is used by Babel to load and configure presets or plugins.

Setup Webpack

what-is-webpack

Webpack is a package that builds the UI project. It allows us to write UI code with import statements. All the imported scripts are converted into a bundle file. Webpack expects a configuration file: webpack.config.js. A minimal configuration for React application is shown below.

The entry file to the project is index.jsx. __dirname is a special Node variable that points to the current directory. The output is stored in a bundle.js within the root folder. Babel is loaded as a module to process .jsx files. Webpack combines all JavaScript code into a single file called bundle.js.

The output of the build process is a bundle.js. It should be part of .gitignore along with node_modules.

Define entry

The entry point for our build process is the index.jsx. It is a simple Hello world component. The component is rendered in a HTML element with id: container. All the imports starting from index.jsx is processed. All the scripts referenced from index.jsx is combined into bundle.js.

Include bundle

Next, we define a HTML document which includes the bundle.

Run application

Run the application using webpack-dev-server --inline. This serves the application in http://localhost:8080. As a bonus, it watches for changes to the component and re-renders the page.

Also, configure the start task within package.json. This allows to start the project with the familiar npm start command.

Adding styles to the project

Most developers use SASS for writing the stylesheets. SASS files are processed using more loaders. The following loaders should be added to webpack.config.

To install these loaders, use the following npm command:

sass-loader processes SASS files. node-sass is a dependency for sass-loader. The css-loader and style-loader is also required for processing CSS files and importing styles. Add a main.scss to the project which imports all other SASS stylesheets. Import the main.scss in the app.jsx (entry file for webpack).

The above code will inject all the styles into the page.

Github project

There is an accompanying Github project which has the minimal scaffolding.

Minimal scaffolding for React with Webpack
Tagged on:     

Leave a Reply

Your email address will not be published. Required fields are marked *