Vite config: plain html + vanilla-js

prettierrc.js

module.exports = {
    trailingComma: 'es5',
    tabWidth: 4,
    semi: false,
    singleQuote: true,
}

utils_bundler.ts

import path from 'path'
import { getHtmlFiles } from './fs'

export async function getHtmlEntries(src = 'src') {
    const files = await getHtmlFiles(src)

    return files.reduce((prev, record) => {
        const merged = Object.assign(prev, record)

        Object.entries(merged).forEach(([key, value]) => {
            merged[key] = path.resolve(process.cwd(), src, value)
        })

        return merged
    }, {})
}

// getHtmlEntries().then((res) => console.log({ entries: res }))

utils_fs.ts

import { readdir } from 'fs/promises'
import path from 'path'
/*
 * @usage
 * const getHtmlFiles = getFilesByExt("html")
 * getHtmlFiles(resolve(process.cwd(), "src"))
 *    .then(files => console.log({files}))
 */
export function getFilesByExt(
    ext: string
): (src: string) => Promise<Record<string, string>[] | undefined> {
    return async function getFiles(src: string) {
        try {
            const files = await readdir(src, { encoding: 'utf-8' })
            const extFmt = `.${ext}`

            return files
                .filter((file) => path.extname(file) === extFmt)
                .map((file) => ({
                    [path.basename(file, extFmt)]: file,
                }))
        } catch (error) {
            console.log({ error })
        }
    }
}

export const getHtmlFiles = getFilesByExt('html')

vite-nunjucks-plain.md

pnpm create vite MY_APP -- --template vanilla && pnpm add -D vite-plugin-nunjucks @types/node eslint prettier

vite-plain-html.md

Vite configuration for plain HTML with vanilla JavaScript and Nunjuck templating

Project folder file structure:

  - src/
      - scripts/
      - styles/
      - layouts/
      - public/
      - img/
      - fonts/

Etrypoints

HTML

Main entrypoints in *.html files (generated by getHtmlEntries())

JavaSript

To include js just add script tag to desired *.html

CSS

Just import to desired *.js

vite.config.js

import { defineConfig } from 'vite'
import nunjucks from 'vite-plugin-nunjucks'
import path from 'path'
import { getHtmlEntries } from './utils/bundler'

export default defineConfig(async () => {
    return {
        root: 'src',
        build: {
            rollupOptions: {
                input: await getHtmlEntries(),
            },
            outDir: path.resolve(__dirname, 'dist'),
        },
        resolve: {
            alias: {
                src: path.resolve(process.cwd(), 'src'),
                scripts: path.resolve(process.cwd(), 'src/scripts'),
                styles: path.resolve(process.cwd(), 'src/styles'),
            },
        },
        plugins: [
            nunjucks({
                templatesDir: path.resolve(process.cwd(), 'src'),
            }),
        ],
    }
})