Vite Boilerplate

Overview:

The Vite Boilerplate is a tool that allows users to quickly bootstrap a new project with all the necessary tools for building a modern web app. It includes features such as TypeScript, React, Vite, Storybook, and Express. Additionally, it provides a solid development experience with configured tools like ESLint, stylelint, prettier, husky, and lintstaged.

Features:

• TypeScript and React: Build your web app using TypeScript for enhanced type safety and React for efficient component-based development.
• Vite: Utilize Vite as a fast and efficient build tool for your project.
• Storybook: Use Storybook to develop and test your components in isolation, ensuring they function correctly before being integrated into your app.
• Express: Use Express as the server framework for your web app.

Installation:

To install the Vite Boilerplate, follow these steps:

1. Create a new repository using this template.
2. Install the dependencies required to run the boilerplate by running the following command:

   npm install
   

3. Once the dependencies are installed, you can run the server, client, and Storybook in development mode by running the following scripts:

   npm run serve
   

   This will start the server on port 3001, the client on port 3000, and Storybook on port 6006.
4. If you prefer to run specific scripts individually, you can do so by using the following commands:
   • To run the server: npm run serve:server
   • To run the client: npm run serve:client
   • To run Storybook: npm run serve:storybook
5. If you want to configure the server port, you can set the PORT environment variable or create a .env file with the desired port value. You can use the provided .env.example file as a reference.

Summary:

The Vite Boilerplate is a powerful tool for quickly setting up a new web app project with all the necessary tools and configurations. It provides features like TypeScript, React, Vite, Storybook, and Express, allowing developers to build modern web apps efficiently. The boilerplate also includes a solid development experience with pre-configured tools like ESLint, stylelint, prettier, husky, and lintstaged. Overall, this boilerplate simplifies the initial setup process and provides a solid foundation for building web apps.