Integrating a Fragment

Integrating a Fragment into your project is a straightforward process. There are two main integration points for a Fragment: server-side and client-side. This page contains framework-specific integration details.

A complete guide to integrating a Fragment is available on the previous page:

User Quick Start

Learn how to integrate a Fragment into your codebase.

Fragno Configuration

Every Fragno Fragment can be configured with several built-in options:

Prop

Type

These options can be configured at the frontend integration point, and are relevant when mounting the backend route in a non-standard location.

Fragment-specific Configuration

Most Fragments will also require some configuration specific to them. Check the documentation for the specific Fragment you are integrating to figure out what configuration is required.

Reference

Full-stack Frameworks

Next.js

app/api/example-fragment/[...all]/route.ts

import { toNextJsHandler } from "@fragno-dev/core/next-js";
import { createExampleFragmentInstance } from "@/lib/example-fragment-server";

export const { GET, POST, PUT, PATCH, DELETE } = toNextJsHandler(createExampleFragmentInstance());

React Router v7 / Remix

Note that in Remix, the file location might be different, as well as the Route type import.

app/routes/api/example-fragment.tsx

import type { Route } from "./+types/example-fragment";
import { createExampleFragmentInstance } from "@/lib/example-fragment-server";

export async function loader({ request }: Route.LoaderArgs) {
  return await createExampleFragmentInstance().handler(request);
}

export async function action({ request }: Route.ActionArgs) {
  return await createExampleFragmentInstance().handler(request);
}

Astro

src/pages/api/example-fragment/[...all].ts

import { createExampleFragmentInstance } from "@/lib/example-fragment-server";
import { toAstroHandler } from "@fragno-dev/core/astro";

export const { ALL } = toAstroHandler(createExampleFragmentInstance().handler);
export const prerender = false;

SvelteKit

routes/api/example-fragment/[...path].ts

import { createExampleFragmentInstance } from "@/lib/example-fragment-server";
import { toSvelteHandler } from "@fragno-dev/core/svelte-kit";

export const { GET, POST, PUT, PATCH, DELETE } = toSvelteHandler(createExampleFragmentInstance());
export const prerender = false;

Nuxt

server/api/example-fragment/[...all].ts

import { createExampleFragmentInstance } from "@/lib/example-fragment-server";

export default fromWebHandler(createExampleFragmentInstance().handler);

Server-side Frameworks

Hono

index.ts

import { Hono } from "hono";
import { createExampleFragmentInstance } from "@/lib/example-fragment-server";

const app = new Hono();
app.all("/api/example-fragment/*", (c) => createExampleFragmentInstance().handler(c.req.raw));

Node.js

The toNodeHandler function is defined in a separate npm package:

npm install @fragno-dev/node

When using Node.js without a framework, it is important to only handle the request when the request URL starts with the Fragment's mount route.

index.ts

import { createServer } from "node:http";
import { createExampleFragmentInstance } from "@/lib/example-fragment-server";
import { toNodeHandler } from "@fragno-dev/node";

const server = createServer((req, res) => {
  const exampleFragment = createExampleFragmentInstance();

  if (req.url?.startsWith(exampleFragment.mountRoute)) {
    const handler = toNodeHandler(exampleFragment.handler);
    return handler(req, res);
  }

  // ... Your route handling
});

Express

server.js

import express from "express";
import { createExampleFragmentInstance } from "@/lib/example-fragment-server";
import { toNodeHandler } from "@fragno-dev/node";

const app = express();
app.all("/api/example-fragment/*", toNodeHandler(createExampleFragmentInstance().handler));

// WARNING! If you're using the Express json middleware, make sure that it's mounted AFTER the
// Fragment handler.
app.use(express.json());

app.listen(3000);

Integrating a Fragment

User Quick Start

On this page