Next Generation Boilerplate for React/Typescript, built on top of Vite โšก๏ธ

Last update: Jun 22, 2022

Eruption ๐ŸŒ‹

Next Generation Boilerplate for React/Typescript, built on top of Vite โšก๏ธ

It's fast! Even the tests are fast, thanks to Vite with Vitest โšก๏ธ

What's in the boilerplate

  • Vite
  • React
  • Typescript
  • Vitest
  • Testing Library
  • Dev Tools
    • ESLint
    • Prettier
    • CommitLint
    • Husky
    • Lint-Staged

Installation

This project uses DEGIT to scaffold.

first, clone the project and give it a name

npx degit github:devmozao/eruption#main your-project-name

then, to start the project

cd your-project-name
npm install
npm run dev

Try it online

Want to try Eruption without clone local? Try it on StackBlitz

Commits

This project have commits configured to follow the Conventional Commits's best practice.

To commit, you must follow the convention [optional scope]: . In practice, it would be as follow:

git commit -m "feat: add button component"

Then, Husky will start the pre-commit hook and run lint-staged, who will run prettier and lint to validate code format and code lint. If you fail to follow any one of these validations above, the commit will be aborted.

After that, if everything is validated correctly, Husky will proceed with the commit-msg hook, where he will evaluate if your commit message is following the Conventional Commit's best practice and will run the tests of your project. If any of the tests are broken, the commit will be aborted. You must fix the tests before proceeding.

As a best practice, it is strongly suggested that you avoid skip validations. If you need to change the way your commit messages are written, just go to file commitlint.config.ts and you will find there the configs needed.

Motivation

Everything started because I was in need of a good, solid, reliable and fast boilerplate to work with React/Typescript projects. I was working with Create-React-App and Webpack but both of them wasn't that good at all, specially in performance. Later on I discovered that I could use Vite to replace Webpack, so here we are now. =)

I believe that Eruption as it is right now, is an excellent starting point to any React/Typescript project, with enough dev tools to help you to write the best software possible and ship to production without any headaches.

License

MIT

GitHub

https://github.com/devMozao/eruption
You might also like...

Boilerplate to create library with Vite, Typescript and React.js

Boilerplate to create library with Vite, Typescript and React.js

Boilerplate to create library with Vite, Typescript and React.js

Jun 12, 2022

Chrome Extension Boilerplate with React + Vite + TypeScript

Chrome Extension Boilerplate with React + Vite + TypeScript

Chrome Extension Boilerplate with React + Vite + TypeScript This project is listed in the Awesome Vite Table of Contents Intro Features Installation P

Jun 22, 2022

Boilerplate React.js + TypeScript + Vite ๐Ÿ‘‹

Boilerplate React.js + TypeScript + Vite ๐Ÿ‘‹

Create a new project with React.js, TypeScript and jest with Vite

Jun 16, 2022

General Component(GC, from now) is a React component generation library which helps you prototype your service quickly.

General Component(GC, from now) is a React component generation library which helps you prototype your service quickly.

General Component(GC, from now) is a React component generation library which helps you prototype your service quickly.

Dec 4, 2021

A CLI and toolbox to extract information from React component files for documentation generation purposes.

react-docgen react-docgen is a CLI and toolbox to help extracting information from React components, and generate documentation from it. It uses ast-t

Jun 24, 2022

โšก๏ธ Minimal GraphQL Client + Code Generation for Nuxt3

nuxt-graphql-client โšก๏ธ Minimal GraphQL Client + Code Generation for Nuxt โšก๏ธ Minimal GraphQL Client + Code Generation for Nuxt Features Zero Configurat

Jun 18, 2022

A Minimal Setup & Fast Boilerplate for React.js with Vite.

A Minimal Setup & Fast Boilerplate for React.js with Vite.

A Minimal Setup & Fast Boilerplate for React.js with Vite Features ๐Ÿš€ Dynamic Pages Routing with react-router-dom from React.js ๐Ÿš€ Fast development wi

May 22, 2022

A Minimal Setup & Fast Boilerplate for React.js with Vite.

A Minimal Setup & Fast Boilerplate for React.js with Vite.

A Minimal Setup & Fast Boilerplate for React.js with Vite Features ๐Ÿš€ Dynamic Pages Routing with react-router-dom from React.js

May 22, 2022

logseq plugin boilerplate w/ React & Vite

logseq plugin boilerplate w/ React & Vite

Jun 17, 2022
Comments
  • 1. TO-DO: start a docs web page for the project

    The goal with the docs is to show with great detail, how the boilerplate works. Experienced users generally does not need, but less experienced devs might get confused, specially the way to commit, test and build with.

    Reviewed by devMozao at 2022-06-26 11:27
Vite-react-template: A starter for React with Typescript with the fast Vite
Vite-react-template: A starter for React with Typescript with the fast Vite

vite-react-template vite + react + router + ts A starter for React with Typescript with the fast Vite directory src assets components layout pages ins

Mar 22, 2022
Next-boilerplate - Basic Next.js boilerplate ready to use in any type of websites
Next-boilerplate - Basic Next.js boilerplate ready to use in any type of websites

Basic Next.js boilerplate ready to use in any type of websites. View demo ยป My L

May 21, 2022
Vite-solid-electron - A simple Vite, SolidJS, Electron integration template

vite-solid-electron Overview Very simple Vite, SolidJS, Electron integration tem

Jun 15, 2022
A React boilerplate with Typescript using Vite. Includes React-query, Zustand, Tailwindcss, EsLint + Prettier, Husky Commit Lint

A React boilerplate with Typescript using Vite. Includes React-query, Zustand, Tailwindcss, EsLint + Prettier, Husky Commit Lint

Mar 17, 2022
๐Ÿš€ A Vite Typescript SSR React boilerplate!
๐Ÿš€ A Vite Typescript SSR React boilerplate!

A blazingly modern web development stack. This template repo tries to achieve the minimum viable example for each of the following:

Jun 24, 2022
โšก A boilerplate for Vite.js, React.js. Emotion.sh, & TypeScript.

Vret Boilerplate โšก Vret stands for Vite, React, Emotion, TypeScript. It's fast & faster than create-react-app! ??โ€โ™‚๏ธ Installation Choose an option: Do

Mar 14, 2022
A boilerplate for Vite.js, React.js, Styled-Components, & TypeScript with Styling reset.

VRST Boilerplate โšก Vrst stands for Vite, React, Styed-Components, TypeScript. It's fast & faster than create-react-app! ??โ€โ™‚๏ธ Installation Choose an o

Jun 19, 2022
๐Ÿ’จ A boilerplate for Vite.js, React TypeScript, & Tailwind CSS

VR2T Boilerplate ?? VR2T [ VR-TT ] stands for Vite - React - TypeScript - Tailwind CSS Installation Choose an option: Download as .ZIP then extract/un

Nov 25, 2021
A boilerplate generator for VR2T โ†’ Vite.js, React TypeScript, & Tailwind CSS.

VR2T Boilerplate Generator ?? VR2T [ VR-TT ] stands for Vite - React - TypeScript - Tailwind CSS Why Use VR2T? Without VR2T, setting up a project woul

May 30, 2022
Vite React Typescript Lint Boilerplate

Vite React Typescript Lint Boilerplate Instalation You have 2 ways to use this template. create repo from template like this Use degit with command: n

Feb 23, 2022