Rollout Project

A Rollout Project is a Typescript project in which you define the Rollout Connector to your app, as well as to any other apps for which Rollout does not yet provide a pre-built Connector.

Rollout Project Template#

To get started, you can clone the Rollout Project Template from GitHub. The template contains an example project that illustrates a range of Rollout functionality and can be used as a starting point for creating your project.

Directory Structure#

This is the directory structure of the Rollout Project Template:

├── apps
│   ├── index.ts
│   └── my-app
│       ├── actions
│       │   ├── index.ts
│       │   └── my-action
│       │       ├── action.ts
│       │       ├── input.ts
│       │       └── ui.tsx
│       ├── auth.ts
│       ├── http.ts
│       ├── icon.svg
│       ├── index.ts
│       └── triggers
│           ├── index.ts
│           ├── my-trigger
│           │   ├── input.ts
│           │   ├── payload.ts
│           │   ├── trigger.ts
│           │   └── ui.tsx
│
│
│
├── index.ts
├── package.json
├── tsconfig.json
└── yarn.lock

Project Configuration#

The index.ts file should export a config object which specifies the Connectors that your project exposes, as well as where to send data about the Automations your users create.

The config object is created using the setupRollout function from the Rollout Framework.

Managing Dependencies#

You can use any Node.js modules to develop your Rollout project. Rollout projects use yarn@3 to manage dependencies. You can find basic yarn usage here.

The package.json file specifies your project's dependencies. To add a module as a new dependency, you install it with the command yarn add. The yarn.lock file is managed by yarn and provides additional version information for reproducible builds. This file should be checked into your Rollout Project, but you shouldn't need to modify it yourself.

Typescript Configuration#

The tsconfig.json file is where you can specify the Typescript settings of your project. You can find more information on the tsconfig file here, but the file provided in the project template should be a good default.

Defining Connectors#

You'll define Connectors in the apps directory, which contains an index.ts file and a subdirectory for each Connector.

The index.ts file exports the Connectors that your project exposes:

import { app as myApp } from "./my-app";

export const myApps = {
  ["my-app"]: myApp,
};

The property names of the exported myApps object (in this case, just "my-app") are the appKeys used to identify the Connectors exposed by your project.

Each Connector is defined within a subdirectory of the apps directory.

The icon.svg file is used as the icon for the Connector's app within Rollout UI components.

The index.ts file of the Connector exports the Connector's app definition by making a call to the defineApp function of the Rollout framework:

import { defineApp } from "@rollout/framework";

import { actions } from "./actions";
import { http } from "./http";
import { triggers } from "./triggers";

export const app = defineApp({
  name: "My App",
  auth: false,
  http,
  triggers,
  actions,
});

The app definitions specifies:

• The name of the App as it should be displayed to users in the Rollout UI (e.g. "Slack" or "Salesforce")
• Auth: How will user credentials be provided to Rollout in order to communicate with your app's API?
• HTTP Request Handling: It can be useful for Connectors to handle HTTP requests for things like populating dropdowns in Rollout UI Components
• Triggers: What types of events does your app expose that can start an Automation?
• Actions: What types of operations can be triggered in your app when an Automation is triggered?

You'll find more details on specifying Auth, HTTP request handling, Triggers, and Actions in subsequent sections.