Getting setup with Vite and TypeScript is easy with the use of a template supplied by Vite.
Step 1: Create the project
You can simply run the following command. Choose the right one based on which npm version you are using:
npm versions 7+ (preferred)
npm create vite@latest vite-ts-app -- --template vanilla-tsnpm versions 6.x
npm create vite@latest vite-ts-app --template vanilla-tsRunning the correct command above will create a Vite vanilla TypeScript app pre-configured for you.
You can find more information in the Vite.dev Guide
Step 2: Install the dependencies
You will now need to install the dependencies.
Run npm install in the root folder of your project.
Step 3: Start the dev server
Run npm run dev to start your dev server. Once running, you will see your Vite TypeScript project setup.
Above: Our Vite TypeScript project.
When you save a file you’ll notice that the project reloads, making it a very positive developer experience.
Lesson task
Goal
For the student to be able to create a Vite TypeScript project.
Brief
Follow the Level 1 Process as instructed.
NOTE: Lesson tasks do not get submitted on Moodle and are not assessed by tutors. They are mainly there for you to practise what you have learned in the lesson.
Level 1 process
- Create a new Vite app with the TypeScript template.
- Run the development server
- Make changes to the files to notice the changes.