Quick Start

Welcome!

Enhance is an HTML-first full-stack web framework that gives you everything you need to build standards-based multi-page web apps that perform and scale. Enhance apps and their elements are server-side rendered for incredible performance and seamless progressive enhancement.

Video walkthrough

Powered by <mux-player>

Get started

To create a project, ensure you have Node.js 16.x or higher installed, and run:

npx "@enhance/cli@latest" new ./myproject -y

After setup is complete, run the following commands to install deps, and start the local dev server:

cd myproject
npm install
npm start

Index route

Once your app starts up, navigate to http://localhost:3333. The source for the index page can be found in your app at app/pages/index.html.

app
└── pages ............. file-based routing
    └── index.html

Add a route

Add a new route at the "/about" URL by creating a new file called about.html in the pages folder at app/pages/about.html

You can add something like this:

Hello world, I am <em>very</em> <strong>excited</strong> to meet you.

Reload the app, and navigate to http://localhost:3333/about to see your new page in action!

Reuse code with custom elements

Add an "elements" folder to your app at app/elements.

Your project should now look like this:

app
├── elements .......... HTML custom element pure functions
└── pages ............. file-based routing
    ├── about.html
    └── index.html

Add a pure function that returns an HTML string. Your function will be passed an object containing an html render function for expanding custom elements.

Add a my-header.mjs file in the app/elements/ folder. Notice that we’re using a two-word-or-more name for our custom element.

The contents of my-header.mjs should look like this:

export default function MyHeader({ html }) {
  return html`
    <header>
      <h1>Header</h1>
      <nav>
        <a href=/>home</a>
        <a href=/about>about</a>
      </nav>
    </header>
  `
}

Your project should now look like this:

app
├── elements .......... custom element pure functions
│   └── my-header.mjs
└── pages ............. file-based routing
    ├── about.html
    └── index.html

Modify app/pages/about.html to include your new custom element header:

<my-header></my-header>
Hello world, I am <em>very</em> <strong>excited</strong> to meet you.

Reloading your app will show the new header with working navigation to and from “/about”.

That’s it

You are off to a great start! You now know how to add routes, pages, and elements.


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!