basefyio + Remix: Database Backend with Loaders and Actions

Install

npm install basefyio-js

Create a server client

// app/basefyio.server.ts
import { createClient } from "basefyio-js";

export const bf =createClient({
  projectId: process.env.BASEFYIO_PROJECT_ID!,
  apiKey: process.env.BASEFYIO_ANON_KEY!,
});

Keep the client in a .server file so keys never reach the browser. Use a service key only for trusted operations.

Load data in a route

// app/routes/posts.tsx
import { bf } from "~/basefyio.server";
import { useLoaderData } from "@remix-run/react";

export async function loader() {
  const { data } = await bf.from("posts").select("id, title");
  return { posts: data ?? [] };
}

export default function Posts() {
  const { posts } = useLoaderData<typeof loader>();
  return <ul>{posts.map((p) => <li key={p.id}>{p.title}</li>)}</ul>;
}

Frequently asked questions

Where should the basefyio client live in Remix?

In a .server file so it's never bundled to the browser. Loaders and actions import it for data access.

How do I handle auth in Remix?

Authenticate with bf.auth and persist the session in a Remix cookie session, validating it in loaders and actions.

Other integrations