Top React Boilerplates for 2021
Tags: react, javascript, tooling, webdev
Published: 2021-06-13 18:32:48


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:
{% twitter 1282646430780284928 %}
---

---

---
## create-react-app
**Create React App ([CRA](https://create-react-app.dev/))** 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
``` bash
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:
``` bash
npm start
```
![Create React App](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q8z17a2jfzvb9fs6zcyi.png)
And when satisfied with the code changes, we can use:
``` bash
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
``` bash
npx create-react-app my-app --template [template-name]
```
- Create the app with **typescript** support by choosing the `typescript` template:
``` bash
npx create-react-app my-app --template typescript
```
- Support for modern JavaScript features like [async/await](https://github.com/tc39/ecmascript-asyncawait), [rest/spread](https://github.com/tc39/proposal-object-rest-spread), [dynamic imports](https://github.com/tc39/proposal-dynamic-import) 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:
``` bash
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:
``` javascript
"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:
``` javascript
"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](https://nextjs.org/) projects. 

#### Getting Started
In order to get generate the boilerplate, we just need to run the command:
``` bash
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:
![Next JS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kmght6oh6t6dgb47n3u5.png)
In the code repo, `create-next-app` creates a folder structure that looks something like this:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6r1yvpu83uetv8vxpn2n.png)
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](https://nextjs.org/docs/basic-features/pages#server-side-rendering) and [Static-site generation](https://nextjs.org/docs/basic-features/pages#static-generation-recommended), 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](https://vitejs.dev/) is a relatively new candidate in the frontend framework tooling space that is created/maintained by [Evan You](https://twitter.com/youyuxi) 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 
``` bash
npm init @vitejs/app react-vite
```
which brings up this selection menu:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sh58npqf5hird947rass.png)
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. 
``` bash
cd react-vite
npm i --save-dev vite
```
Then, we can run the dev script as: 
``` bash
npm run dev
```
Which brings up the default UI at `localhost:3000`. 
![React Vite](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x2ijjeihp9la2or92vdq.png)

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](https://github.com/nvm-sh/nvm/blob/master/README.md).

#### 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](https://vitejs.dev/guide/features), the main problem that Vite set out to solve was the issue that most *bundling tools* (think [webpack](https://webpack.js.org/), [parcel](https://parceljs.org/)) 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](https://esbuild.github.io/)
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](https://rollupjs.org/) 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](https://vitejs.dev/guide/features.html#web-assembly) and [web worker](https://vitejs.dev/guide/features.html#web-workers) 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
![React Boilerplate](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ju6thpr33ipjkab7aqt6.png)
Another tool worth adding to the list when it comes to setting up a react project is [react-boilerplate](https://www.reactboilerplate.com/). 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:
``` bash
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:
``` bash
cd my-react-boilerplate
npm run setup
``` 
And then the start script to kick-off the dev server:
``` bash
npm start
```
This brings up this home page:
![React Boilerplate](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/92uqtefy405h6m95ebyp.png)

#### 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](https://github.com/ReactTraining/react-router) for routing, [redux](http://redux.js.org/) for state management, [redux-saga](https://redux-saga.github.io/redux-saga/) for enhancing redux, [reselect](https://github.com/reactjs/reselect) for optimization, [immer](https://github.com/mweststrate/immer) for immutability and [styled components](https://github.com/styled-components/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](https://mxstbr.com/), 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:
``` bash
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:
``` bash
cd MyApp
yarn install
```

And start the dev server as follows:
``` bash
yarn start
```
That brings up the boilerplate home page:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qdlly3zvfhwvskb1daae.png)

#### 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:
``` javascript
"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](https://github.com/kriasoft/react-starter-kit/tree/master/docs/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](https://graphql.org/) through [Apollo](https://www.apollographql.com/)
- Recipes for implementing common use cases.
- React testing via [Enzyme](http://airbnb.io/enzyme/) and static type checking via [Flow](http://flowtype.org/)

#### 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.