Source code: https://github.com/mochamadboval/multipage-vite-vanilla-js
Main Configuration
Create a Vite Vanilla JavaScript project.
npm create vite@latest multipage-vite-vanilla-js -- --template vanilla
cd multipage-vite-vanilla-js
npm i
Customize the project folder structure as follows.
|- node_modules/
|- src/
|- assets/
|- img/
|- javascript.svg
|- js/
|- counter.js
|- public/
|- vite.svg
|- index.html
|- main.js
|- style.css
|- .gitignore
|- package-lock.json
|- package.json
Since the index.html
is no longer in the main project folder, the npm run dev
cannot be executed. Therefore, create a vite.config.js
file and set the new root path to the src
folder. This only applies when the npm run dev
and npm run build
commands are executed.
// vite.config.js
export default {
root: "./src",
};
Make some adjustments as follows and move the CSS import method to HTML.
// ./src/main.js
import { setupCounter } from "./assets/js/counter";
import viteLogo from "/vite.svg";
import javascriptLogo from "./assets/img/javascript.svg";
document.querySelector("#app").innerHTML = `
<div>
...
...
<a href="/about">About</a> |
<a href="/blog/article">Article</a>
</div>
`;
setupCounter(document.querySelector("#counter"));
<!-- ./src/index.html -->
<title>Vite App</title>
<link rel="stylesheet" href="/style.css" />
</head>
Now you can execute npm run dev
command. However, when running npm run build
the dist
folder will be created in the src
folder. To move it out of that folder add the following configuration.
// vite.config.js
export default {
root: "./src",
build: {
outDir: "../dist",
emptyOutDir: true,
},
};
You can still use the npm run preview
command to run the dist
folder because root: "./src"
does not affect it (it still points to the main project folder).
Next, let's create about.html
in the src
folder and article.html
in the blog
folder.
<!-- ./src/about.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>About | Multipage Vite Vanilla JavaScript</title>
<link rel="stylesheet" href="/style.css" />
</head>
<body>
<div>
<h1>About page.</h1>
</div>
</body>
</html>
<!-- ./src/blog/article.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Article | Multipage Vite Vanilla JavaScript</title>
<link rel="stylesheet" href="/style.css" />
</head>
<body>
<div>
<h1>Article page.</h1>
</div>
</body>
</html>
Then, add the following configuration so that both files are also created in the dist
folder.
// vite.config.js
export default {
root: "./src",
build: {
outDir: "../dist",
emptyOutDir: true,
rollupOptions: {
input: {
index: "./src/index.html",
about: "./src/about.html",
article: "./src/blog/article.html",
},
},
},
};
Now the project is successfully multipage.
However, you might have noticed that you need to add a new path in input
every time you create a new HTML file. If you want this to work dynamically, let's install the glob
package and add the following configuration.
npm install -D glob
// vite.config.js
import { sync } from "glob";
export default {
...
build: {
...
rollupOptions: {
input: sync("./src/**/*.html".replace(/\\/g, "/")),
},
},
};
Things that can be improved and added:
'404 Not Found' page
When you write the wrong url, the page displayed is the main page. You can make it show the default 'Not Found' page.
// vite.config.js
export default {
appType: "mpa",
root: "./src",
...
If you deploy the project to Netlify, you can easily redirect the default 'Not Found' page to our own 404 page.
Create 404.html
in the src
folder and _redirects
file (without extension) in the public
folder.
<!-- ./src/404.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Page not found | Multipage Vite Vanilla JavaScript</title>
<link rel="stylesheet" href="/style.css" />
</head>
<body>
<div>
<h1>Page not found.</h1>
</div>
</body>
</html>
// ./src/public/_redirects
/* /404.html 200
Minify HTML
You can minify all HTML files during the build process using this plugin (let me know if I can do it without the plugin).
npm install -D vite-plugin-minify
// vite.config.js
...
import { ViteMinifyPlugin } from "vite-plugin-minify";
export default {
plugins: [ViteMinifyPlugin()],
appType: "mpa",
...
Create Path Aliases
// vite.config.js
...
import { resolve } from "path";
export default {
resolve: {
alias: {
"@js": resolve(__dirname, "src/assets/js"),
},
},
plugins: [ViteMinifyPlugin()],
...
// ./src/main.js
import { setupCounter } from "@js/counter";
import viteLogo from "/vite.svg";
...
To enable auto-suggestion in the text editor (VS Code), create a jsconfig.json
file and add this configuration.
// jsconfig.json
{
"compilerOptions": {
"paths": {
"@js/*": ["./src/assets/js/*"]
}
}
}
Install TailwindCSS
You can follow the official documentation.
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
};
// poscss.config.js
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
/* ./src/style.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
root: {
...
To automatically sort TailwindCSS classes when using Prettier, you can follow this documentation.
npm install -D prettier prettier-plugin-tailwindcss
// .prettierrc
{
"plugins": ["prettier-plugin-tailwindcss"]
}
Hope it helps you :)
Source:
Top comments (4)
this is great
Thank you :)
Beautiful! Thanks, Mochamad!
So glad you liked it :)