Top React Boilerplates for 2021

In recent times, React.js has seen itself rise in popularity and become one of the most loved front-end frameworks of all time. We will be looking at these 5 boilerplates for React today:

1️⃣ create-react-app

2️⃣ create-next-app

3️⃣ react-vite

4️⃣ react-boilerplate

5️⃣ react-starter-kit

If you end up liking this article, make sure to follow me on 🐦twitter where I regularly share awesome learning resources like this one:

create-react-app

Create React App (CRA) is your safest bet when it comes to bootstrapping your react applications as it's the official bootstrapping script recommended by React documentation. As per the official documentation site:

Create React App is a comfortable environment for learning React, and is the best way to start building a new single-page application in React.

Getting started

In order to set up a new app using create-react-app, we run the command

npx create-react-app my-app

The npx command being used here is different from the npm commands. npx stands for Node package execute which gets automatically installed onto the system while installing npm version 5.2.0 or higher. The specialty of the npx command being that it can execute any package from the npm repository without the need for installing the package beforehand.

That command creates a new folder called my-app in the current directory and sets up a react project inside that folder. In order to run a development server and work on the app, we use the command:

npm start

And when satisfied with the code changes, we can use:

npm run build

Which generates an optimized build folder that can be deployed wherever we want to host our app.

Main features

• Create the app with a template of your choice by appending the create command with the --template flag

npx create-react-app my-app --template [template-name]

• Create the app with typescript support by choosing the typescript template:

npx create-react-app my-app --template typescript

• Support for modern JavaScript features like async/await, rest/spread, dynamic imports right out of the box which make the developer's life easier.
• Direct support for CSS files and CSS modules and SCSS support with the help of node-sass.
• Routing support using react-router and code-splitting support through dynamic imports.

Ejecting from create-react-app

While the simplicity that create-react-app brings to the table is much appreciated, there are some scenarios wherein we need additional control over our codebase and its features. To handle such scenarios, create-react-app provides us with an option to customize the build tool or other configurations by running the script:

npm run eject

This is a one-way operation that removes the single react-scripts dependency that did all the heavy lifting behind the scenes, and bring back all the dependencies and transitive dependencies like webpack, babel etc back into the package.json where the user can have full control over them.
dependencies before ejecting:

"dependencies": {
  "@testing-library/jest-dom": "^5.11.4",
  "@testing-library/react": "^11.1.0",
  "@testing-library/user-event": "^12.1.10",
  "papercss": "^1.8.2",
  "react": "^17.0.1",
  "react-dom": "^17.0.1",
  "react-scripts": "4.0.2",
  "web-vitals": "^1.0.1"
},

dependencies after ejecting:

"dependencies": {
  "@babel/core": "7.12.3",
  "@pmmmwh/react-refresh-webpack-plugin": "0.4.3",
  "@svgr/webpack": "5.5.0",
  "@testing-library/jest-dom": "^5.11.4",
  "@testing-library/react": "^11.1.0",
  "@testing-library/user-event": "^12.1.10",
  "@typescript-eslint/eslint-plugin": "^4.5.0",
  "@typescript-eslint/parser": "^4.5.0",
  "babel-eslint": "^10.1.0",
  "babel-jest": "^26.6.0",
  "babel-loader": "8.1.0",
  "babel-plugin-named-asset-import": "^0.3.7",
  "babel-preset-react-app": "^10.0.0",
  "bfj": "^7.0.2",
  "camelcase": "^6.1.0",
  "case-sensitive-paths-webpack-plugin": "2.3.0",
  "css-loader": "4.3.0",
  "dotenv": "8.2.0",
  "dotenv-expand": "5.1.0",
  "eslint": "^7.11.0",
  "eslint-config-react-app": "^6.0.0",
  "eslint-plugin-flowtype": "^5.2.0",
  "eslint-plugin-import": "^2.22.1",
  "eslint-plugin-jest": "^24.1.0",
  "eslint-plugin-jsx-a11y": "^6.3.1",
  "eslint-plugin-react": "^7.21.5",
  "eslint-plugin-react-hooks": "^4.2.0",
  "eslint-plugin-testing-library": "^3.9.2",
  "eslint-webpack-plugin": "^2.1.0",
  "file-loader": "6.1.1",
  "fs-extra": "^9.0.1",
  "html-webpack-plugin": "4.5.0",
  "identity-obj-proxy": "3.0.0",
  "jest": "26.6.0",
  "jest-circus": "26.6.0",
  "jest-resolve": "26.6.0",
  "jest-watch-typeahead": "0.6.1",
  "mini-css-extract-plugin": "0.11.3",
  "optimize-css-assets-webpack-plugin": "5.0.4",
  "pnp-webpack-plugin": "1.6.4",
  "postcss-flexbugs-fixes": "4.2.1",
  "postcss-loader": "3.0.0",
  "postcss-normalize": "8.0.1",
  "postcss-preset-env": "6.7.0",
  "postcss-safe-parser": "5.0.2",
  "prompts": "2.4.0",
  "react": "^17.0.1",
  "react-app-polyfill": "^2.0.0",
  "react-dev-utils": "^11.0.2",
  "react-dom": "^17.0.1",
  "react-refresh": "^0.8.3",
  "resolve": "1.18.1",
  "resolve-url-loader": "^3.1.2",
  "sass-loader": "^10.0.5",
  "semver": "7.3.2",
  "style-loader": "1.3.0",
  "terser-webpack-plugin": "4.2.3",
  "ts-pnp": "1.2.0",
  "url-loader": "4.1.1",
  "web-vitals": "^1.0.1",
  "webpack": "4.44.2",
  "webpack-dev-server": "3.11.0",
  "webpack-manifest-plugin": "2.2.0",
  "workbox-webpack-plugin": "5.1.4"
}

It is usually not that common to eject from create-react-app but it is good to have that option if you know what you are doing.

Strong points

• create-react-app is the official recommendation for bootstrapping react apps by the React team.
• Covers all basic features without extra dependencies.
• Comprehensive documentation site.
• Takes away the hassle of configuration away from the developer

So in case you are looking for a tried and tested way to get started with react development without the hassle of doing things yourself, then create-react-app is the tool to use.

weak points

• Not much control over the finer aspects of the repository (if not ejected)

create-next-app

Create react app is a decent way to bootstrap a generic SPA with client-side rendering, but if the requirement is a little fancier like server-side rendering, or static-site generation, then the best way to get started is using create-next-app. It is a simple CLI tool to get started with Next.js projects.

Getting Started

In order to get generate the boilerplate, we just need to run the command:

npx create-next-app

Thereafter, we answer the questionnaire and at the end of it, a Next.js code repo is set up for us. There is also a provision to bootstrap an app based on any example from the official documentation page by using the -e or the --example flag.

In order to start a dev server, we run:

npm run dev

This brings up the home page of the dev server:

In the code repo, create-next-app creates a folder structure that looks something like this:

Any JavaScript files that are created in the pages directory create routes in the Next.js app with the same name as that of the file. Any assets (like images) required are to be placed inside of the public folder. CSS and LESS are supported by default.

Main features

If your requirement is that of a rather static site, and you are looking for a solid react framework that is way ahead of others in terms of Server-side rendering and Static-site generation, definitely go ahead with Next.js and you will not be disappointed.

Strong points

• Automatic/Dynamic routing through file naming convention and getStaticPaths() method.
• Static-site generation is supported through the the getStaticProps() method.
• Server-side rendering through the getServerSideProps() method.
• Fast refresh and fetch support out of the box.

Weak points

• Is not optimized in case of applications that need constant data fetching and refreshing.
• There is a learning curve associated with getting to learn the aspects of SSR which are unique to Next.js

react-vite

Vite is a relatively new candidate in the frontend framework tooling space that is created/maintained by Evan You of Vue.JS fame. Vite is a universal solution that can be used to bootstrap projects from several tech stacks using templates, which at the present, support Vue, React, Preact, etc.:

Getting started

For the scope of this article, we will explore the creation of React projects. In order to initiate the repo creation, we run

npm init @vitejs/app react-vite

which brings up this selection menu:

Selecting the react option creates a react project in the directory. What is interesting to note is that it takes roughly a second to set up the repo as opposed to other tools which take a few seconds for the entire process. After the repo is setup, we need to move into that directory and install the vite package as a dev dependency.

cd react-vite
npm i --save-dev vite

Then, we can run the dev script as:

npm run dev

Which brings up the default UI at localhost:3000.

Do note that in order for the dev script to run properly, we need to be on the latest build version of Node that supports worker_threads, else, we get this error while trying to run the dev script:

Cannot find module 'worker_threads' 

The latest version of npm can be installed and the several versions installed on your system can be managed by using nvm.

Main features

Vite is different from the other boilerplate tools in this list as it was built from the ground up keeping the Developer Experience (DX) in mind. Quoting from Vite's official documentation page:

Vite (the French word for "fast", pronounced /vit/) is a new breed of frontend build tool that significantly improves the frontend development experience.

Even though vite supports an exhaustive set of feature list, the main problem that Vite set out to solve was the issue that most bundling tools (think webpack, parcel) face at scale: Whenever the code base grows to a decent size, the bundler takes up several minutes to spin up a local instance of a dev server. Also, with respect to updating code and getting a live preview, even with the optimizations like Hot module replacement (HMR) in place, it still takes several seconds for a code change to reflect onto the UI in case a critical file is modified.
Vite solves these problems by:

1. Not bundling the code at all but capitalizing on the availability of native ES module support on most modern browsers.
2. Classifying the entire code base into library code and source code and by pre-building the library code using esbuild
3. By performing HMR over native ES modules which considerably reduces the HMR boundary to be invalidated and improves performance.

While the development server does not bundle code, the production scripts still build a bundle using Rollup which is highly optimized.

Strong points:

• Main focus on the developer experience (DX)
• Typescript support out of the box
• Active development and maintenance by Evan You and the team
• CSS import support with CSS modules as well as preprocessor support.
• wasm and web worker support

Hence, if you are looking for something that is on the bleeding edge as far as developer experience, future-proofing, & performance enhancements are concerned, react-vite is your tool.

Weak points

• Upcoming technology woking on the bleeding edge of build process and hence there might not be many developers in the industry who truly understand it in order to tweak the process if necessary
• Not as popular and old as compared to something like webpack which means there might be comparitively less documentation and support available online.

react-boilerplate

Another tool worth adding to the list when it comes to setting up a react project is react-boilerplate. On its landing page, react-boilerplate provides this description:

Quick setup for new performance-oriented, offline–first React.js applications

Getting started

While the basic premise based on which the library is built is the same as that of others, the steps to set up a new code repository are slightly different. Firstly, we need to clone the setup repo:

git clone https://github.com/react-boilerplate/react-boilerplate.git my-react-boilerplate

Next, we need to move into the cloned repository and run the setup script:

cd my-react-boilerplate
npm run setup

And then the start script to kick-off the dev server:

npm start

This brings up this home page:

Main features

The main difference between other tools on this list and react-boilerplate is that, post setup, we get a highly opinionated, yet highly feature-rich development setup with feature support for react-router for routing, redux for state management, redux-saga for enhancing redux, reselect for optimization, immer for immutability and styled components for fast-tracking development. Even the project structure is highly opinionated with separation between containers (connected to redux store) and components that are pure components.

Strong points:

• Full-fledged repo setup with routing, state management, and other optimizations, etc.
• Maintained by Max Stoiber, another big name in the react ecosystem.
• Styled components support out of the box.

Weak points:

• Not catching up with the latest trends in development, the last commit on the repository was in March, 2019
• Highly opinionated

With that in mind, if you need to get started with react development needing all the bells and whistles associated with a react project right from the beginning and don't mind being tied up with an x technology to achieve y outcome approach that is pre-decided by the library creators, then react-boilerplate is a strong candidate.

react-starter-kit

Lastly, let's take a look at react-starter-kit which describes itself as an **isomorphic* web app boilerplate*. The home page also mentions that react-starter-kit is highly opinionated which means that it has already selected the tech stack for us which comprises of Node.js, Express, GraphQL, etc. In a way it takes the load away from the users of the boilerplate by making the decision for us while also making sure that we follow the current best practices in the industry.

Getting started

In order to get started with the boilerplate, we need to clone the latest repository and use that as the starting point:

git clone -o react-starter-kit -b master --single-branch https://github.com/kriasoft/react-starter-kit.git MyApp

Then, move into the created folder and install the dependencies:

cd MyApp
yarn install

And start the dev server as follows:

yarn start

That brings up the boilerplate home page:

Main features

The main feature of this boilerplate is that it is highly feature-packed, yet highly customizable. In addition to the exhaustive file structure that we get at repo setup:

.
├── /build/                     # The folder for compiled output
├── /docs/                      # Documentation files for the project
├── /node_modules/              # 3rd-party libraries and utilities
├── /public/                    # Static files which are copied into the /build/public folder
├── /src/                       # The source code of the application
│   ├── /components/            # React components
│   ├── /data/                  # GraphQL server schema and data models
│   ├── /routes/                # Page/screen components along with the routing information
│   ├── /client.js              # Client-side startup script
│   ├── /config.js              # Global application settings
│   ├── /server.js              # Server-side startup script
│   └── ...                     # Other core framework modules
├── /test/                      # Unit and end-to-end tests
├── /tools/                     # Build automation scripts and utilities
│   ├── /lib/                   # Library for utility snippets
│   ├── /build.js               # Builds the project from source to output (build) folder
│   ├── /bundle.js              # Bundles the web resources into package(s) through Webpack
│   ├── /clean.js               # Cleans up the output (build) folder
│   ├── /copy.js                # Copies static files to output (build) folder
│   ├── /deploy.js              # Deploys your web application
│   ├── /postcss.config.js      # Configuration for transforming styles with PostCSS plugins
│   ├── /run.js                 # Helper function for running build automation tasks
│   ├── /runServer.js           # Launches (or restarts) Node.js server
│   ├── /start.js               # Launches the development web server with "live reload"
│   └── /webpack.config.js      # Configurations for client-side and server-side bundles
├── Dockerfile                  # Commands for building a Docker image for production
├── package.json                # The list of 3rd party libraries and utilities
└── yarn.lock                   # Fixed versions of all the dependencies

And the number of scripts that we get out of the box:

"scripts": {
    "precommit": "lint-staged",
    "lint-js": "eslint --ignore-path .gitignore --ignore-pattern \"!**/.*\" .",
    "lint-css": "stylelint \"src/**/*.{css,less,styl,scss,sass,sss}\"",
    "lint": "yarn run lint-js && yarn run lint-css",
    "fix-js": "yarn run lint-js --fix",
    "fix-css": "yarn run lint-css --fix",
    "fix": "yarn run fix-js && yarn run fix-css",
    "flow": "flow",
    "flow:check": "flow check",
    "test": "jest",
    "test-watch": "yarn run test --watch --notify",
    "test-cover": "yarn run test --coverage",
    "coverage": "yarn run test-cover && opn coverage/lcov-report/index.html",
    "clean": "babel-node tools/run clean",
    "copy": "babel-node tools/run copy",
    "bundle": "babel-node tools/run bundle",
    "build": "babel-node tools/run build",
    "build-stats": "yarn run build --release --analyse",
    "deploy": "babel-node tools/run deploy",
    "render": "babel-node tools/run render",
    "serve": "babel-node tools/run runServer",
    "start": "babel-node tools/run start"
  }

The library also makes sure that it provides several recipes which are like official guides that explain how to accomplish X? while working with react-bootstrap which makes it super handy.

Strong points:

• Isomorphic boilerplate which takes into consideration the operations to be performed on server-land (Node.js) like SSR.
• Support for GraphQL through Apollo
• Recipes for implementing common use cases.
• React testing via Enzyme and static type checking via Flow

Weak points:

• Large number of dependencies which might bloat up the bundle size even if not used
• Highly opinionated

With those features that react-boilerplate is willing to offer and the customizations that it provides, it is worth giving a shot if we are looking for an Isomorphic boilerplate that is different from create-next-app.

Conclusion

With that, we wrap up the roundup for Top React boilerplates in 2021. As we can see, each one of them comes with its own set of Things it does best and Things it is not so good at. This means it all comes down to the use case at hand. It also means the choice that we make will vary greatly based on the nature of the end result we are aiming at but at least the good thing is, that we are not short of choices.