How to Setup an Application using Vite

Learn how you can set up a React, Vue, Svelte, or vanilla JavaScript app using Vite.

Prerequisites

Have Node.js installed, I recommend you have the latest LTS version installed.

Getting Started

Compatibility Note

Vite requires Node.js version >=12.0.0.

Open your terminal of choice.

terminal

# Using NPM
npm init [email protected]
# Using PNPM
pnpx create-vite
# Using Yarn
yarn create vite

It will then ask you what project should be called and which template you want to use.

Now you want to move into the project's directory and run:

terminal

# Using NPM
npm install
# Using Yarn
yarn

You can also directly specify the project name and the template you want to use via additional command-line options. For example, to scaffold a Vite + React TypeScript project, run:

terminal

# Using NPM v6.x
npm init [email protected] my-react-ts-app --template react-ts
# Using NPM v7+
npm init [email protected] my-react-ts-app -- --template react-ts
# Using Yarn
yarn create vite my-react-ts-app --template react-ts

Supported template presets inlude (at the moment of writing this article):

vanilla
vanilla-ts
vue
vue-ts
react
react-ts
preact
preact-ts
lit-element
lit-element-ts
svelte
svelte-ts

For more information about Vite, read through their guide.