Outline
In this blog post, I will introduce how to create a React project based on TypeScript using Vite. Let’s also take a look at the folder structure and roles of the created project.
- Vite: https://vitejs.dev/
For how to start React using Webpack settings or how to create a React project using create-react-app, Next.js, please check the previous blog posts.
Blog series
This blog post is part of a series. Here is the list of Vite series.
- [Vite] Getting started with TypeScript-based React project
- [Vite] Configure test environment in TypeScript-based React project
- [Vite] Configure Prettier in TypeScript-based React project
- [Vite] Configure Stylelint(CSS-in-JS) in TypeScript-based React project
Use Vite template
Vite supports creating projects easily using pre-made templates. The following command can be used to create a React project based on TypeScript.
npm create vite [PROJECT_NAME]
# yarn
yarn create vite [PROJECT_NAME]
# pnpm
pnpm create vite [PROJECT_NAME]
# bun
bunx create-vite [PROJECT_NAME]
After executing the command, the following question will appear asking for the project name. By default, PROJECT_NAME is set when the command is executed. If you don’t need to change the name, press the Enter key to proceed.
? Package name: › PROJECT_NAME
Then, the following question will appear asking for the framework to use in the project. Here, select React.
? Select a framework: › - Use arrow-keys. Return to submit.
Vanilla
Vue
❯ React
Preact
Lit
Svelte
Solid
Qwik
Others
After selecting the framework, the following question will appear asking whether to use TypeScript or JavaScript in the project. Here, select TypeScript.
? Select a variant: › - Use arrow-keys. Return to submit.
❯ TypeScript
TypeScript + SWC
JavaScript
JavaScript + SWC
After answering all the questions, you can see that a React project based on TypeScript is created.
Done. Now run:
cd [PROJECT_NAME]
yarn
yarn dev
Project structure
Let’s take a look at the folders and files of the React project based on TypeScript created using Vite.
├── README.md
├── index.html
├── package.json
├── public
│ └── vite.svg
├── src
│ ├── App.css
│ ├── App.tsx
│ ├── assets
│ │ └── react.svg
│ ├── index.css
│ ├── main.tsx
│ └── vite-env.d.ts
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts
The important files are the following.
index.html: The entry point of the React application.package.json: A file that defines the project’s dependencies and scripts.public: A directory that stores static files.src: A directory that stores the source code of the React application.src/main.tsx: The entry point of the React application.src/vite-env.d.ts: A TypeScript configuration file used in the Vite environment.tsconfig.json: A TypeScript configuration file.tsconfig.node.json: A TypeScript configuration file used in the Node.js environment.vite.config.ts: A Vite configuration file.
Run project
When you open the package.json file of the React project based on TypeScript created using Vite, you can see the commands that can be used in the project as follows.
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
The following are the commands that can be used in a React project based on TypeScript created using Vite.
dev: Run the project in development mode.build: Build the project.lint: Check the project’s code.preview: Preview the built project.
To create and run a project based on TypeScript using Vite, first install the project’s dependencies by running the following command.
npm install
# yarn install
Then, run the following command to run the project in development mode.
npm run dev
# yarn dev
After executing the command, you can see that the development server is running as follows.
VITE v5.0.12 ready in 140 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show help
Now, open the browser and access http://localhost:5173/, and you will see the following screen.
Completed
Done! We’ve seen how to start a React project based on TypeScript using Vite. You can easily create a project using Vite templates. I hope you try creating a project using Vite templates.
Was my blog helpful? Please leave a comment at the bottom. it will be a great help to me!
App promotion
Deku.Deku created the applications with Flutter.If you have interested, please try to download them for free.
