Overview

The TS + React + Vite + FSD project template is a repository containing a collection of preferred tools and guides for setting up a project. This template includes features such as Conventional Commits, deployment to GitHub Pages, basic CSS layout, ESLint, Prettier, Autoprefixer, Storybook, npm-check-updates helper, vite loadEnv, vite-tsconfig-paths, vite-plugin-checker, and local HTTPS through vite-plugin-mkcert.

Features

• Conventional Commits: Uses the Conventional Commits approach for consistent and structured commit messages.
• Deploy to gh-pages workflow: Allows for easy deployment of single-page application projects to GitHub Pages using GitHub Actions.
• Basic CSS layout + clsx util lib: Provides a basic CSS layout and leverages the clsx utility library.
• eslint: Includes ESLint for code linting. Can be added to the project using the npm init @eslint/config command.
• prettier: Includes Prettier for code formatting. Follow the official guide to add it to the project.
• autoprefixer: Includes Autoprefixer to automatically add vendor prefixes to CSS. Add it to the project by running npm i -D postcss@latest autoprefixer@latest and creating a postcss.config.js file in the project’s root directory.
• storybook: Includes Storybook, a tool for building UI components and pages in isolation. Follow the official guide to add it to the project.
• npm-check-updates helper: A tool used for manually updating dependencies on a weekly basis.
• vite loadEnv: Allows for the use of environment variables in the project’s configuration.
• vite-tsconfig-paths: Enables Vite to resolve imports using TypeScript’s path mapping.
• vite-plugin-checker: A Vite plugin that provides various checks, such as TypeScript error checking.
• local https via vite-plugin-mkcert: Allows for the use of HTTPS on localhost during development using the vite-plugin-mkcert plugin.

Installation

1. Adjust the VITE_BASE_URL in the .env file to match your repository name.
2. Follow the provided installation instructions for each feature mentioned above.

Summary

The TS + React + Vite + FSD project template is a comprehensive repository that offers a collection of tools and guides for setting up a project. It includes features such as Conventional Commits, deployment to GitHub Pages, CSS layout, code linting and formatting, environment variable usage, Storybook integration, and various plugins for improving development workflows. By following the installation instructions provided, developers can quickly set up a project with all the necessary tools and configurations.