Vite React TypeScript TanStack Zustand Eslint Prettier Template

Overview

This product is a starter template for building a web application using Vite 5 and React 18. It includes several key features such as React Router Dom 6 for routing, Zustand for state management, and framer-motion for animations and interactions. It also has Docker support for containerization and uses TypeScript for writing code. The template comes with eslint, prettier, husky, and stylelint configured for enforcing coding standards. Additionally, it includes unplugin utilities like unplugin-auto-import for auto-importing commonly used APIs.

Features

• Vite 5: The template is built using Vite 5, a fast and efficient frontend build tool.
• React 18: The latest version of React is used as the frontend framework.
• React Router Dom 6: Enables declarative routing for the web application.
• Zustand: A popular React state management solution for managing state in the application.
• framer-motion: Powers animations and interactions in Framer, a web builder for creative professionals.
• Docker support: Allows the application to be containerized and run in a Docker environment.
• TypeScript: The template uses TypeScript for writing code in a statically typed manner.
• Eslint, prettier, husky, stylelint: These tools are set up to enforce coding standards and ensure code quality.
• Unplugin Utilities: Includes unplugin-auto-import for automatically importing frequently used APIs.

Installation

To install and use this template, follow these steps:

1. Clone the code by executing the following command in a terminal:

   git clone https://github.com/laoer536/vite3.0-react18-TypeScript-router-dom6-mobx6-Eslint-prettier-template
   

2. Open the cloned code in your preferred code editor.

3. Download the project dependencies by running the following command:

   pnpm i
   

4. Start the development server by running the following command:

   pnpm dev
   

5. To create a production-ready build, run the following command:

   pnpm build
   

   Note: The template includes an environment variable file (env) in the root directory. You can add packaging commands and environment files specific to your project.

To use Docker for containerization, make sure Docker is installed on your computer. Then, run the following command to build and run the project:

pnpm release:local

You can view the project on <your IP>:8082.

Summary

This starter template provides a solid foundation for building a web application using Vite 5 and React 18. It incorporates various features like React Router Dom for routing, Zustand for state management, and framer-motion for animations. The template also includes Docker support, TypeScript for type-safe coding, and essential tools like eslint, prettier, husky, and stylelint for maintaining code quality. It is easy to install and configure, making it suitable for starting a new React project quickly.