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