
Internal tools are a pain to build and maintain. Fortunately, [Retool](https://retool.com/) has helped tons of companies reduce the burden. Retool primarily focuses on building dashboards and forms and it integrates well with several databases and cloud APIs.

Often though, there are actions that your support or customer success team needs to perform that are too complex for Retool built-in features. You may have even written some of necessary code in your application, but you can't easily run it from Retool.

## The problem

Let's say you have an integration built in your application and you backend code imports a bunch of data from that third party. The third party API or your backend may have went down for a few hours and you may have missing data for certain user. When someone reaches out to support, you may need to re-run that import script to backfill the missing data.

{/* TBD diagram? */}

We're going to walk through how you can do this so your team can trigger important scripts right from your Retool app. This guide assumes you have a basic experience building forms with Retool (*If you don't, check out [this great guide](https://docs.retool.com/docs/create-forms-using-form-component)*).

## The plan

The goal is to enable your team to trigger a script anytime they click a button in Retool. To achieve this we will:

1. Create a Retool button that sends an event to Inngest
2. Write an Inngest function that uses our existing script
3. Configure that function to run when our event is received
4. See how it works end to end

## Sending an event from Retool

To send data from Retool, we'll need to set up a “[Resource](https://docs.retool.com/docs/resources)” first. On your Resources tab in Retool, click “Create New” then select “Resource.” Then select “Rest API.” Now jump over to the Inngest Cloud dashboard and create a new Source using the “Add Source” button and selecting “API” ([direct link](/test/sources/new?ref=retool-guide#API)). Copy your brand new key and in the Retool dashboard, prefix your key with the Inngest Source API URL and path: `https://inn.gs/e/`

```shell
https://inn.gs/e/<YOUR-COPIED-SOURCE-API-KEY>
```

Your new resource will look like this. When it does, click “Create resource.”

![Inngest Retool resource screenshot](/assets/guides/trigger-your-code-from-retool/retool-resource.png)

Now, let's head to the Retool app that you want to add the button form to. Let's say you have already built out the following form called `runBackfillForm` with a single input called `userId` and a submit button:

![Retool form screenshot](/assets/guides/trigger-your-code-from-retool/retool-form.png)

Next, create a new “Resource query” from the “Code” panel at the bottom left (use the + button). Let's name our new query `sendBackfillRequested` and select our new “Inngest” resource from the drop down. Update the “Action type” to a `POST` request. In the “Body” section, we need add the data that we want to send to Inngest. Inngest events require a name and some data as JSON. It's useful to prefix your event names to group them, here we'll call our event `"retool/backfill.requested"` and we'll pass the user id from the form and for future auditing purposes, the email of the current Retool user on your team:

```json
{ "user_id": "{{runBackfillForm.data.userId}}", "agent_id": "{{current_user.email}}" }
```

At the end, your resource query will look like this. Let's save it then click “Run” to test it.

![Retool resource query screenshot](/assets/guides/trigger-your-code-from-retool/retool-resource-query.png)

In the Inngest Cloud dashboard's “Events” tab, you should see a brand new `retool/backfill.requested` event. Click on the event and you should be able to select the payload that we just sent.

![Inngest Cloud dashboard view event payload](/assets/guides/trigger-your-code-from-retool/inngest-view-event-payload.gif)

Now that we've verified the data is sent over to Inngest, you can attach the resource query as an event handler to the submit button. Select the “Default” interaction type and click “+ Add” to select our resource query `sendBackfillRequested`. For fun, you can add an `isFetching` to show loading.

![Retool form submit button event handler](/assets/guides/trigger-your-code-from-retool/retool-resource-query.png)

We're halfway there - with this in place any agent from our team can trigger this event as needed.

## Writing our Inngest function

Using [the Inngest SDK](/features/sdk?ref=retool-guide) you can define your Inngest function and it's event trigger in one file. We'll create a directory called `inngest` in our project root:

```
mkdir -p inngest
```

Now we'll create a file in this directory for our function - `runBackfillForUser.js`. This will be our Inngest function which will import our existing backfill code, use the `user_id` from the event payload to run that code, and return a http status code in our response to tell Inngest [if it should be retried or not](/docs/reference/functions/retries?ref=retool-guide).


```js
// filename: ./inngest/runBackfillForUser.js
import { createFunction } from "inngest";
import { runBackfillForUser }  from "../lib/backfill-scripts";

export default createFunction(
  "Run backfill for user",     // The name displayed in the Inngest dashboard
  "retool/backfill.requested", // The event triggger
  async ({ event }) => {
    const result = await runBackfillForUser(event.data.user_id);
    return {
      status: result.ok ? 200 : 500,
      message: `Ran backfill for user ${event.data.user_id}`,
    };
  }
);
```

That's our function - we now just need to serve our function.

### Serving our function

There are different ways that you can have Inngest execute your functions:

1. You can serve the functions securely via HTTP with our framework-specific handlers
2. You can deploy them to a serverless function runtime with the Inngest CLI (_Coming soon!_)

For this guide, we'll focus on **the former** with an existing [Express.js](https://expressjs.com/) application. Inngest's default `serve` handler can be imported and passed to Express.js' `app.use` or `router.use`. You can get your Inngest signing key by visiting the Secrets tab in the Inngest dasboard ([direct link](https://app.inngest.com/secrets)).

```js
import { serve } from "inngest/express"
import runBackfillForUser from "../inngest/runBackfillForUser"

app.use("/api/inngest", serve("My API", process.env.INNGEST_SIGNING_KEY, [
  runBackfillForUser,
]))
// your existing routes...
app.get("/api/whatever", ...)
app.post("/api/something_else", ...)
```

## Deploying your function

By serving your functions via HTTP, you don't need to deploy your code to Inngest Cloud or set up a new deployment process. After you deploy your code, you need to visit the Inngest dashboard to register your endpoint and functions. This allows Inngest to discover and remotely execute your functions.

<aside>
  👉 You can read how to do this in <a href="/docs/deploy#registering-live-functions-with-inngest">our deployment docs here</a>.
</aside>

After registering your endpoint, your new funciton should appear in the Functions tab of the Inngest Cloud dashboard:

![Inngest Cloud dashboard view deployed function](/assets/guides/trigger-your-code-from-retool/inngest-deployed-function.png)

## Bringing it all together

Now that our code is pushed to production and we've set the secrets that we need, let's test it end to end.

![Retool submit form](/assets/guides/trigger-your-code-from-retool/retool-submit-form.gif)

And a few seconds later in the Inngest cloud dashboard:

![Inngest cloud dashboard view function output](/assets/guides/trigger-your-code-from-retool/inngest-view-function-output.gif)

Fantastic. We've now used our Retool form to trigger a backfill script on-demand with no infrastructure required to setup. Every time your support team needs to trigger this script, they can do it and ensure your users are happy.

## Over to you

You now know how to get some existing code from your application shipped to Inngest and triggered right from Retool with a full audit trail of who triggered it, for what user and full logs. There was no need to set up a more complex infrastructure with a queue or new endpoint on your production API - Just push your code to Inngest and send an event from Retool - done and dusted.


Trigger your code directly from Retool

Bringing it all together

Deploying your function

Over to you

Sending an event from Retool

The plan

The problem

Serving our function

Writing our Inngest function

Guides

Inngest works with RedwoodJS out of the box, and allows you to write background jobs, scheduled functions, and event-driven systems using <a href="https://redwoodjs.com/docs/serverless-functions">RedwoodJS Serverless Functions</a>.

Follow along to learn how to:

1. Strictly type your functions
2. Serve your functions with a new API route
3. Write functions with RedwoodJS
4. Register your functions with Inngest after deploying

## Strictly typing functions

Inngest fully types every event you send, ensuring that your functions and data are always
valid. To generate your type library, run:

```
npx inngest-cli@latest types ts -o ./api/src/__generated__/inngest.ts
```

This will prompt you to log in to your Inngest account, then generate types for every event
in your account (plus public events) inside the `api/src/__generated__/` folder.

## Serve functions

<a href="https://redwoodjs.com/docs/serverless-functions">RedwoodJS Serverless Functions</a> are created in the `api/src/functions/` directory. In order to keep our dependencies clean, this means we'll bundle all Inngest functions in to `api/src/inngest/.

First, let's create our handler function. This is the entry point for all Inngest functions, and will be called by Inngest when an event is triggered.

```ts
// api/src/functions/inngest.ts
import { serve } from 'inngest/redwood'

export const handler = serve('My RedwoodJS App', [])
```

Great! We should now be able to run our dev server using `yarn rw dev` and see our local SDK UI at http://localhost:8910/inngest.
<aside>
  <p>The location to access your functions is dictated by the <code>web.apiUrl</code> setting in your <code>redwood.toml</code> file. See <a href="https://redwoodjs.com/docs/serverless-functions#developing-locally">Serverless Functions - Developing Locally | RedwoodJS Docs</a> for more information.</p>
</aside>
Some RedwoodJS configurations require that functions are accessed via `/.redwood/functions/functionName` in dev. If you want to follow this pattern, you can provide a `servePath` argument to the `serve` function:

```ts
export const handler = serve('My RedwoodJS App', [], {
  servePath: '/.redwood/functions/inngest',
})
```

## Write functions

Now that we have our handler, let's create our first function. We'll use a simple `helloWorld` function.

```ts
// api/src/inngest/helloWorld.ts
import { createFunction } from 'inngest'

export default createFunction('Hello World', 'demo/event.sent', () => {
  return {
    message: `Hello, World!`,
  }
})
```

This function will be triggered when an event with the `demo/event.sent` type is sent to Inngest. It will return a `message` property with the value `Hello, World!`.

Let's add this to our handler:

```ts
import { serve } from 'inngest/redwood'

import helloWorld from 'src/inngest/helloWorld'

export const handler = serve('My RedwoodJS App', [helloWorld])
```

Now, when we run our dev server, we should see our function listed in the Inngest UI.

For more information on writing functions, see the <a href="https://www.inngest.com/docs/functions">Writing Functions</a> section of the Inngest docs.

## Register functions

When you deploy your application, Inngest needs to know _where_ your applicaiton is running so it can call your functions. You can "register" your app in a couple of ways:

### Registering automatically

Use one of our officially supported integrations which will automatically notify Inngest whenever you've deployed updated functions:

<div className="button-container">
  <a href="/docs/deploy/vercel?ref=docs-deploy" className="button button--guide">
    <img src="/assets/brand-logos/vercel-dark.svg" className="logo" alt="Vercel deployment documentation"/>
    Learn how to install our official Vercel integration →
  </a>
  <a href="/docs/deploy/netlify?ref=docs-deploy" className="button button--guide">
    <img src="/assets/brand-logos/netlify-dark.svg" className="logo" alt="Netlify deployment documentation"/>
    Learn how to install our official Netlify plugin →
  </a>
</div>

### Registering manually

If you're deploying your appliction to another platform, you can register your app [via the Inngest UI](/docs/deploy#registering-via-the-ui) or [via our API with a curl request](/docs/deploy#registering-via-the-api).
