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.