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:
- Not bundling the code at all but capitalizing on the availability of native ES module support on most modern browsers.
- Classifying the entire code base into
library code
andsource code
and by pre-building the library code using esbuild - 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.
Top comments (1)
Vitejs is very easy to use compared to webpack. The official documentation is much clearer than webpack for me and not to mention the bundler abd server are both lightening fast.