@nemmtor/react-starter-kit NPM

React starter kit ⚙️

Motivation

Creating opinionated react boilerplate with modern tools.

Installation

To setup a new project using this starter kit simply run this command in the directory you wish to place it:

npx @nemmtor/react-starter-kit@latest <PROJECT_NAME>

Tech stack and things included:

Typescript
React
Vite
Vitest (with RTL)
CSS modules (with types)
Cypress
Linters: Eslint, Stylelint, Commitlint
Prettier
Commitizen
Dark mode
Storybook
Translations
Pre-commit hook:
- lint
- type check
- unit and integration tests
- check commit message
Github actions workflow
- build
- lint
- unit and integration tests
- e2e tests

Absolute imports

Use @/ to import from src directory, for example:

import { render } from '@/test-utils';

CSS classes type safety

Simply run npm run dev or npm run build and you will get auto-generated type declarations for your css classes.

Why?

Because it gives you IDE autocompletion and type safety - try changing the classname in css module and you will get typescript error.

Note: type declarations are only created for components that you actually use in app.

Global styles

Global styles are implemented via native css variables.

src/theme/_index.scss

// this works like a theme which you can reuse in scss module files
:root {
  --text-primary: #000;
  --light-gray: rgb(220 220 220);
}

some-component.module.scss

.someClassName {
  background: var(--light-gray);
}

Production build

In order to compile the project without devDependencies this project uses typescript-transpile-only package.

npm install --production
npm run build

Note that after installing some extra dependencies make sure you put them in dependencies/devDependencies, based on their usage.
There's a seperate file for vite config: vite.build.config.ts so it doesn't need some packages to be listed in dependencies.