Structure

Enhance projects are set up to enable you to create dynamic multi-page applications with as little friction as possible. They come 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
├── components ........ single file web components
│   └── my-card.mjs
├── elements .......... custom element pure functions
│   └── my-header.mjs
├── pages ............. file-based routing
│   └── index.html
└── head.mjs .......... custom <head> component

The head.mjs file is responsible for composing your document’s <head> tag, and all the contents within it. The default head comes preloaded with a few useful meta tags and the styles generated by Enhance Styles. You can (and should!) customize this to your liking.

🤖

Pages

The pages folder enables file-based routing. To add a route just add an HTML file to this directory (or another directory within it). The name of the file will be the URL you view it at. For example, app/pages/about.html will be viewed at /about.

📃

Elements

The elements folder is where you keep your Enhance Elements. These are custom element templates that get rendered server side and set your HTML page up 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 — for example <my-header></my-header>.

🔥

Components

The components folder is where you keep your single file web components. These components are rendered server-side, but also include client-side code for additional interactivity. This allows you to add progressive enhancements to your component in one file.

Components follow the same rule as Elements and must be named with one or more words separated by a dash my-card.mjs which corresponds to the tag name you author in your HTML pages — for example <my-card></my-card>.

🧱

API

The api folder is preconfigured to expose data to your file-based routes. For example, 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/. For example, 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.

🦄

Public

The public folder is preconfigured to serve fingerprinted static assets such as CSS files, scripts, images, and more. If your application relies on these sorts of static assets, this is the place to put them!

🚚

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!