In this tutorial, we will be focusing on building a multi-page application using Vite, a build tool that provides instant server start-up and fast hot module replacement. Multi-page applications are used when you need to have multiple HTML pages with their own unique content and functionality while sharing the same assets like stylesheets, scripts, and images.
To start off, make sure you have Node.js installed on your machine. You can download it from https://nodejs.org/. Once you have Node.js installed, you can install Vite globally by running the following command in your terminal:
npm install -g create-viteNext, create a new Vite project by running the following command in your terminal:
create-vite my-multi-page-appReplace my-multi-page-app with the name of your project. Once the project has been created, navigate to the project directory by running:
cd my-multi-page-appNext, we will create the structure for our multi-page app. Inside the src directory, create a new folder called pages. Inside the pages folder, create two HTML files: index.html and about.html. These files will represent the two pages of our application.
Now, let’s create the entry points for our pages. In the src/pages directory, create two JavaScript files: index.js and about.js. These files will serve as the entry points for our corresponding HTML pages.
In your index.js file:
console.log('This is the index page');And in your about.js file:
console.log('This is the about page');Now, we need to configure Vite to build our multi-page application. Open the vite.config.js file in the root of your project and update it with the following configuration:
import { defineConfig } from 'vite';
export default defineConfig({
build: {
rollupOptions: {
input: {
index: './src/pages/index.js',
about: './src/pages/about.js',
},
},
}
});This configuration tells Vite to build two separate entry points for our two HTML pages.
Now, we need to update our HTML files to include the bundled scripts for each page. In your index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page</title>
</head>
<body>
<h1>Welcome to the Home Page</h1>
<script type="module" src="/src/pages/index.js"></script>
</body>
</html>And in your about.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Page</title>
</head>
<body>
<h1>About Us</h1>
<p>Learn more about our company here.</p>
<script type="module" src="/src/pages/about.js"></script>
</body>
</html>Finally, start your Vite development server by running:
npm run devOpen your browser and navigate to http://localhost:3000/index.html to view the home page of your multi-page application. You can also visit http://localhost:3000/about.html to view the about page.
Congratulations! You have successfully built a multi-page application using Vite. You can now add more pages to your application by following a similar setup. Happy coding!
Hi thanx a lot! It helped me in understanding how to build MPA with Vue, but I have an issue, when in each page.js I try to mount vue.app it always switches to homepage no matter what I do
what if i have multi js files?
Thanks. You helped me a lot.
i have 3 html, should i just add in the vite.config.js the root?
Thank you Igor. This video really helped me.
this video is very useful! Thanks a lot!
I using bootstrap.js on my project but after I build it, the bootstrap did not compile inside the dist. Since my structure is actualy consist of 4 html pages, I expect that it should be bundle with then page, but it not compile. is there any problem with my config or problem on my importation of JavaScript?
Should this work OK with URL parameters? Once I upload to my host, I get some weird behaviour if say for example I use /login/index.html?option=something … the service worker seems to want to load the content from the index at root instead.
а да еще лайк и подписка
спасибо тебе за видео, осваиваю vite vanilla js и это мне очень помогло ! Подскажи например я хочу сделать папку pages в которой хранить все страницы кроме главной. Но при это я не хочу отображать в браузере путь basic/pages/about а хочу просто показівать basic/about . Как быть ? или только через какие то библиотеки роутинга ?
Nice video, let me understand, so I could give an example of having my component like this
Dasboard.jsx
dasboard.styles.js (styled-components
and have my files generated
hasboard.html
dasboard.styles
How would I have the separation then in this example
to have dashboard.html, dasboard.css and dasboard.js, this
It would be very interesting because I would have greater organization
of generating the file rather than making a control for PWA, but
I wouldn't know how the separation would be done when programming
Since I thesis I have two files Dasboard.jsx, and dasboard.styes.js (styled-components.
Thank you
very helpful…👍
when i define a login function inside script and use it in html page like : onclick="login()" …… it says login is not defined. #help