Apr 7, 2022
Get Started with Vite.
Setting up a Vite React application
So I have been using Create-React-App for most of my Frontend projects and I just discovered Vite. I am very excited to write about this amazing tool because I enjoy using it for my front-end applications. I will explain its uses and how you can set it up from scratch.
What is Vite?
- Vite (or quick, in French).
- Created by Evan You (also the creator of Vue.js),
- Vite is a build tool that relies on ECMAScript 6’s Module support.
- Before the ES modules were invented, developers used bundlers such as Web Pack, Rollup, and Parcel to transpile source modules into files that can run in the browser. These bundlers rebuild & rebundle your application every time you save a file.
- But with a large-scale project coupled with complexity, transpiling thousands of modules leads to low performance and longer loading time to open on the browser or changes to reflect.
- Vite solves the problem of slow server start and slow updates by not using bundlers during development, the startup speed and compilation time is greatly reduced, thereby improving the development experience for frontend developers.
- Vite then uses Rollup to ship bundled codes for production.
Prerequisites
- Latest Nodejs version installed
- Knowledge of command terminal
To Set up Vite Application.
Spinning up a Vite App is quick and easy. Vite also works with Vue, React, Preact, Svelte, and Vanilla JavaScript. The steps below illustrate how to set up React Typescript Vite Application.
- Install Vite using NPM or Yarn package manager, run the command on your terminal,
yarn create vite
or
npm init vite@latest2. On the prompt, enter the project name and use your arrow key to select the framework template.
3. Select ‘react-ts’ for TypeScript React framework variant.
4. Navigate to the project folder cd vite-project,
and run yarn or npm installto install React and Typescript package dependencies.
5) To view Vite App on the browser. Run
yarn dev
or
npm run dev
And there you have it👌👏 You can go ahead to install other relevant packages for your app.
Optional
- You can scaffold with a specific template by using
yarn create vite project-name -template react-tsor
#npm 6.x
npm init vite@latest project-name --template react-tsor
#npm 7+, extra double-dash is needed:
npm init vite@latest project-name -- --template react-ts
-Also, there are starter templates on GitHub you could use to get started too.
I hope you try it out too😊
Goodluck
