HTMX and firebase

[nbiro]

Hey there,

I'm still pretty new to htmx, and I'm trying to figure out how to set up a service that uses Firebase as the backend. I don't really want to mess with setting up a backend API, but I'm hoping to interact directly with Firestore and display the response on the client side using the client-side-templates extension. I know you can use the REST API directly, but they recommend against it, so I'm thinking of using the official JS library they provide.

Basically, I'm trying to:

• Trigger a JS function instead of using an AJAX method.
• Inside that JS function, work with Firebase and convert the data to JSON.
• Send the result back to the client-side-template extension to generate the content I want.

Any advice or pointers would be greatly appreciated!

PS:
I'm willing to implement a new extension if this is possible to do.

[believelody]

Hi, if you still struggle, I wanna say that many things are not directly related to htmx. To begin, try to make a simple poc with only nodejs and firebase. Once you ensure that you built a correct CRUD with your firebase, add your template view. I think a proper way of implementing this will be to make your request from htmx to your server and trigger a call to firebase from this endpoint.

Something like:

<button hx-get="/users" hx-swap="innerHTML" hx-target="#list">Fetch Users</button>

<ul id="list"></ul>

Then, in your controller / route file:

const route = app.router();

route.get("/users", async (req, res) => {
    // call to firebase with firestore or by fetch api
    // retrieving data in json
    return res.render("list-user", { ...context, users });
})