Editor’s note: This React boilerplate article was last updated on 13 March 2023 to define the criteria for the best boilerplates and include a section on the Razzle boilerplate. Check out this article for information on the top React Native boilerplates.
Recently, React has become one of the most loved frontend frameworks of all time. This means that 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 boilerplates for React and explore their strengths and weaknesses.
Jump ahead:
When to use a React boilerplate
Choosing a React boilerplate requires careful consideration and, most importantly, a solid understanding of the underlying technology — React. Speed and developer experience are general concerns when picking a boilerplate. Still, you should examine each boilerplate listed to see if it satisfies any extra interests you may have — for example, TypeScript support.
Criteria for selecting a React boilerplate
Some criteria that can justify the quality of a React boilerplate includes:
- Compiler speed: This refers to how fast the tool can compile your React code. Faster compilation means faster development
- Developer experience: How easy it is to use the tool? Is it intuitive and well-documented? Does it have a low learning curve? Additionally, a tool that provides useful features like hot module reloading and error reporting can greatly enhance the developer experience
- Good documentation: Clear and concise documentation is essential when trying to learn a new tool. It also gives you reliable fallback when you run into errors
- File structure: a well-organized file structure will make it easier to navigate and maintain your codebase
- Community support: It’s essential to pick a tool with an active and helpful community where you can find support, ask questions, and receive updates
1. Vite
Vite is a relatively new frontend development tool for JavaScript projects that has gained traction among developers. It is well known for its lightning-fast development experience, fast build times, hot module replacement (HMR), and other developer-friendly features. Created and maintained by Evan You of Vue.js and other Vite maintainers, Vite uses esbuild — an extremely fast bundler for the web written in Go — under the hood as a faster alternative to bundlers like webpack or Parcel.
Vite is not only limited to React and can be used to bootstrap projects using several popular frontend frameworks like Vue, Svelte, Preact, and more. It also provides opt-in TypeScript support.
Let’s see how to set up a new Vite application.
Getting started with Vite
For the scope of this article, we will be creating only React projects with these tools. Run the following command from your preferred directory in your terminal:
npm create [email protected]
This will begin the installation process and guide you in scaffolding your project. Name your project and select React as the framework with a variant of your choice. Here we’ll set it up with TypeScript:
When the installation is complete, you should see the instructions below:
The commands above will navigate you into the project directory. Install the project dependencies with npm install and spin up a dev server on localhost:5173:
And as quick as that, you have a new React project to work with! 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 of Vite
Vite is different from the other boilerplate tools in this list because it was built keeping the developer experience (DX) in mind.
Vite supports an extensive 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 codeandsource codeand by pre-building the library code using esbuild - Performing HMR over native ES modules considerably reduces the HMR boundary to be invalidated and improves the performance
- Using plugins to extend Vite’s functionalities and include features like server side rendering (SSR)
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 are 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.
2. Create React App
Create React App (CRA) is an open source tool built for easily creating new React projects. It is maintained and recommended by the React team at Facebook. 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.
Create React App (CRA) has many built-in features that make the development process faster and more efficient. Here are some of the benefits of using CRA:
- Easy setup: CRA takes care of the initial setup for you and comes with many built-in features that can save you time during development. You won’t have to worry about configuring webpack or other build tools
- Longevity: CRA has been around longer than any other tool on this list. It has great documentation and an active community of users who can help answer questions and provide support
- Extensible: CRA is designed to be extensible, so you can add additional tools or features to your project if you need them. For example, if you need to add support for CSS pre-processors like Sass or Less, you can easily do so by installing the appropriate packages
Let’s now see how to create a React project with CRA.
Getting started with Create React App
In order to set up a new app using create-react-app, run the following 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.
Learn more →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.
Main features of Create React App
- Choice of template by appending the create command with the
--templateflag:npx create-react-app my-app –template [template-name] - TypeScript support by choosing the
typescripttemplate:npx create-react-app my-app –template typescript - Support for modern JavaScript features like dynamic imports right out of the box, which greatly improves the dev experience
- 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 very 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
- Large community behind the tool
Weak points:
- Not much control over the finer aspects of the repository (if not ejected)
- It relies heavily on older bundlers like webpack, which is slower compared to competitors like Turbopack and Rollup
- Slow development response times especially in large codebases
However, if you are looking for a trusted 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.
3. Create Next App
Create Next App is a modern solution for bootstrapping simple and advanced React apps using the Next.js framework. Next.js shines in a case where your app requires advanced rendering techniques like server-side rendering, static site generation, or even incremental static regeneration. Next.js can also be used to build single page applications (SPAs) like Vite and CRA.
Getting started with Create Next App
At the time of writing, the current version of Next.js (Next 13) has had some major changes, giving developers a choice between two variants:
- Next 13 (stable): Traditional Next app that uses file-based routing with
pagesdirectory - Next 13 App Router (beta): A new approach using the
appdirectory for file-based routing while implementing React Server Components
Depending on when you read this, the App router may be stable and widely adopted for creating new Next.js apps. But for this tutorial, we’ll go ahead with the stable version.
Run the following command in your terminal:
# Next 13 stable npx [email protected] #or # Next 13 App router npx [email protected] --experimental-app
This will start the interactive CLI — similar to what we saw with create-vite — to help you easily scaffold your new Next project:
In the end, a new Next.js project should be set up. There are also options to bootstrap an app based on any example from the official documentation page by using the -e or the --example flag.
To start the dev server, 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 or TypeScript file created in the pages directory creates a route in the Next.js app with the same name as that of the file. Any required assets (like images) are to be placed inside of the public folder. CSS and Less are supported by default.
Main features of Create Next App
- File-based routing
- Static site generation is supported through the
getStaticProps()method - Server-side rendering through the
getServerSideProps()method
N.B., If you end up going the Next App router way, keep in mind that getStaticPaths, getStaticProps, and getServerSideProps have all been dropped and replaced with a new technique to achieve the same thing.
Strong points:
- Supports all external packages that you would normally use in a React app
- Amazing documentation
- Built-in support for production concerns like image optimization, font hosting, and more
Weak points:
- No optimization for applications that require constant data fetching and refreshing
- The learning curve associated with adopting the React Server Components model and rendering methods unique to Next.js
With that in mind, if you’re looking to build a static site, a server-rendered site, or a basic one, then Next.js is your tool. It is also well-maintained and integrates well with other modern frontend tools — like Tailwind CSS and Tanstack Query. You won’t be disappointed taking this route.
5. React Starter Kit
React Starter Kit describes itself as the web’s most popular Jamstack frontend template (boilerplate) for building web applications with React. The homepage also mentions that React Starter Kit is highly opinionated, which means that it has already selected the tech stack for us, including GraphQL, MaterialUI, Firebase Auth, TypeScript, Vite, and more.
Getting started with React Starter Kit
In order to get started with the boilerplate, we need to clone the latest repository and use that as the starting point:
$ git clone https://github.com/kriasoft/react-starter-kit.git my-react-app
Then, move into the created folder and install the dependencies:
cd my-react-app $ yarn install
Start the dev server as follows:
yarn start
That brings up the boilerplate homepage:
Main features of React Starter Kit
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:
// package.json
"scripts": {
"start": "vite serve",
"build": "vite build",
"preview": "vite preview",
"test": "vitest",
"coverage": "vitest --coverage",
"deploy": "yarn workspace edge deploy",
"app:start": "yarn workspace app start",
"app:build": "yarn workspace app build",
"app:preview": "yarn workspace app preview",
"app:deploy": "yarn workspace app deploy"
},
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
Weak points:
- Large number of dependencies, which might bloat up the bundle size even if not used
- Highly opinionated and less flexible
With the advanced features React Starter Kit offers, you may like to try this out for building large-scale applications. However, this tool can be overwhelming if you’re just starting to learn React.
6. Razzle
Razzle is a tool for building server-rendered universal JavaScript applications with no configuration. It is built on top of popular frontend frameworks like React, Vue, and Preact, and allows developers to easily create server-rendered applications that can be easily deployed to various hosting environments.
Getting started with Razzle
To get started with Razzle, run the the following command in a terminal:
npx create-razzle-app razzle-app
This command will automatically install the project’s dependencies for you. Next, move into the created folder and run the development server:
cd my-app yarn start
N.B., you may run into some issues with Webpack while trying to run the dev server 'ERR_OSSL_EVP_UNSUPPORTED'. This is a hashing error as Node no longer supports md4 as a hash function. In this case, start the server this way:
NODE_OPTIONS=--openssl-legacy-provider yarn start
This brings up the homepage of the dev server:
Main features of Razzle
- Universal Hot Module Replacement, so both the client and server update whenever you make edits with no restarts
- Comes with the same CSS setup as create-react-app
- Works with React, Preact, Reason-React, Angular, and Vue
- Escape hatches for customization via
.babelrcandrazzle.config.js - Jest test runner setup with sensible defaults via
razzle test
Strong points
- No configuration: One of the most significant advantages of Razzle is its zero-configuration approach. Developers can start building server-rendered applications with React or other front-end libraries without the need for any additional configuration or setup
- Universal rendering: Razzle makes it easy to build universal applications that can run on both the server and the client side. This allows developers to create fast, SEO-friendly applications that can be easily crawled and indexed by search engines
- Build optimizations: Razzle comes with a number of build optimizations that can help improve the performance of the application. These optimizations include code splitting, tree shaking, and compression
Weak points
- Limited customization: While the zero-configuration approach of Razzle is a strong point, it also means that there are limited options for customization. Developers who require more control over the build process may find Razzle’s approach limiting
- Limited plugins: Razzle has a limited set of plugins compared to other build tools like webpack. This means that developers may need to build custom plugins to achieve specific functionality
- Limited community support: Razzle is a relatively new tool, and as such, it has a smaller community compared to more established build tools like webpack. Also it’s documentation isn’t comprehensive enough, yet
Conclusion
With that, we wrap up the roundup for top React boilerplates in 2023. As we can see, each one of them comes with its own set of strengths and weaknesses. This means the choice that you will make will vary greatly based on the use case at hand and the desired end result. Luckily, you are not short of choices.
LogRocket: Full visibility into your production React apps
Debugging React applications can be difficult, especially when users experience issues that are hard 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 combines session replay, product analytics, and error tracking – empowering software teams to create the ideal web and mobile product experience. What does that mean for you?
Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay problems as if they happened in your own browser to quickly understand what went wrong.
No more noisy alerting. Smart error tracking lets you triage and categorize issues, then learns from this. Get notified of impactful user issues, not false positives. Less alerts, way more useful signal.
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.
