Remix

Get started with Novu Framework in a Remix application

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

1. Set up your local environment

   Start the Local Studio by running:

   npx novu dev
   

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

2. Install packages

   Install the Novu Framework package:

   npm install @novu/framework
   

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

3. Add a Novu API Endpoint

   This guide is based on Remix Offical Quick Start.

   app/routes/api.novu.ts

   
   const handler = serve({
       workflows: [testWorkflow]
   });
   
   export { handler as action, handler as loader };
   
4. Configure your secret key

   Add your Novu secret key to your environment variables:

   .env

   NOVU_SECRET_KEY=your_secret_key
   
5. Create your workflow definition

   Add a novu folder in your app folder as such app/novu/workflows.ts that will contain your workflow definitions.

   app/novu/workflows.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!',
       };
     });
   });
   
6. Start your application

   To start your Remix server with the Novu Endpoint configured, run the following command:

   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:

   npx novu@latest dev --port <YOUR_REMIX_APPLICATION_PORT>
   
7. Test your endpoint

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

   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.

8. 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.

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

• Learn about Workflow Controls to expose no-code editing capabilities
• Explore different Channel Steps like Email, SMS, Push, and more
• Set up Action Steps like Delay and Digest
• Check out our React Email integration for building beautiful email templates