11 React Boilerplates and Starter Kits for 2019
Quickly set up your next app with these useful kick-starters
As React continues to evolve and help us to build and compose our applications’ UI, more React applications are created every day.
In the past couple of years, the community created multiple projects to help you save time and kick-start these apps. But, choosing the right boilerplate (create-react-app right?) isn’t always as simple as it seems. It can affect not only the initial setup but also your app’s ability to scale in your environment.
To help you get the information and make a solid choice, I’ve gathered some of the best open source boilerplates out there (unranked). I’d also advise that you use tools like Bit to organize your reusable components and use them in your different app to build faster by just composing them together.
Let’s dive in!
1. Create React App
This incredibly 65K stars project is FB’s official start-kit for React, which lets you set up a modern web application by running one command with no build configurations (you don’t need to install and configure Webpack or Babel!). V.2 was recently released with full support for Babel 7, Webpack 4, new styling options, and more integrations into our favorite workflows (while removing support for Node v.6). However, there are still some known issues, especially around the need to eject from the project.
The project’s philosophy relies on a few principles such as having just one build dependency: It uses Webpack, Babel, ESLint, and more, but provides a cohesive experience on top of them while no configurations are required.
At the end of the day, this is the fastest and most effective way to get the job done for most use cases, mainly around straight-forward web applications.
2. React Boilerplate
This 22K stars library by Max Stoiber is a highly scalable, offline-first React setup with a strong emphasis on developer experience and application performance. Its DX orientation is felt in features like letting your saved changes to the CSS and JS be reflected without refreshing the page. Preserve application state even when you update something in the underlying code. It even automates the creation of components, containers, routes, selectors and sagas — and their tests — right from the CLI. And there’s more.
While not as fast to set & go as create-react-app, it’s a developer friendly and powerful alternative to those who favor their dev workflow and performance.
3. React Slingshot
A neat 9K stars project by Cory House which provides a React + Redux starter kit / boilerplate with Babel, hot reloading, testing, linting and a working example app built-in. Slingshot offers a rich development experience using React, Redux, Babel, Webpack, Jest, Sass and more. It provides hot reloading (and testing) upon saving which is very useful, so feel free to give it a try.
4. React starter kit
A 18K starter kit which aims to be opinionated. It’s a boilerplate for web development built on top of Node.js, Express, GraphQL and React, containing modern web development tools such as Webpack and Babel. “Feature branches” provide customized integrations for tools like Redux and Apollo.
5. Razzle
This 6K project helps you create server-rendered universal JavaScript applications with very little configuration. Razzle abstracts complex configuration needed for SSR into a single dependency, giving you the experience of create-react-app, but then leaving the rest of your app’s architectural decisions a to you. Razzle works with React, but also Reason, Elm, Vue and Angular. It features Universal Hot Module Replacement, ES6 support, CSS setup of CRA and works with many tools. Try it out.
6. Rekit
Rekit is a toolkit for building scalable web applications with React, Redux and React-router. Since march 2018, Rekit uses create-react-app to create the applications and focuses on providing the envelope- on an IDE level- for developing and scaling the app from boilerplate to large-scale apps. Note that it will force a certain foler/code structure you might find opinionated. Try it:
7. React Redux Universal
I wasn’t sure if this 11K stars (100+ contributors) and 2–3 years old repo should be on the list. I decided to add it, since it is after all well-crafted and universally-aspiring solution. It’s a starter boilerplate for a universal webapp using express, react, redux, webpack, and react-transform. While the project’s integration list is exceptionally rich, some might be outdated, so use with care. Here are a demo application and some quick explanations. Take a look.
8. React Go
// to run and render a react router based component
res.render('/account', {});
// or more generically
res.render(req.url, {});
// to render a react view
res.render('index', {});PayPal’s 1.5K stars composite render engine for universal (isomorphic) express apps to render both plain react views and react-router views, enabling server rendered views to be client mountable. Note that this project, started in 2015 and developed since, was created to save boilerplating overhead for PayPal team adopting React. Since PayPal was (still is?) using Express heavily at the time, the project is largely focused around this workflow. Check it out.
9. Rebar
This project is a Boilerplate + examples for universal web application with React, Material-UI, Relay, GraphQL, JWT, Node.js, Apache Cassandra / Elassandra, with heavy focus on SaaS and multi-tenancy support. The boilerplate is optimized for Configurability as configuration files (settings, CQL, JSON, snippets of JavaScript and JSX) are separated from the common code, and Modularity as the apps are built separated into semi-independent units, which contain the necessary front-end, back end, relay, CQL, etc. code.
10. React PWA
A 1.5K stars boilerplate for Progressive web applications (PWA) with server side rendering, built with SEO and user-experience in mind. It supports Safari and Chrome, built-in code splitting, ES6+7 support, universal routing (react-router), SSR and more. If it’s a PWA you’re aiming at, definitely worth taking a look at this project. Here is a full demo, take a look.
11. React Firebase Starter
This 4k stars project is a boilerplate (seed) project for creating web apps with React.js, GraphQL.js and Relay. It helps you bootstrap new React.js + Firebase application projects in minutes, using modern mainstream libraries and tooling without depending on 3rd party frameworks. Cool right? try it out.
Conclusion
The right boilerplate can help you quickly launch your React application without working too hard on configurations and setup. Choosing the right boilerplate is important not only for getting started but also for when you scale your application later on. Choose the right template, pick the right tooling, and get going. It’s also recommended to keep a collection of your reusable components, so composing a new app becomes Lego with some glue.
Feel free to add your own suggestions and share from your experience!
