How to Get Started with Vite in 3 Easy Steps

By w3iscool, March 30, 2023

Vitejs is a new frontend build tool that aims to provide a faster and leaner development experience for modern web projects. It uses native ES modules to serve files on demand, and bundles your code with Rollup for production. It also supports TypeScript, JSX, CSS and other popular frameworks out of the box.

In this post, I will show you how to get started with Vite in a few simple steps.

Step 1: Install Vite (FrontEnd Build Tool)

The recommended way to start a new Vite application is to use the create-vite package, which you can run with npm, yarn or pnpm. For example, to create a Vite + Vue project, you can run:

# npm 6.x
npm create vite@latest my-vue-app --template vue

# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app -- --template vue

This will scaffold a basic template for you in the my-vue-app folder. You can also choose other templates, such as vanilla, react, preact, lit or svelte. See create-vite for more details.

Step 2: Run Vitejs

To run your Vite application, navigate to the application folder and run the dev command to start the development server:

cd my-vue-app
npm run dev

This will open your browser at http://localhost:3000/, where you can see your application running. You can also edit your code and see the changes reflected instantly thanks to the hot module replacement (HMR) feature.

Step 3: Build Vite Application

To build your Vite application for production, run the build command:

npm run build

This will generate an optimized bundle of your code in the dist folder, ready to be deployed. You can also preview your production build by running the preview command:

npm run preview

This will serve your dist folder at http://localhost:5000/.

Conclusion

Vite is a fast and easy way to create modern web projects. It offers a great developer experience with native ES modules, HMR, TypeScript support and more. It also produces highly optimized bundles for production with Rollup.

If you want to learn more about Vite, you can check out its official website and documentation. You can also find some community templates and plugins on Awesome Vite.