Structure

The Enhance starter project is set up to enable you to create dynamic multi-page applications with as little friction as possible. It comes preconfigured with everything you need to work with file-based routing and standards-based components.

app
├── api ............... data routes
│   └── index.mjs
├── browser ........... browser JavaScript
│   └── index.mjs
├── elements .......... custom element pure functions
│   └── my-header.mjs
└── pages ............. file-based routing
    └── index.html

Pages

The pages folder enables file-based routing. To add a route just add an HTML file. The name of the file will be the URL you view it at. Meaning app/pages/about.html will be viewed at /about.

📃

Elements

The elements folder is where you keep your single-file components. These are custom element templates that get rendered server side and set-up your HTML page for progressive enhancement.

Elements must be named with one or more words separated by a dash my-header.mjs which corresponds to the tag name you author in your HTML pages <my-header></my-header>.

🔥

API

The api folder is preconfigured to expose data to your file-based routes. Meaning the file app/api/index.mjs will automatically pass state to app/pages/index.mjs as well as expose an endpoint for standard REST verbs like get and post.

🪄

Browser

The browser folder is preconfigured to output a bundle to be used when progressively enhancing your pages in the browser. Files in app/browser are bundled to /public/browser/. Meaning app/browser/index.mjs will be bundled with any imported dependencies to /public/browser/index.mjs and available to be loaded by a script tag at /_public/browser/index.mjs.

🦄

Community Resources

GitHub
Visit Enhance on GitHub.
Discord
Join our Discord server to chat about development and get help from the community.
Mastodon
Follow Enhance in the Fediverse. We're huge fans of the IndieWeb!