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!

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

Published at DZone with permission of Angelo Agatino Nicolosi . See the original article here.

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}