--- title: Multipage Vite Vanilla JavaScript published: true description: Let's make your Vite Vanilla JavaScript project support multiple pages. tags: vite, javascript, tailwindcss # cover_image: https://direct_url_to_image.jpg # Use a ratio of 100:42 for best results. # published_at: 2024-07-20 20:57 +0000 --- > Source code: https://github.com/mochamadboval/multipage-vite-vanilla-js ## Main Configuration Create a Vite Vanilla JavaScript project. ``` sh 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. ``` js // vite.config.js export default { root: "./src", }; ``` Make some adjustments as follows and move the CSS import method to HTML. ``` js // ./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 = `

... ... About | Article

`; setupCounter(document.querySelector("#counter")); ``` ``` html Vite App ``` 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. ``` js // 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. ``` html About | Multipage Vite Vanilla JavaScript

About page.

``` ``` html Article | Multipage Vite Vanilla JavaScript

Article page.

``` Then, add the following configuration so that both files are also created in the `dist` folder. ``` js // 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. ``` sh npm install -D glob ``` ``` js // 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. ``` js // 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. ``` html Page not found | Multipage Vite Vanilla JavaScript

Page not found.

``` ``` // ./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). ``` sh npm install -D vite-plugin-minify ``` ``` js // vite.config.js ... import { ViteMinifyPlugin } from "vite-plugin-minify"; export default { plugins: [ViteMinifyPlugin()], appType: "mpa", ... ``` ## Create Path Aliases ``` js // vite.config.js ... import { resolve } from "path"; export default { resolve: { alias: { "@js": resolve(__dirname, "src/assets/js"), }, }, plugins: [ViteMinifyPlugin()], ... ``` ``` js // ./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. ``` json // jsconfig.json { "compilerOptions": { "paths": { "@js/*": ["./src/assets/js/*"] } } } ``` ## Install TailwindCSS You can follow [the official documentation](https://tailwindcss.com/docs/installation/using-postcss). ``` sh npm install -D tailwindcss postcss autoprefixer npx tailwindcss init ``` ``` js // tailwind.config.js /** @type {import('tailwindcss').Config} */ export default { content: ["./src/**/*.{html,js}"], theme: { extend: {}, }, plugins: [], }; ``` ``` js // poscss.config.js export default { plugins: { tailwindcss: {}, autoprefixer: {}, }, }; ``` ``` css /* ./src/style.css */ @tailwind base; @tailwind components; @tailwind utilities; root: { ... ``` To automatically sort TailwindCSS classes when using Prettier, you can follow [this documentation](https://github.com/tailwindlabs/prettier-plugin-tailwindcss). ``` sh npm install -D prettier prettier-plugin-tailwindcss ``` ``` // .prettierrc { "plugins": ["prettier-plugin-tailwindcss"] } ``` Hope it helps you :) Source: - https://vitejs.dev/guide/#scaffolding-your-first-vite-project - https://vitejs.dev/guide/build.html#multi-page-app - https://stackoverflow.com/a/66877705 - https://github.com/isaacs/node-glob - https://www.npmjs.com/package/vite-plugin-minify

mochamadboval

Multipage Vite Vanilla JavaScript

Join Our Newsletter. No Spam, Only the good stuff.