Introduction to Vite
Vite is a next-generation frontend build tool that focuses on speed and simplicity. It leverages native ES modules for development, allowing you to start your web projects almost instantly. Compared to older tools like Webpack, Vite offers a more streamlined development experience with instant hot module reloading and a faster build process. In this guide, we'll walk through the steps of setting up a basic project using Vite.
Prerequisites
Before diving into the setup, ensure you have the following installed on your machine:
- Node.js (v12 or above): Vite requires Node.js to run. You can download it from nodejs.org.
- npm (Node Package Manager): It comes bundled with Node.js, so if you have Node.js installed, you should have npm as well.
You can verify your installation by running the following commands in your terminal:
node -v npm -v
If both commands return a version number, you’re ready to go!
Step 1: Create a New Project
Using npm, you can create a new project folder easily. Open your terminal and run this command:
npm create vite@latest my-vite-project
Here, replace my-vite-project with your desired project name. This command will set up a new Vite project in a folder named my-vite-project.
Step 2: Choose a Framework
During the setup process, you'll be prompted to choose a framework. Vite supports various frameworks like Vue, React, and Svelte. For this guide, let’s choose vanilla for a plain JavaScript project. The process will look something like this:
? Select a framework: » - Use arrow-keys. Return to submit.
vanilla
vue
react
preact
lit
svelte
...
Select vanilla and press Enter.
Step 3: Install Dependencies
Next, navigate into your project directory:
cd my-vite-project
Now, install the necessary dependencies by running:
npm install
This command will set up Vite along with any other required packages for your project.
Step 4: Run Your Development Server
Once the installation is complete, you can start the development server:
npm run dev
Vite will start up a local development server, usually running at http://localhost:5173. Open this URL in your browser, and you should see a welcome page confirming your Vite setup!
Step 5: Project Structure and File Explanation
After setting up, you'll notice a few critical files and folders in the project:
-
index.html: This is the entry point for your application. Vite uses this file to load your JavaScript and CSS.
-
src/: This directory contains your source code. Vite works with modules here.
-
vite.config.js: This is Vite’s configuration file, where you can customize builds, plugins, and more.
-
package.json: Contains scripts for running, building, and serving your project as well as lists of project dependencies.
Step 6: Making Your First Change
To see Vite's instant updates in action, open the src/main.js file in your code editor. You might see something like:
console.log('Hello Vite!');
Change it to:
console.log('Hello, Vite is up and running!');
Save the file, and watch as the browser reflects the change instantly without refreshing the page, thanks to Vite’s Hot Module Replacement (HMR).
Step 7: Build Your Project for Production
When you’re ready to create a production build of your project, execute the following command:
npm run build
This command will produce a dist/ folder which contains your optimized production files.
Step 8: Preview Your Production Build
Before deploying, you might want to test the production build locally. Run:
npm run serve
This will host the production build locally, and you can check it out by navigating to http://localhost:4173. It's a great way to ensure everything is functioning as expected before going live.
Conclusion
In just a few simple steps, you've set up a functional project using Vite! The versatility and efficiency of Vite can significantly improve your frontend development workflow, making it a valuable tool in your arsenal. Now you can start adding features, functionality, and design to your Vite project, unearthing the full potential of what Vite can do for your development process.