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
Head
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!