API

The app/api folder is for adding data to your app. To pass data to a page create a file with the same name as an existing file in your project’s app/pages folder. Meaning app/api/index.mjs will supply data to app/pages/index.html

Create an API route

Create an api route that passes data to your index.html page.

app
├── api ............... data routes
│   └── index.mjs
└── pages ............. file based routing
    └── index.html

Return some data

Return hard-coded data from app/api/index.mjs to get started

export async function get(req) {
  return {
    json: {
      message: 'Hello from your api route!'
    }
  }
}
🙌

Your api routes get called before your page so that state is available at render time.

Create a display element

Create app/elements/my-message.mjs to display your hard-coded data

app
├── api ............... data routes
│   └── index.mjs
├── elements .......... custom element pure functions
│   └── my-message.mjs
└── pages ............. file based routing
    └── index.html

Show store data

Access your data from the state store

export default function MyMessage({ html, state }) {
  const { store } = state
  const { message='' } = store

  return html`<p>${message}</p>`
}

Add your element

Add your <my-message></my-message> element to your app/pages/index.html

<my-message></my-message>

Your local site should automatically refresh with your API’s message (but if not, it will after a refresh).

That’s it

You now know how to pass data to your pages. You can start with hard-coded data to get going then progress to storing and retrieving data from your apps database when the need arises.

💾

Community Resources

GitHub
Visit Enhance on GitHub.
Discord
Join our Discord server to chat about development and get help from the community.