How to use Vite with React.js

Hi guys, I am your captain on this ship, and I’ll show you typical steps to take your dev server and bundle speed to a distance farther than Mars and faster than Space-X falcon 9.

Vite, pronounced /vit/[veet], is a French word and a frontend tool for web development. It is yet the fastest dev server that bundles your code with the Rollup 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.

Vite uses esbuild for pre-bundling dependencies and also reduce the number of browser requests as it is said to be a native ESM [ECMASCRIPT Module], and 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 should at least have all of the following installed and a bit of familiarity using…

1. Node.js package manager from at least version 14.18.0, or download here.
2. Yarn package manager[my preference] from at least version 1.22.0 or download here
3. Knows how to use HTML/CSS and a little bit of react.js.

Initialization

Run the following command in your terminal

$ yarn create vite

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

This output will prompt you to set up your project…

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.

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.

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…

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 attractive. Now, after all these files are installed, tell me how long it took before it is completed. Mine says…

Starting server

So the essential work has been done, and this step pretty much takes us to the central 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…

As indicated, go ahead and open your browser and search on your local browser for the address specified. On mine, it runs on http://localhost:5173/

Conclusion

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 for inspiring me to write this piece. Also, big ups for taking a timeout on this tutorial, be free to share it with anyone it’ll be of benefit to.

Namaste!