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.