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

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.

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.