Opinionated Vite starter template.
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.
- 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
- prop-types Runtime type checking for React props and similar objects.
- react-error-boundary Simple reusable React error boundary component.
- eslint-config-airbnb Airbnb's extensible shared config.
- eslint-plugin-import Linting support of ES2015+ (ES6+) import/export syntax.
- eslint-plugin-jsx-a11y Enforce accessibility best practices for React components.
- eslint-plugin-unused-imports Report and remove unused es6 modules.
- postcss PostCSS is a tool for transforming CSS with JavaScript plugins.
- stylelint-config-idiomatic-order Order your styles based on idiomatic-css.
To get a local copy up and running follow these simple example steps.
- Recommended
node:>=16.13.0 npmorpnpmoryarn
I advice to use pnpm for managing dependencies. It's faster and more reliable than npm. To install pnpm just run:
corepack enablecorepack prepare pnpm@7.0.0-rc.3 --activate
After that the syntax is the same as npm e.g. npm install becomes pnpm install.
- Download or fork this project
- Extract the content to a new directory, rename it and cd the directory.
- Install all dependencies using:
npm installorpnpm installoryarn
npm run devorpnpm run devoryarn run devand open the browser athttp://localhost:3000
npm run buildorpnpm run buildoryarn run build
After creating the production build, run:
npm run previeworyarn run preview
npm run serveorpnpm run serveoryarn run serveand open the browser athttp://localhost:4173
| GitHub | @fabri4c |
| @fabri_4c | |
| @fabri4c |
You can give a ⭐️ if you like this project!
The ideas and inspiration from this project are coming from the following:
No License. You can use this starter as you wish.
