How to use Vite with React
Tags: vite, react, javascript, programming
Published: 2022-07-25 11:44:00


Hi guys, I am your captain on this ship, and I'll be showing you typical steps to take your dev server and bundling speed to a distance farther than Mars and faster than Space-X falcon 9.
 
Vite, pronounced /vit/[veet], a French word, is a frontend tool for web development. It is yet the fastest dev server that bundles your code with [Rollup](https://rollupjs.org/guide/en/) module, and can be used with different frameworks like Vue[js/ts], Vanilla[js/ts], Preact[js/ts], Svelte... but we'll talk about 
 react.js now. 
Just in case you wonder how fast it is in comparison with the native CRA[`create react app`], check out the [visual explanation _here_](https://twitter.com/amasad/status/1355379680275128321).
 
Vite uses `esbuild` for pre-bundling dependencies and reduces the number of browser requests as it is said to be a native ESM [ECMASCRIPT Module], so it handles the conversion of CommonJs to ESM. One fascinating thing about it is that it supports SSR, where it provides APIs to efficiently load and update ESM-based source code to Node.js during development. 
 
## Prerequisite 
If you want to enjoy this good stuff, you should at least have all of the following installed and a bit of familiarity on usage with...
 
1. **Node.js** package manager from at least version 14.18.0, or download [*here*](https://nodejs.org/en/download/).
2. **Yarn** package manager[my preference] from at least version 1.22.0 or download [*here*](https://classic.yarnpkg.com/lang/en/docs/install/#windows-stable)
3. Knows how to use HTML/CSS and a little bit of react.
 
##  Initialization 
Run the following command in your terminal
 
```
$ yarn create vite 
```

This command will configure the necessary tools to scaffold React applications in the local environment. 

This output will prompt you to set up your project.

![output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gnj4zxbuodiqgn0bhp6b.png)

You'll notice I saved my project name as `asap-vite-project`. Well, you can save it with any name of your choice.
 
After that, vite will prompt you to choose what framework you like. In this tutorial, you'll select react.js 
 
![output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/awvyowe5268sbm8ao14l.png)
 
Remember I mentioned you could use either Typescript or Javascript for vite; hence in the following prompt, we'll select `react because we are using Javascript language, not Typescript, for this tutorial.
 
![output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mwpqlknpgeh49s47x1wm.png)
 
As soon as we're done with that, vite is gonna scaffold the project, and it'll ask us to install our dependencies with yarn like so...
 
![output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r6bwrvp40uzdvgjnj5jm.png)

As directed above, we will navigate our current directory as so.

````
$ cd asap-vite-project
```

Then type `yarn` to install the required dependencies like so;

```
 $ yarn
```

This part is pretty much interesting, 
Now, after all these files are installed, tell me how long it took before it was completed. Mine says...
 
![output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/18igj2hs8fb85dpw552v.png) 
 
## Starting server
 
So the essential work has been done, and this step pretty much takes us to the primary usage part hence.
 

While still in the `asap-vite-project` directory run the following code

```
 $ yarn dev
``` 
What this command does is that it runs the project in development mode.
 
It'll yield this output...
 
![output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jxgftpsjhwb3a89ydpvt.png)
 
As indicated, go ahead and open your browser and search on your local browser the address specified; on mine, it runs on `http://localhost:5173/`
 
![output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gzs6e4uyy1ve4vh2xtda.png) 
 
## Conclusion 
![output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v8dhq5kuy202wx1z6wjy.png)  
 
And now you are fully in the ever blazing, faster than falcon 9 coding environment, and you can use your react app just like in any other yarn or npm application, except this is just in an elite mode...

And a big shout to my very smart guy [Lord Sarcastic ](https://dev.to/lordsarcastic)for inspiring me to write this piece[he writes awesome stuffs too. Also, big ups to you for taking a timeout on this tutorial, be free to share it with anyone it'll be of benefit to.

**Namaste!**