How to Install and Implement Trigger.dev on a Shopify Remix App Template

Mehmet Tekin

Mehmet Tekin

— 3 min read
How to Install and Implement Trigger.dev on a Shopify Remix App Template

If you need to run cron jobs or scheduled tasks in your Shopify app but don't have a dedicated backend server, Trigger.dev offers a convenient solution with its Trigger.dev Cloud. This service allows you to run scheduled tasks on a shared server, eliminating the need to manage your own backend infrastructure.

With Trigger.dev, you can automate essential processes like order management, data synchronization, and other periodic tasks seamlessly within your Shopify Remix app. This guide will walk you through the steps to install and implement Trigger.dev in your Shopify Remix app template.

Prerequisites

Before getting started, make sure you have:

  • Shopify Remix app template: You should already have a Shopify app using the Remix framework set up, along with a basic knowledge of Shopify CLI
  • Trigger.dev account: Set up a free account for a development account

With these in place, you're ready to take full advantage of Trigger.dev's serverless architecture to automate your Shopify app's scheduled tasks. Let's dive in!

1. Initialize Trigger.dev in Your Remix App

To get started, use the Trigger.dev CLI. This will add Trigger.dev to your existing project, create a /trigger folder, and provide an example task to get you going.

Run this command at the root of your project:

npx trigger.dev@beta init

This command will:

  1. Log you into the CLI if you're not already logged in.
  2. Create a trigger.config.ts file in the root of your project.
  3. Ask where you'd like to create the /trigger directory.
  4. Create the /trigger directory with an example task file, /trigger/example.[ts/js].
  5. Install the "Hello World" example task. We'll use this task to test the setup.

Additionally, to ensure everything runs smoothly, add the following to your package.json:

"postinstall": "prisma generate"

This ensures that Prisma generates the necessary files after your dependencies are installed.

2. Set Up a Scheduled Task in Your Remix App

Next, let's set up a scheduled task that manages Shopify orders by deleting old orders and initiating bulk order downloads.

Create a file named scheduledTask.js (or scheduledTask.ts if you're using TypeScript) in the /trigger directory, and add the following code:

import { schedules } from "@trigger.dev/sdk/v3";
import { deleteOldOrders } from "~/utils/bulk-operations/delete-old-orders";

import prisma from '../utils/db.server';

export const scheduledTask = schedules.task({
  id: "update-orders",
  run: async () => {
    const shops = await prisma.shop.findMany({
      select: {
        shop: true,
      },
    });

    for (const shop of shops) {
      await deleteOldOrders(shop.shop);
      console.log(`Cleaned up orders for shop ${shop.shop}`);

      console.log(`Orders deleted for ${shop.shop}`);
    }
  }
});

This task runs periodically, deletes old orders for each Shopify store in your database, and then initiates a bulk order download.

3. Running the Trigger.dev Development Server

With your scheduled task in place, it's time to run the Trigger.dev development server. This server watches for changes in your /trigger directory and communicates with the Trigger.dev platform to register your tasks, perform runs, and send data back and forth.

Run this command:

npx trigger.dev@beta dev

This command does the following:

  1. Starts a local server to run and test your tasks.
  2. Watches for changes in your /trigger directory.
  3. Communicates with Trigger.dev to keep everything in sync.
  4. Provides URLs for testing and viewing your tasks.

4. Performing a Test Run

Once your development server is running, visit the Test page URL provided in your terminal. You should see the "Example" task that was created during the initialization process.

  1. Select the "Example" task from the list.
  2. Most tasks have a "payload" that you can input in a JSON editor, but our example task doesn’t need any input.
  3. Press the "Run test" button to execute the task.

5. View Your Task Run

After running the test, you'll be directed to a run page that live-reloads to show the current state of the task.

Your terminal will also display the task status and provide links to the run log.

6. Configuring for Production

To ensure your tasks run seamlessly in production, you need to set up secrets in the Trigger.dev Cloud. This is essential for managing sensitive information like API keys and other credentials.

Once you’ve set up your secrets, Trigger.dev will be fully integrated into your production environment.

Final Thoughts

Integrating Trigger.dev into your Shopify Remix app can streamline complex workflows and enhance automation. Whether you're managing orders, sending notifications, or handling other background tasks, Trigger.dev offers a robust solution.

Personally, setting up Trigger.dev was a smooth experience. The CLI tools made initialization quick and painless, and the scheduled task feature is a powerful addition to any app.

If you're looking to boost your app's efficiency, give Trigger.dev a try. It's a tool that's well worth integrating into your development workflow.

Happy coding!

If you need further tweaks or additional sections, feel free to ask!

Read more