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

Start with simple .html files for your app’s custom elements. Your custom elements will be automatically expanded when their tags are used in your pages.

ℹ️

Beginning with simple HTML elements helps get an app off the ground and gives a great baseline for enhancement.
Converting to dynamic .mjs is an easy upgrade when needed! Further docs cover that in more detail.

Create a my-header.html 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.html should look like this:

<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 elements
│   └── my-header.html
└── 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!