Courrier

Integrate Courrier with Strapi

Courrier logo

Why Use Courier?

Courier offers several standout features:

  • Multi-channel delivery supporting seamless content publishing across various channels.
  • Customizable templates that can be tailored for specific use cases.
  • Centralized management allowing efficient and secure content delivery.
  • Scalable infrastructure enabling independent scaling of front-end and back-end components.
  • Real-time tracking useful for applications such as real-time chat functionalities.

For implementation details and API references, check the official Courier documentation.

Why Use Strapi?

Strapi is the leading open-source headless CMS offering features, like customizable APIs, role-based permissions, multilingual support, etc. It simplifies content management and integrates effortlessly with modern frontend frameworks.

Explore the Strapi documentation for more details.

Strapi 5 Highlights

The out-of-the-box Strapi features allow you to get up and running in no time:

  1. Single types: Create one-off pages that have a unique content structure.
  2. Draft and Publish: Reduce the risk of publishing errors and streamline collaboration.
  3. 100% TypeScript Support: Enjoy type safety & easy maintainability
  4. Customizable API: With Strapi, you can just hop in your code editor and edit the code to fit your API to your needs.
  5. Integrations: Strapi supports integrations with Cloudinary, SendGrid, Algolia, and others.
  6. Editor interface: The editor allows you to pull in dynamic blocks of content.
  7. Authentication: Secure and authorize access to your API with JWT or providers.
  8. RBAC: Help maximize operational efficiency, reduce dev team support work, and safeguard against unauthorized access or configuration modifications.
  9. i18n: Manage content in multiple languages. Easily query the different locales through the API.
  10. Plugins: Customize and extend Strapi using plugins.

Learn more about Strapi 5 feature.

Setup Strapi 5 Headless CMS

We are going to start by setting up our Strapi 5 project with the following command:

πŸ–οΈ Note: make sure that you have created a new directory for your project.

You can find the full documentation for Strapi 5 here.

Install Strapi

npx create-strapi-app@latest server

You will be asked to choose if you would like to use Strapi Cloud we will choose to skip for now.

 Strapi   v5.6.0 πŸš€ Let's create your new project

To deploy your project, create a new project on the Strapi Cloud dashboard.

? Please log in or sign up. 
  Login/Sign up 
❯ Skip 

After that, you will be asked how you would like to set up your project. We will choose the following options:

? Do you want to use the default database (sqlite) ? Yes
? Start with an example structure & data? Yes <-- make sure you say yes 
? Start with Typescript? Yes
? Install dependencies with npm? Yes
? Initialize a git repository? Yes

Once everything is set up and all the dependencies are installed, you can start your Strapi server with the following command:

cd server
npm run develop

You will be greeted with the Admin Create Account screen.

003-strapi-5.png

Go ahead and create your first Strapi user. All of this is local so you can use whatever you want.

Once you have created your user, you will be redirected to the Strapi Dashboard screen.

004-strapi-5.png

Publish Article Entries

Since we created our app with the example data, you should be able to navigate to your Article collection and see the data that was created for us.

005-strapi-5.png

Now, let's make sure that all of the data is published. If not, you can select all items via the checkbox and then click the Publish button.

Strapi Articles Published

Enable API Access

Once all your articles are published, we will expose our Strapi API for the Articles Collection. This can be done in Settings -> Users & Permissions plugin -> Roles -> Public -> Article.

You should have find and findOne selected. If not, go ahead and select them.

007-strapi-5.png

Test API

Now, if we make a GET request to http://localhost:1337/api/articles, we should see the following data for our articles.

008-strapi-5.png

πŸ–οΈ Note: The article covers (images) are not returned. This is because the REST API by default does not populate any relations, media fields, components, or dynamic zones.. Learn more about REST API: Population & Field Selection.

So, let's get the article covers by using the populate=* parameter: http://localhost:1337/api/articles?populate=*

vuejs strapi integration - api request.png

Getting Started with Courier

Connecting Courier with Strapi equips your content management system with powerful notification capabilities across multiple channels. Here's how to set it up from scratch.

Installing Courier and Adjusting Settings

Add the Courier SDK to your Strapi project:

npm install @trycourier/courier

Strapi allows integrations with various communication platforms. For example, explore the Strapi and Klaviyo integration for email marketing capabilities.

Set up Strapi to use your environment variables by updating your ./config/server.js file:

module.exports = ({ env }) => ({
  // ... other configurations
  courier: {
    apiKey: env('COURIER_API_KEY'),
  },
});

This keeps your sensitive information out of your code and makes it easy to use different keys in different environments.

Implementing the Integration Code

Create a Courier service to manage your notifications. Place this file at ./src/services/courier.js:

const { CourierClient } = require("@trycourier/courier");

module.exports = {
  sendNotification: async (event, recipient, data) => {
    const courier = CourierClient({ authorizationToken: process.env.COURIER_API_KEY });

    try {
      const { messageId } = await courier.send({
        eventId: event,
        recipientId: recipient,
        data: data,
      });
      return messageId;
    } catch (error) {
      console.error("Error sending notification:", error);
      throw error;
    }
  },
};

When creating services and controllers, you might wonder whether to use JavaScript or TypeScript. Consider the pros and cons of JavaScript or TypeScript with Strapi. Additionally, enhance your application by enhancing Strapi with plugins to extend functionality and improve development efficiency.

Expose this service through your API by creating a controller at ./src/api/notification/controllers/notification.js:

'use strict';

const courierService = require('../../../services/courier');

module.exports = {
  async send(ctx) {
    try {
      const { event, recipient, data } = ctx.request.body;
      const messageId = await courierService.sendNotification(event, recipient, data);
      ctx.send({ success: true, messageId });
    } catch (error) {
      ctx.throw(500, error.message);
    }
  },
};

Create a route at ./src/api/notification/routes/notification.js:

module.exports = {
  routes: [
    {
      method: 'POST',
      path: '/notifications/send',
      handler: 'notification.send',
    },
  ],
};

When defining API routes, it's important to choose the right approach. Learn about REST vs GraphQL in Strapi to make an informed decision. For more advanced automation, consider automating tasks with Strapi using cron jobs.

Testing the Integration

That's it! You can now send notifications through Courier by making POST requests to /api/notifications/send with a payload containing the event ID, recipient, and notification data.

This foundation lets you build sophisticated notification strategies as your application grows, including personalized user preferences and targeted multi-channel delivery. To implement push notifications, check out how to implementing notifications in Strapi using Web Push. Additionally, learn about push notifications with Strapi using Firebase Cloud Messaging.

Strapi Open Office Hours

If you have any questions about Strapi 5 or just would like to stop by and say hi, you can join us at Strapi's Discord Open Office Hours Monday through Friday at 12:30 pm - 1:30 pm CST: Strapi Discord Open Office Hours

For more details, visit the Strapi documentation and Courrier documentation.

Frequently Asked Questions

Courier is a multi-channel notification platform supporting email, SMS, push, and more. Integrate with Strapi to send notifications through multiple channels from a single API.

Create custom services that communicate with Courier's API using your API key. Configure notification templates in Courier's designer and trigger them from Strapi events.

Yes, Courier's template designer allows rich notification design. Pass dynamic data from Strapi to personalize notifications with content and user information.

Courier provides preference management APIs. Sync user preferences from Strapi and let Courier respect channel preferences when delivering notifications.

Courier supports email, SMS, push notifications, Slack, Discord, and many more channels. Configure your preferred providers in Courier and send through any channel from Strapi.