Unbuild 🪴

A template for build- and bundle-free web apps

Optimized for prototyping and small side projects where simplicity and ease of development are important to keep them fun, and the problems solved by complex toolchains—automated testing, enforcing code style, highly optimized production code, etc.—aren't as big of a concern.

Unbuild lets you enjoy many of the conveniences of modern SPA development with (almost) none of the complexity:

• ⚛️ Vue support with templates and composition API
• 🚀 Works with any static file server, no npm or build process required
• 📦 Import external ESM and CSS dependencies from CDNs via Import Maps
• 🌍 Use The Platform™ - relies on established or polyfillable standards

Getting started

The easiest way to start a new project is to fetch the template folder using degit:

mkdir app-name
cd app-name
npx degit https://github.com/andreasphil/unbuild

You'll need a HTTP server for serving the project during development, since features such as JavaScript modules are not supported by the file protocol. Any server will do, though you might want one that routes any non-file request to index.html if you use a router such as vue-router. I like servor:

# --browse launches a browser, --reload reloads when files change
npx servor --browse --reload

Files & folders

• assets/: This is where you should keep your static assets such as favicons, images, and the like.
• scripts/: For application scripts. app.js is imported by index.html and should serve as the entrypoint for the application.
• styles/: For stylesheets. styles.css is imported by index.html and should serve as the entrypoint for the application.
• index.html: Entrypoint to the SPA. Use the import map for declaring external dependencies and aliases.
• jsconfig.json: Enables some minimal editor support such as aliases and automatic type checking.
• LICENSE.md and README.md: Replace these with your stuff.

Development workflow

• Editor: I recommend Visual Studio Code, because it has features such as linting and formatting included out of the box. The es6-string-html extension additionally provides highlighting for templates. I also prefer the prettier extension to the default formatter.

• Dependencies: The most convenient way to use external dependencies is to link them in the import map in index.html from a CDN such as unpkg, jsDelivr, or esm.sh. All of them should give you access to almost any NPM module.

  • jsDeliver also allows you to hotlink files from GitHub repositories. Just make sure to link the ESM version.
  • JSPM has a convenient import map generator that's worth a try.

• Aliases: You can simplify local imports by mapping certain paths to aliases in the import map. Unbuild comes pre-configured with ./scripts/ aliased to $/.

• Type checking: // @ts-check in combination with JSDoc comments can do basic type checking. To learn more: TypeScript, Minus TypeScript on CSS-Tricks

• Deployment: No node_modules or build process means you can literally just drop your project folder on any static file server that has an IP, and your app is ready. I like Netlify Drop.