FULL-STACK WEB DEVELOPMENT BOOTCAMP
2024 COHORT SIGNUPS END TOMORROW
I’ve been using Vite lately as “the new create-react-app”.
What is Vite?
It can be confusing because there are a lot of tools that are doing the same thing but differently like Parcel, esbuild, Rollup, Rome, webpack, Turbopack (look, I’m trying to get the capitalization right)… and I tend to think they more or less do the same thing even though they’re not.
But when people started using Vite for a lot of stuff, and I kept reading about it on Twitter, then I got curious.
I tried it, and I like it.
Vite brands itself as a “next generation frontend tool”.
I think this is the #1 reason for its speed, a radical change in how build tools behave.
Here’s a summary of what Vite gives you:
- a scaffolding tool for many popular libraries and frameworks, like React
- a development server with hot module replacement (HMR)
- a build tool to create the production version of your code
Interestingly Vite uses Rollup internally, so it’s not a replacement for Rollup - it’s built on top of it.
It also uses SWC, the next-generation faster Babel.
Basically your application code is compiled into individual ES Modules and shipped to the browser. Interestingly Vite is not a bundler. We’re used to using bundlers to create the final version of our code, but Vite does not do that.
Instead it “sends each module directly to the browser. This means the browser does the hard work of handling dependencies between modules.” as I found on the Turbopack comparison page.
I find Vite very user friendly, and I think it’s been a good move for its adoption.
You can initialize a new project using Vite with this command:
npm create vite@latest
This starts a new
Give the project a name, that will be used for its folder name.
If you write a name that’s not a valid folder / package name (e.g. it contains spaces) it will prompt for a valid folder / package name.
Then you get to choose a framework:
Now depending on what you choose, from now on you’ll have different options:
Here’s the project files Vite created:
package.json is now configured to use Vite to run the project. But see, we don’t have a
In the terminal, go into the folder and run
Next you can run
npm run dev and Vite is running:
This is a quick way to spin up a Web Server that is already configured to use ES modules.
Same if you choose React, Vite initializes a simple React example app with modern standards: