DEV Community

Cover image for Best React Boilerplate!
Sparkdex
Sparkdex

Posted on • Edited on

Best React Boilerplate!

Focus has shifted to the development of Full Stack Boilerplate, the successor to Infinity-react-boilerplate. If you are interested in contributing or using it, come take a look!

Infinity React Boilerplate. Minimal, Customizable and scalable boilerplate.

I guess everybody had wasted a good amount of time while figuring out the boilerplate stuff for your project. Especially when you need Webpack, and other stuff and does not need the good old create-react-app.

Infinity React Boilerplate is what I'm gonna call it.

DO GIVE A STAR 🌟 THO.

There was this Boilerplate which I've sort of always admired especially in my beginner days. But to tell the truth, it was pretty complex for me in starting days, it still is somewhat now. Especially all those test stuff, having a complex folder structure, container folders etc. and also it wasn't getting updated for quite long.

So, I decided to create a personal project that I eventually want to publish to the internet, but choosing boilerplate or making one of my own was a tough decision. I had this Generic Boilerplate from one my older project, but as you know, it got old, some dependencies went deprecated, some changed their APIs etc, so updating it was not an easy task, just one wrong dependency update and you mess up lots of stuff.

So, I went back to my admired boilerplate and removed the excessive stuff that I obviously won't need while starting my project.

Features Removed

  • Removed Intl – All files and libraries for Intl support
  • Removed doc
  • Removed Coveralls
  • Removed NGINX/Apache files
  • Removed JEST/Testing Stuff.

Features Added

  • Redux Toolkit integration
  • Styles – SCSS Styling
  • Updated all dependencies and libraries.
  • Webpack Loading Bar (Aesthetic is always important).
  • Removed NGINX/Apache files
  • Optimised and more Generators (Styled components etc).
  • Better Hot Reloading
  • Better Stats
    Anyways, I still want to remind you guys the good features it has.

  • Instant Feedback.

  • SCSS Support

  • Industry-standard routing.

  • Offline First.

  • Static code analysis.

  • SEO.

CLI's and Quality ratings.

  1. Travis.
  2. Appveyor

Quick start

  1. Make sure that you have Node.js v8.15.1 and npm v5 or above installed.
  2. Clone this repo using
    git clone --depth=1 https://github.com/EvilSpark/Infinity-react-boilerplate.git
  3. Move to the appropriate directory:
    cd 
  4. Run
    npm run install
    in order to install dependencies. At this point you can run npm start to see the example app at http://localhost:3000
  5. Although I prefer using PNPM instead of NPM.

Structure

The app/ directory contains your entire application code, including CSS, JavaScript, HTML and tests.

The rest of the folders and files only exist to make your life easier, and should not need to be touched.

Thanks to pros in ReactBoilerplate.com for their boilerplate.

Future Goals -

The parent project is gradually moving to become a create-react-app template, so after it gets stable, I'll also upgrade my codebase to CRA template format and push current content to another branch.

Have fun with it.

Keywords: React.js, Redux, Hot Reloading, ESNext, Babel, react-router, Offline First, ServiceWorker, styled-components, redux-saga, FontFaceObserver

Top comments (0)