Project Setup

1. Creating the Project

   First, create your Vite project using the following command:

   pnpm create vite@latest my-project

2. Select Project Options

   • Select React or Solid as the framework.
   • Then, select TypeScript for the language.

   Hit Enter after each selection to proceed.

3. Go to the Project Directory and Install Dependencies

   Once your project is created, navigate to the project directory and install the required dependencies:

   cd my-project
   pnpm install

4. Install vite-tsconfig-paths Plugin

   To manage TypeScript paths easily, install the vite-tsconfig-paths plugin:

   pnpm add vite-tsconfig-paths

5. Configure vite.config.ts

   Open your vite.config.ts file and configure it to use the vite-tsconfig-paths plugin:

   vite.config.ts

   import tsconfigPaths from "vite-tsconfig-paths";
   
   export default defineConfig({
     plugins: [
       //... other plugins
       tsconfigPaths(),
     ],
     server: {
       port: 3000,
     },
   
     //... other options
   });

6. Configure tsconfig.json

   Next, update your tsconfig.json to set the baseUrl to src, allowing you to use absolute imports from the src directory.

   tsconfig.json

   {
     "compilerOptions": {
       //... other compilerOptions
       "baseUrl": "src"
     }
     // ... other tsconfig options
   }

7. Start the Development Server

   Now, you can start the development server:

   pnpm dev