TS + React + Vite + FSD project template

This repository contains my favorite tools and complete guides how to set everything up

Includes

deploy to gh-pages workflow

Allows to deploy spa project to github pages via github action

Please adjust VITE_BASE_URL in .env to fit your repo name

commitlint + conventional commits

To add it to the project I use commitlint website.

I always prefer this way to deal with commit messages. It has a lot of benefits, read more about the conception.

basic css layout + clsx util lib

See src/styles.css and src/app/App.tsx

eslint

To add it to the project I use npm init @eslint/config command.

prettier

To add it to the project I follow official guide.

autoprefixer

To add it to the project I run npm i -D postcss@latest autoprefixer@latest

Then add a file postcss.config.js on the root project directory

module.exports = {
  plugins: {
    autoprefixer: {}
  }
}

Then patch vite.config.ts with this section:

css: {
    postcss: {
      plugins: [
        autoprefixer({}) // add options if needed
      ]
    }
  }

storybook

Storybook is a tool for building UI components and pages in isolation.

To add it to the project I follow official guide.

npm-check-updates helper

I use this tool weekly to manually update the dependencies

vite loadEnv

Allows to use env variables in config

vite-tsconfig-paths

Give vite the ability to resolve imports using TypeScript's path mapping

vite-plugin-checker

Vite plugin that provide checks e.g. [TypeScript] Found 0 errors. Watching for file changes.

local https via vite-plugin-mkcert

Allows to use https://localhost in development