Vite JS Tutorial: Multi-Page Application Setup 🌐

Welcome back to CodeYourCraft! Today, we're diving into setting up a multi-page application using Vite JS. Let's get started!

What is a Multi-Page Application (MPA)? 📝

An MPA is a type of web application that consists of multiple, independent HTML pages. Each page can be loaded separately, allowing users to navigate through different sections of the application. MPAs are common in web applications with complex structures, such as e-commerce websites or content management systems.

Why Use Vite for MPAs? 💡

Vite is a modern build tool for front-end development. It offers faster development experience, smaller bundle sizes, and seamless integration with popular frameworks. In this lesson, we'll use Vite to set up an MPA, focusing on its benefits and best practices.

Setting Up a New Project ✅

To start, let's create a new Vite project:

bash

npm init vite my-multi-page-app

Replace my-multi-page-app with the name of your project.

Creating Multiple Pages 🎯

In Vite, each page can be treated as a separate entry point. To create a new page, you'll need to create a new JavaScript file with a special naming convention:

Replace <page-name> with the name of your page, e.g., home or about.
The corresponding HTML file should have the same name, but with a .html extension, e.g., home.html.

Here's an example for a home page:

bash

- src
  - components
    - HelloWorld.js
  - home
    - index.js
    - index.html

home/index.js

javascript

// Import the HelloWorld component
import HelloWorld from './components/HelloWorld.js';

// Create a new Vue component for the home page
export default {
  components: {
    HelloWorld,
  },
  setup() {
    return {
      message: 'Welcome to the Home Page!',
    };
  },
};

home/index.html

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>
  </head>
  <body>
    <div id="app">
      <!-- Render the HelloWorld component -->
      <HelloWorld :message="message" />
    </div>
  </body>
</html>

📝 Note: Replace <HelloWorld> with the actual tag name generated by Vite for the HelloWorld component.

Building and Serving the Application 💡

To build and serve the application, use the following command:

bash

npm run dev

Now you can navigate to http://localhost:3000 in your browser to see your MPA in action!

Quiz 📝

Stay tuned for more advanced concepts in Vite JS! Happy coding! 🚀