ContextQMD
Back to Novu

Remix

docs/framework/quickstart/remix.mdx

3.18.03.2 KB
Original Source

In this guide, we will add a Novu Bridge Endpoint to a Remix application and send our first test workflow.

<Steps> <Step> ## Set up your local environment

Start the Local Studio by running:

bash
npx novu dev

The Local Studio will be available at http://localhost:2022. This is where you can preview and test your workflows.

</Step>
<Step> ## Install packages

Install the Novu Framework package:

bash
npm install @novu/framework

This package provides all the necessary tools to build and manage your notification workflows.

</Step>
<Step> ## Add a Novu API Endpoint This guide is based on Remix Offical [Quick Start](https://remix.run/docs/en/main/start/quickstart). 
    ```typescript app/routes/api.novu.ts

    const handler = serve({
        workflows: [testWorkflow]
    });

    export { handler as action, handler as loader };
    ```
</Step>
<Step>
    ## Configure your secret key

Add your Novu secret key to your environment variables:

bash
NOVU_SECRET_KEY=your_secret_key

</Step>
<Step>
    ## Create your workflow definition
    Add a `novu` folder in your app folder as such `app/novu/workflows.ts` that will contain your workflow definitions.
ts
import { workflow } from '@novu/framework';

export const testWorkflow = workflow('test-workflow', async ({ step }) => {
  await step.email('test-email', async () => {
    return {
      subject: 'Test Email',
      body: 'This is a test email from Novu Framework!',
    };
  });
});

</Step>
<Step>
    ## Start your application
    To start your Remix server with the Novu Endpoint configured, run the following command:

    ```bash
    cd my-novu-app && npm run dev
    ```

    Remix application default port is 5173. For that to work, restart Novu Studio and point it to the right port:

    ```bash
    npx novu@latest dev --port <YOUR_REMIX_APPLICATION_PORT>
    ```
</Step>
<Step>
    ## Test your endpoint

Test your workflow by triggering it from the Local Studio or using the Novu API:

bash
curl -X POST https://api.novu.co/v1/events/trigger \
  -H 'Authorization: ApiKey YOUR_API_KEY' \
  -H 'Content-Type: application/json' \
  -d '{
    "name": "my-workflow",
    "to": "subscriber-id",
    "payload": {}
  }'

You should see the notification being processed in your Local Studio.

</Step>
<Step>
    ## Deploy your application

Deploy your application to your preferred hosting provider. Make sure the /api/novu endpoint is accessible from the internet.

For local development and testing, you can use tools like ngrok to expose your local server to the internet.

</Step>
</Steps>

Now that you have your first workflow running, you can: