Top React boilerplates for 2021 

Recently, React has seen a rise in popularity to become one of the most loved front-end frameworks of all time. The State of JS survey, where React has ranked in the top two spots for the last five years, is proof of that. This also means more developers are building projects in React than ever before.

Non-opinionated by design, the React library benefits from the use of boilerplates, pieces of code that act as a logical starting point while beginning development with any technology. In this article, we will look at five such boilerplates for React and explore their strengths and weaknesses.

1. Create React App

As the official script recommended by the React team, Create React App (CRA) is your safest bet when it comes to bootstrapping your React applications. 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 used here is different from the npm commands. npx stands for node package execute, which gets automatically installed onto the system with npm version 5.2.0 or higher. The specialty of the npx command is 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

When satisfied with the code changes, we can use:

npm run build

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

We made a custom demo for .
No really. Click here to check it out.

Click here to see the full demo with network requests

Main features

• Choice of template by appending the create command with the --template flag:

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

• TypeScript support by choosing the typescript template:

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

• Support for modern JavaScript features like dynamic imports right out of the box, which make the developer’s life easier
• Direct support for CSS files and CSS modules
• 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 in which we need additional control over our codebase and its features.

To handle such scenarios, Create React App provides us with the ability to eject dependencies. We can customize the build tool or other configurations by running the script:

npm run eject

This one-way operation removes the single react-scripts dependency that did all the heavy lifting behind the scenes. It also brings back all the dependencies and transitive dependencies like webpack and Babel 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

• Officially recommended by the React team for bootstrapping React apps
• Covers all basic features without extra dependencies
• Includes comprehensive documentation site
• Offers ease of configuration for developer

Weak points

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

So in case you are looking for a tried-and-tested way to get started with React development without the hassle of having to do things yourself, then Create React App is the tool to use.

2. 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 for getting started with Next.js projects.

Getting started

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

npx create-next-app

Next, 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 homepage of the dev server:

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

• 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

Strong points

• Fast refresh and fetch support out of the box

Weak points

• No optimization for applications that require constant data fetching and refreshing
• Learning curve associated with SSR aspects that are unique to Next.js

With that in mind, if your requirement is for 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.

3. 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 present support Vue, React, and Preact.

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

This 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 that take a few seconds for the entire process. After the repo is set up, we need to move into the 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

This 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.js that supports worker_threads, otherwise, we get this error while trying to run the dev script:

Cannot find module 'worker_threads'

You can use nvm to install the latest version of npm and to manage previously installed versions.

Main features

Vite is different from the other boilerplate tools in this list as it was built from the ground up while keeping the developer experience (DX) in mind.

Vite supports an exhaustive set of features, however, the main problem that Vite set out to solve is the issue that most bundling tools (think Parcel) face at scale: when the code base grows to a decent size, the bundler takes several minutes to spin up a local instance of a dev server.

Even with optimizations like hot module replacement (HMR) in place, it still takes several seconds for a code update to reflect onto the UI as a live preview in case a critical file is modified.

Vite solves these problems by:

• Capitalizing on the availability of native ES module support on most modern browsers and not bundling the code at all
• Classifying the entire code base into library code and source code and by pre-building the library code using esbuild
• 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 that 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 Vite team
• CSS import support with CSS modules as well as preprocessor support
• Wasm and web worker support

Weak points

• The build process is built on emerging technologies, so it may be unfamiliar and difficult to tweak if necessary
• Less documentation and online support available compared to something like webpack

Therefore, if you are looking for something that is on the bleeding edge as far as developer experience, future-proofing, and performance enhancements are concerned, Vite is the best boilerplate for you.

4. 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 describes itself as the next frontier in performant web apps and highlights its availability without a network connection through its app.

Getting started

While the basic premise 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 homepage:

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. It includes 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 the Redux store) and components that are pure components.

Strong points:

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

Weak points:

• Outdated; the last commit to the repository was in March 2019
• Highly opinionated

With that in mind, if you need all the bells and whistles associated with a React project right from the beginning and don’t mind being tied up with a highly opinionated approach that is pre-decided by the library creators, then react-boilerplate is a strong candidate.

5. React Starter Kit

Lastly, let’s take a look at React Starter Kit, which describes itself as an isomorphic web app boilerplate. The homepage also mentions that React Starter Kit is highly opinionated, which means that it has already selected the tech stack for us, including Node.js, Express, and GraphQL.

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 homepage:

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 provides several recipes, which are like official guides that explain solutions to common problems while working with react-bootstrap, which makes it super handy.

Strong points:

• Isomorphic boilerplate which takes into consideration the operations to be performed on the server (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 the features React Starter Kit offers, plus the customization options it provides, it’s worth trying out if you are looking for an isomorphic boilerplate that is different from Create React 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 strengths and weaknesses. This means the choice that we will make will vary greatly based on the use case at hand and the desired end result. Luckily, we are not short of choices.

Full visibility into production React apps

Debugging React applications can be difficult, especially when users experience issues that are difficult to reproduce. If you’re interested in monitoring and tracking Redux state, automatically surfacing JavaScript errors, and tracking slow network requests and component load time, try LogRocket.

LogRocket is like a DVR for web apps, recording literally everything that happens on your React app. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred. LogRocket also monitors your app's performance, reporting with metrics like client CPU load, client memory usage, and more.

The LogRocket Redux middleware package adds an extra layer of visibility into your user sessions. LogRocket logs all actions and state from your Redux stores.

Modernize how you debug your React apps — start monitoring for free.