Over a million developers have joined DZone.

DIY Minimal React Boilerplate

DZone 's Guide to

DIY Minimal React Boilerplate

In this post, we go over how to set up a basic front-end, production ready web app that use React, SASS, Babel, Webpack, and Jest.

· Web Dev Zone ·
Free Resource

Build your own production-ready minimalist boilerplate for web apps with:

  • Module bundler: Webpack 4
  • UI: React 16
  • Styles: SCSS
  • Transpiler: Babel 7
  • Tests: Jest 23

Check out our repo on GitHub.

Initialize New Project

Run npm init

Add a .gitignore File

Create a .gitignore file with the following contents:


Add the Babel Transpiler

Babel docs can be found here.

Run yarn add -D @babel/core babel-loader @babel/preset-env @babel/preset-react @babel/preset-flow

Create a .babelrc file with this content:

  "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/flow"],
  "plugins": ["@babel/plugin-syntax-dynamic-import"]

Add SCSS Preprocessor

SCSS docs are here.

Run yarn add -D style-loader css-loader sass-loader node-sass mini-css-extract-plugin

Add Jest and Enzyme

Jest docs can be found here and Enzyme docs can be found here.

Run yarn add -D jest jest-extended babel-jest babel-core@^7.0.0-bridge.0 regenerator-runtime enzyme enzyme-to-json enzyme-adapter-react-16

Create a file called jest.config.js with the following contents:

module.exports = {
  "collectCoverage": true,
  "coverageReporters": ["json", "html"],
  collectCoverageFrom: [
  coverageThreshold: {
    global: {
      statements: 98,
      branches: 91,
      functions: 98,
      lines: 98
  moduleDirectories: [
  moduleNameMapper: {
    ".*\\.(css|less|styl|scss|sass)$": "<rootDir>/utilities/cssModule.js",
    ".*\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/utilities/image.js"
  setupTestFrameworkScriptFile: "<rootDir>/utilities/testBundler.js",
  setupFiles: [
  testRegex: "tests/.*\\.test\\.js$",
  snapshotSerializers: [

Create the utilities folder with the following files:

  • cssModule.js with this content:

module.exports = 'CSS_MODULE';
  • enzymeSetup.js with this content:

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });
  • testBundler.js with this content:

import 'babel-polyfill';
  • image.js with this content:

module.exports = 'IMAGE_MOCK';

Add Webpack

Webpack docs can be found here.

Run yarn add -D webpack webpack-cli html-webpack-plugin html-loader webpack-dev-server image-webpack-loader file-loader

Then add the following to the script section of your project:

"scripts": {
  "dev": "webpack-dev-server --open --mode development",
  "test": "jest --coverage",
  "build": "webpack --mode production"  

Now you can run yarn run dev for developing and yarn run build for building production bundles.

Create a webpack configuration file webpack.config.js with the following contents:

const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {

  // Entry point for your application
  entry: './app/index.js',

  module: {
    rules: [

      // loader for js files invoking the transpiler from ES6 to ES5
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"

      // loader for html files
        test: /\.html$/,
        use: [
            loader: "html-loader"

      // loader for image files
        test: /\.(gif|png|jpe?g|svg)$/i,
        use: [
            loader: 'image-webpack-loader',
            options: {
              bypassOnDebug: true,
              disable: true

      // loader for SCSS preprocessor
        test: /\.scss$/,
        use: [
            process.env.NODE_ENV !== 'production' ? 'style-loader' : MiniCssExtractPlugin.loader, // fallback to style-loader in development
            'css-loader', // translates CSS into CommonJS
            'sass-loader' // compiles Sass to CSS, using Node Sass by default

  // needed for react-router on development server 
  devServer: {
    historyApiFallback: true,

  plugins: [
    new HtmlWebPackPlugin({
      template: "./app/index.html",
      inject: true
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"

Add the app/index.html file with the following content:

<!doctype html>
<html lang="en">
    <meta charset="utf-8">
    <title>Minimalist React Boilerplate</title>
  <div id="app">
    <!-- app -->

Add React and Related Libs

Run yarn add react react-dom react-router-dom react-loadable

Add Flow

Run yarn add -D flow-bin flow-typed

Run yarn run flow init

Run yarn run flow-typed install

Add to .flowconfig file the following content under the [options] and [include] sections:


module.name_mapper.extension='scss' -> 'empty/object'

Optional: Setup VSCode

Install Flow Language Support extension for VSCode.

Set these settings for VSCode:

  "flow.useNPMPackagedFlow": true,
  "typescript.validate.enable": false,
  "javascript.validate.enable": false

That's It

Create the app folder and build an awesome application!

reactjs 16 ,babeljs ,front end development ,es6 ,web dev

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}