Vite / Vite and Vanilla JavaScript
Setting Up a JS/Vite Project
In this tutorial, you will learn how to set up a JavaScript project with Vite. This includes initializing a new project, installing Vite, and creating the necessary configuration …
Section overview
5 resourcesExplains how to use Vite in a project with just JavaScript (no framework)
Introduction
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:
- Initialize a new JavaScript project
- Install and configure Vite
- Understand the basics of the Vite configuration
Prerequisites:
- Basic knowledge of JavaScript
- Node.js and npm installed on your machine
Step-by-Step Guide
-
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.jsonfile: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.htmlfile in the project root:bash touch index.htmlOpen
index.htmland 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
srcdirectory and amain.jsfile within it:bash mkdir src && touch src/main.jsOpen
src/main.jsand paste the following code:javascript console.log('Hello, Vite!') -
Configure the package.json
In the
package.jsonfile, 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 }
Code Examples
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.
Summary
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.
Practice Exercises
-
Modify the
main.jsfile 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!
Need Help Implementing This?
We build custom systems, plugins, and scalable infrastructure.
Related topics
Keep learning with adjacent tracks.
Popular tools
Helpful utilities for quick tasks.
Latest articles
Fresh insights from the CodiWiki team.
AI in Drug Discovery: Accelerating Medical Breakthroughs
In the rapidly evolving landscape of healthcare and pharmaceuticals, Artificial Intelligence (AI) in drug dis…
Read articleAI in Retail: Personalized Shopping and Inventory Management
In the rapidly evolving retail landscape, the integration of Artificial Intelligence (AI) is revolutionizing …
Read articleAI in Public Safety: Predictive Policing and Crime Prevention
In the realm of public safety, the integration of Artificial Intelligence (AI) stands as a beacon of innovati…
Read articleAI in Mental Health: Assisting with Therapy and Diagnostics
In the realm of mental health, the integration of Artificial Intelligence (AI) stands as a beacon of hope and…
Read articleAI in Legal Compliance: Ensuring Regulatory Adherence
In an era where technology continually reshapes the boundaries of industries, Artificial Intelligence (AI) in…
Read article