Project Setup
-
Creating the Project
First, create your Vite project using the following command:
Terminal window pnpm create vite@latest my-project -
Select Project Options
- Select
React
orSolid
as the framework. - Then, select
TypeScript
for the language.
Hit Enter after each selection to proceed.
- Select
-
Go to the Project Directory and Install Dependencies
Once your project is created, navigate to the project directory and install the required dependencies:
Terminal window cd my-projectpnpm install -
Install
vite-tsconfig-paths
PluginTo manage TypeScript paths easily, install the
vite-tsconfig-paths
plugin:Terminal window pnpm add vite-tsconfig-paths -
Configure
vite.config.ts
Open your
vite.config.ts
file and configure it to use thevite-tsconfig-paths
plugin:vite.config.ts import tsconfigPaths from "vite-tsconfig-paths";export default defineConfig({plugins: [//... other pluginstsconfigPaths(),],server: {port: 3000,},//... other options}); -
Configure
tsconfig.json
Next, update your
tsconfig.json
to set thebaseUrl
tosrc
, allowing you to use absolute imports from thesrc
directory.tsconfig.json {"compilerOptions": {//... other compilerOptions"baseUrl": "src"}// ... other tsconfig options} -
Start the Development Server
Now, you can start the development server:
Terminal window pnpm dev