Installation | New Node.js Project

While Compose is designed to help you build internal apps on top of your existing codebase, you can always create a fresh project if you prefer to start from scratch.

This guide will walk you through creating a new Node.js project with the Compose SDK installed in ~3 minutes.

Quick Install

1. Clone the starter repo

The Node.js starter repo is a barebones Node.js project that comes with TypeScript and the Compose SDK installed.

git clone https://github.com/compose-dev/compose-node-starter.git
cd compose-node-starter

2. Install dependencies

npm install

3. Add your API key

Replace API_KEY_HERE in src/index.ts with your Compose API key. Create a free account on Compose to get an API key.

4. Run the app

npm run dev

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

Manual Install

Prefer to install manually without the starter repo? Read here.

Create a project directory

mkdir compose && cd compose

Initialize the project, and set the project type to module to enable modern JavaScript import/export syntax.

npm init -y && npm pkg set type=module

Install the Compose SDK

npm install @composehq/sdk

If you're using TypeScript, install the TypeScript compiler and tsx, which we'll use to run our app during development.

npm install --save-dev typescript tsx

Create a new file called app.ts (or app.js) and paste the following starter code:

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 client = new Compose.Client({
    apiKey: "API_KEY_HERE", // replace with your own API key
    apps: [viewUsersApp, createUserApp]
});

client.connect();

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

Finally, run your project's dev command, e.g:

# TypeScript
npx tsx --watch src/index.ts

# JavaScript
node --watch src/index.js

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.