sbbs-vanilla-starter

Create a minimal multi-page HTML/CSS/JS website starter with a small build system powered by esbuild.

This package provides a CLI:

• create-sbbs-vanilla-starter

Quick start

npx sbbs-vanilla-starter my-app

# or (directly via the bin name)
npx create-sbbs-vanilla-starter my-app

cd my-app
npm install
npm run dev

What you get

• src/*.html pages copied to dist/ (dev) and minified (prod build)
• CSS bundled from src/css/base.css to dist/css/base.css
• JS bundled from src/js/main.js to dist/js/main.js
• Static assets copied from src/assets/ to dist/assets/
• A placeholder __ASSET_BASE_URL__ you can use in HTML that gets replaced at build time
• A simple dev server (port 3000) with live reload

CLI usage

npx sbbs-vanilla-starter <project-name>

Notes:

• The CLI will create a folder named <project-name> in your current directory.
• If the folder already exists, the CLI exits.

Generated project commands

From inside the generated project directory:

• npm run dev
  • Builds into dist/
  • Starts a dev server at http://localhost:3000
  • Watches src/ and triggers live reload
• npm run build:local
  • Uses NODE_ENV=local
  • Loads .env.local
• npm run build:prod
  • Uses NODE_ENV=production
  • Loads .env.production

Environment variables

The build reads NODE_ENV and loads the matching env file:

• NODE_ENV=local loads .env.local
• NODE_ENV=production loads .env.production

Required variable for builds:

• ASSET_BASE_URL

Example .env.local:

ASSET_BASE_URL=./assets

Wherever you use __ASSET_BASE_URL__ in HTML, it will be replaced with the value of ASSET_BASE_URL.

Build output

Builds produce:

• dist/*.html
• dist/css/base.css
• dist/js/main.js
• dist/assets/**

License

MIT