Installation | NestJS

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

Want to start from scratch?

This guide helps you install Compose into your existing NestJS codebase. If you're just exploring for now or prefer to start from scratch, you can also create a new Node.js project with the SDK and some starter apps.

1. Install the SDK

Use your package manager to install the Compose SDK. The SDK requires Node.js 16 or higher.

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

2. Add starter apps

The best way to integrate Compose is via a module that will contain all the Compose related code.

Create a compose folder in your codebase, and within it create two files: compose.module.ts and compose.service.ts

mkdir -p src/compose
touch src/compose/compose.module.ts
touch src/compose/compose.service.ts

compose.service.ts

Our service will contain the Compose client and starter apps. As you build more apps, you can break them out into separate files. Creating a service will also allow you to easily import other services and use them in your Compose apps.

import { Injectable, OnModuleInit } from '@nestjs/common';
import { Compose } from '@composehq/sdk';

// 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' },
];

@Injectable()
export class ComposeService implements OnModuleInit {
  // Hook into NestJS lifecycle to start the Compose client once all modules are loaded.
  onModuleInit() {
    const nav = new Compose.Navigation(['view-users', 'create-user']);

    const viewUsersApp = new Compose.App({
      route: 'view-users',
      navigation: nav,
      handler: ({ 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: ({ page, ui }) => {
        page.add(() => ui.header('Create User', { size: 'lg' }));
        page.add(() =>
          ui.form(
            'create-user-form',
            [ui.textInput('name'), ui.emailInput('email')],
            {
              onSubmit: (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 own Compose API key. Create a free account on Compose to get one.

compose.module.ts

Our module will register the service.

import { Module } from '@nestjs/common';
import { ComposeService } from './compose.service';

@Module({
  providers: [ComposeService],
  exports: [ComposeService],
})
export class ComposeModule {}

src/app.module.ts

Register the Compose module in your main file.

import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { ComposeModule } from './compose/compose.module';

@Module({
  imports: [ComposeModule],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}

3. Run your app

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

npm run start:dev # replace with the actual command

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.