APIs

The app/api folder is for adding data to your app. To pass data to a page and its elements, create a file with the same name as an existing file in your project’s app/pages folder. For example, 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.

Mastodon

Follow Enhance in the Fediverse. We're huge fans of the IndieWeb!