DEV Community

Cover image for Getting Started with vite: 3 easy commands😮 and save your time.
Mwenedata Apotre
Mwenedata Apotre

Posted on

Getting Started with vite: 3 easy commands😮 and save your time.

So, recently I moved to using vite in creating my apps from the famous create-react-app package that also does the same job. So Why? Why basically did I migrate to vite.

So the thing is , since I've started working with react I used create-react-app and whenever I was going to start a coding session in an app that I created using create-react-app I would start the server as usual and wait for a long time, usually 2 - 5 minutes waiting for the server to start. Can you imagine 5 minutes 😮? There were times where the spirit that I was having to code would drown during that period or I would just scroll into social media for few other minutes due to those 5 minutes delays. My friends kept recommending using vite but as it is in human nature I would resist to that change even though it was for the good. Cutting short the story, I once created an app using vite and I was blown away with just how fast and concise vite is . So me show you how you can start a vite project.

  1. Open up your command prompt or terminal in the folder where you want the project to be located : I'm using cmd: Image description Run the command : npm create vite or yarn create vite : I'm using yarn but it also works perfectly with npm run npm create vite Press Enter then enter the name of the project: Enter the name of the project Press Enter use the arrow-down key to select the react as the library but you can choose your own it depends : Choose the library or framework to uses Then specify whether you are going to use react or react-ts(react with TypeScript basically) : react or react-ts I am going to use react , So: chose react Then after pressing Enter , BOOM!!: The project is all set up: finished setting up the project

Next as the CLI indicates change the directory to the folder app:
cd first-vite-app
change directory to first-vite-app
Then After:
yarn to install the dependencies in the package.json
run yarn
And finally where the magic happens and why I like vite:
yarn dev or yarn run dev since I used yarn (But you can also use npm instead).
run yarn dev screen

Then server just takes a matter of milliseconds to start, so time saving🔥.

And if we go to the link provided we should see:
look of the initial template of vite in browser

So, thank you for reading this far!! Can't wait to see what you build with vite🔥 and if the post helped please like and leave a comment and don't forget to share to your fellow developers who need it.
See you in the next one 👋👋

Top comments (0)