Installation | Fastify

Create internal apps directly in your Fastify codebase with the Compose SDK. This guide will get you started with two starter apps in ~3 minutes.

1. Install the SDK

Use your package manager to install the Compose SDK.

npm install @composehq/sdk
# or
yarn add @composehq/sdk
# or
pnpm add @composehq/sdk

2. Add starter apps

Create a new file in your codebase, e.g. compose.ts.

# From your project root
touch src/compose.ts

Then add the following starter code into the file:

import { Compose } from "@composehq/sdk";

const nav = new Compose.Navigation(["view-users", "create-user"])

// For demo purposes. In a real app, you'd use your actual database.
const dbUsers = [
    { name: "John Doe", email: "john@doe.com" },
    { name: "Jane Smith", email: "jane@smith.com" },
]

const viewUsersApp = new Compose.App({
    route: "view-users",
    navigation: nav,
    handler: async ({ page, ui }) => {
        page.add(() => ui.header("View Users", { size: "lg" }))
        const users = [...dbUsers] // fake database call
        page.add(() => ui.table("users-table", users));
    }
})

const createUserApp = new Compose.App({
    route: "create-user",
    navigation: nav,
    handler: async ({ page, ui }) => {
        page.add(() => ui.header("Create User", { size: "lg" }))
        page.add(() => ui.form(
            "create-user-form",
            [
                ui.textInput("name"),
                ui.emailInput("email")
            ],
            {
                onSubmit: async (form) => {
                    dbUsers.push({ name: form.name, email: form.email });
                    page.toast("User created successfully", { appearance: "success" });
                    page.link("view-users");
                }
            }
        ))
    }
})

const composeClient = new Compose.Client({
    apiKey: "API_KEY_HERE", // replace with your own API key
    apps: [viewUsersApp, createUserApp]
});

export { composeClient };

Replace API_KEY_HERE with your own Compose API key. Create a free account on Compose to get one.

3. Start the Compose Client

In the main entry point of your project, e.g. index.ts, import the Compose Client that you exported in the previous step and initialize it:

import { composeClient } from "./compose";

// ...

fastify.listen({ port: 3000 }, (err, address) => {
  if (err) {
    fastify.log.error(err);
    process.exit(1);
  }
  fastify.log.info(`server listening on ${address}`);
  composeClient.connect();
});

4. Run your app

Run your app's normal dev command. Compose will automatically connect in the background.

npm run dev

You should see your apps come online in the Compose web dashboard.

Next steps

1. Replace dbUsers with real database calls.
2. Go through Compose's core concepts to quickly become productive with the SDK.
3. Join the Discord community to ask questions and talk to the core team.