Getting Started with vite: 3 easy commands😮 and save your time.
Tags: webdev, vite
Published: 2022-07-22 18:29:11


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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sx41ty2dufrkwzjrqtcn.png)
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f6npk0g2tu4wlgxz1w4a.png)
Press **Enter**
then enter the name of the project:
![Enter the name of the project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a6k24rgpbtsidmx4162c.png)
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pkjz7d40pm0xy1crepc8.png)
Then specify whether you are going to use **react** or **react-ts**(react with TypeScript basically) :
![react or react-ts](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ysp4fu9hdnp08cd6m6hh.png)
I am going to use react , So:
![chose react](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lvhwkmg3nfn8lsjwj9cq.png)
Then after pressing **Enter** , BOOM!!:
The project is all set up:
![finished setting up the project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1jau10i6jcoymh8964yf.png)

Next as the CLI indicates change the directory to the folder app:
 `cd first-vite-app`
![change directory to first-vite-app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lgwoj4tua05frc0dvs2c.png) 
Then After:
`yarn` to install the dependencies in the package.json
![run yarn ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hqujrczq6omo1yr2oa83.png)
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iikeyz37omeppy7xwuxk.png)
 

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ijt6whnpwn1y0bmajd1h.png)

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** 👋👋