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