Kind of self explanatory. Inside a server endpoint and now I want to take a variable and expose it to a .astro template and render the response using that as a parameter. How to do it?
#How to render .astro component from server endpoint
red otter
red otter
Incidentally, I'm just rendering an HTML fragment that uses HTMX. Very simple:
// src/components/TodoItem.astro
import { deleteTodo, getTodos } from '../services/todo';
export interface Props {
todo: { id: number; text: string; completed: boolean };
}
const { todo } = Astro.props;
<li class="todo-item" id={todo-${todo.id}}>
{todo.text} {todo.completed ? ' (Completed)' : ''}
<button
class="delete-button"
hx-delete={/api/todos/${todo.id}}
hx-target="closest .todo-item"
hx-swap="outerHTML">
Delete
</button>
</li>
And I want to do something like so on the endpoint:
import { AstroContainer } from 'astro/container';
// Create TodoItem ...
const container = await AstroContainer.create();
return new Response(todoListHTML, { // Return the HTML as the responsei
body: await container.renderToString(TodoItem),
status: 200,
headers: { 'Content-Type': 'text/html' }, // Important: set Content-Type to text/html
});
Which at present gives this error: Cannot read properties of undefined (reading 'create') on this call: AstroContainer.create();
eternal cradle
The exported class for it is experimental_AstroContainer
red otter
OK. I finagled what I needed using a .astro file as my endpoint ... not ideal but functional
Writing up an article about astrojs + htmx
interesting because using server-side template views is like basic bread and butter for most backend stacks but astrojs with its pedigree as a front-end container is kind of just moving into that area