Simple Frontend development template

🚧 Structure

/root
 |- /project ... development
 |   |- /public ... static files
 |   |- /src ... js
 |   |   |- /styles ... css
 |   |- index.html ... entry point
 |- .node-version ... fix node versions
 |- tsconfig.json
 |- vite.config.json
 |- README.md

🚀 Build

$ npm run build

Output the building files to dist directory.

🐉 Development

Setup

$ cp .vscode/settings.json.sample .vscode/settings.json
$ cp .env.sample .env
$ npm install

⚡ Start dev server

$ npm run dev

Access http://localhost:3000/

✨ Format & lint

# format & lint
$ npm run format

Preview static site

You can check the built static site.

$ npm run preview

---

.env

To prevent accidentally leaking env variables to the client, only variables prefixed with VITE_ are exposed to your Vite-processed code. e.g. for the following env variables:

.env

VITE_SOME_KEY=123
DB_PASSWORD=foobar

Only VITE_SOME_KEY will be exposed as import.meta.env.VITE_SOME_KEY to your client source code, but DB_PASSWORD will not.

console.log(import.meta.env.VITE_SOME_KEY); // 123
console.log(import.meta.env.DB_PASSWORD); // undefined

cf. https://vitejs.dev/guide/env-and-mode.html#env-variables-and-modes

---

Multi-Page App

How to add a new page.
cf. https://vitejs.dev/guide/build.html#multi-page-app

1. Add HTML & Javascript in project

/project
+ |- /nested
+ |    |- index.html
+ |    |- nested.js ... entry point

2. Add build setting

vite.config.js

export default defineConfig({
  root: 'project',
  base: '/',
  publicDir: 'public',
  build: {
    outDir: '../dist',
    rollupOptions: {
      input: {
        main: join(PROJECT_DIR, 'index.html'),
+       nested: join(PROJECT_DIR, 'nested/index.html'),
      },
    },
  },