Skip to content
/ vite-react-starter Public template

Opinionated Vite starter template with ESLint, Prettier, Stylelint and more.

Notifications You must be signed in to change notification settings

fabri4c/vite-react-starter

Repository files navigation

Vite React Starter

Vite Babel React React Router ESLint Prettier Stylelint SASS TailwindCSS Jest Testing Library

Opinionated Vite starter template.

screenshot

Description

An starter template for Vite React 18 projects including a bunch of useful tools and libraries enforcing best practices and autofix on save.

For styling it comes with SASS, Emotion, and TailwindCSS ready to use. Choose your favorite CSS framework and get started. It also includes the @namics/stylelint-bem plugin for BEM style validation.

Built With

  • Vite Next generation frontend tooling.
  • Babel The compiler for next generation JavaScript.
  • React Router Declarative Routing for React.js
  • ESLint Find and fix problems in your JavaScript code.
  • Prettier Opinionated code formatter.
  • Stylelint A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.
  • @emotion/react Emotion is a library designed for writing css styles with JavaScript.
  • @emotion/styled Styled is a way to create React components that have styles attached to them.
  • Sass Syntactically Awesome Style Sheets.
  • TailwindCSS Rapidly build modern websites without ever leaving your HTML.
  • Jest Delightful JavaScript Testing.
  • Testing Library The React Testing Library is a very light-weight solution for testing React components

Other Plugins

Getting Started

To get a local copy up and running follow these simple example steps.

Prerequisites

  • Recommended node : >=16.13.0
  • npm or pnpm or yarn

I advice to use pnpm for managing dependencies. It's faster and more reliable than npm. To install pnpm just run:

  • corepack enable
  • corepack prepare pnpm@7.0.0-rc.3 --activate

After that the syntax is the same as npm e.g. npm install becomes pnpm install.

Setup

  1. Download or fork this project
  2. Extract the content to a new directory, rename it and cd the directory.
  3. Install all dependencies using:
  • npm install or pnpm install or yarn

Scripts

Start dev server

  • npm run dev or pnpm run dev or yarn run dev and open the browser at http://localhost:3000

Build for production

  • npm run build or pnpm run build or yarn run build

Locally preview production build

After creating the production build, run:

  • npm run preview or yarn run preview

Start server

  • npm run serve or pnpm run serve or yarn run serve and open the browser at http://localhost:4173

Connect With Me

   
GitHub @fabri4c
Twitter @fabri_4c
LinkedIn @fabri4c

Show your support

You can give a ⭐️ if you like this project!

Acknowledgments

The ideas and inspiration from this project are coming from the following:

License

No License. You can use this starter as you wish.