In this tutorial, we will explore how to set up a JavaScript project with Vite. Vite provides a faster and leaner development experience for modern web projects. It offers features like instant server start, hot module replacement, and optimized builds.
By the end of this tutorial, you'll be able to:
Prerequisites:
Initialize a new project
Open your terminal and navigate to the directory where you want to create your project. Run the following command to create a new directory and initialize it with a package.json file:
bash
mkdir my-vite-project && cd my-vite-project
npm init -y
Install Vite
Now we need to install Vite. We'll add it as a dev dependency to our project:
bash
npm install --save-dev vite
Create and configure Vite
Create an index.html file in the project root:
bash
touch index.html
Open index.html and paste the following code:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<script type="module" src="/src/main.js"></script>
</body>
</html>
Now create a src directory and a main.js file within it:
bash
mkdir src && touch src/main.js
Open src/main.js and paste the following code:
javascript
console.log('Hello, Vite!')
Configure the package.json
In the package.json file, add the following scripts:
json
"scripts": {
"dev": "vite", // starts the dev server
"build": "vite build", // builds your project for production
"serve": "vite preview" // locally previews the production build
}
Example 1: Running the project
After setting up the project, you can run it using the command:
npm run dev
This will start the development server. You should see 'Hello, Vite!' in your browser console.
Example 2: Building the project
To build the project for production, run:
npm run build
This will create an optimized version of your project in the dist/ directory.
In this tutorial, we've learned how to set up a JavaScript project with Vite. We created a new project, installed Vite, and configured it to run our JavaScript code.
Next steps include exploring more advanced Vite features, like its plugin system, and integrating with other tools like Vue or React.
Modify the main.js file to display a greeting on the webpage instead of the console.
Create a new JavaScript file that exports a function. Import and use this function in main.js.
Try to integrate a simple Vue or React application with your Vite setup.
Remember, the best way to learn is by doing. Keep practicing and exploring new features of Vite. Happy coding!