Vite JS Tutorial: Configuring Public Directory 🎯

Welcome to the Vite JS Tutorial! In this comprehensive lesson, we'll dive into one of the essential aspects of Vite, a modern JavaScript build tool. We'll walk you through configuring the public directory, perfect for beginners and intermediates. Let's get started! 📝

What is Vite?

Vite is a lightning-fast front-end development tool that combines the power of ESBuild, Rollup, and Webpack to provide an optimized, quick, and hassle-free development experience. It's an excellent choice for modern JavaScript projects, as it drastically reduces the build time compared to traditional solutions. 💡

Understanding the Public Directory

The public directory in Vite is where the output of our project gets built and served. This is the location from which our static assets, such as HTML, CSS, JavaScript, and images, are accessible when we run our application locally or deploy it to a production environment. 📝

Setting up the Project

To get started, first, make sure you have Node.js installed on your machine. Next, create a new project using Vite:

bash

npm init @vitejs/app my-app

Navigate into the project directory:

bash

cd my-app

Now, let's take a look at our project structure:

my-app/
  - node_modules/
  - src/
    - index.html
    - main.js
  - dist/
  - vite.config.js
  - package.json

For our tutorial, we'll focus on the src and dist directories, as well as the vite.config.js file.

Configuring the Public Directory (dist)

By default, Vite serves our files from the dist directory when we run npm run dev or vite. This is the public directory for our project. Let's see an example of how it works.

Example 1: Simple HTML and JavaScript

Create a new HTML file in the src directory:

html

<!-- src/hello.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hello, World!</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <script src="/main.js"></script>
  </body>
</html>

Update src/main.js with the following content:

javascript

// src/main.js
document.querySelector('h1').innerHTML = 'Hello, CodeYourCraft!';

Now, run the development server:

bash

npm run dev

Navigate to http://localhost:5000 in your browser, and you'll see the updated HTML content. The main.js script has been executed, and the text has been replaced with "Hello, CodeYourCraft!".

📝 Note: Vite automatically updates the browser when you save a file, making the development process fast and seamless.

Example 2: Static Assets

Let's add an image to our example:

html

<!-- src/hello.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hello, World!</title>
  </head>
  <body>
    <h1>Hello, CodeYourCraft!</h1>
    <img src="/logo.png" alt="Logo" />
    <script src="/main.js"></script>
  </body>
</html>

Assuming you have a logo.png image in the src directory, Vite will handle serving it when you run the development server.

Quiz

That's it for this lesson on configuring the public directory in Vite. In the next lesson, we'll explore more advanced features of Vite, such as hot module replacement and building for production. Stay tuned! 🎯