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.
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.
If you want to enjoy this good stuff should at least have all of the following installed and a bit of familiarity using…
- Node.js package manager from at least version 14.18.0, or download here.
- Yarn package manager[my preference] from at least version 1.22.0 or download here
- Knows how to use HTML/CSS and a little bit of react.js.
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.
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
yarn to install the required dependencies like so
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…
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
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.