Made withStrapiClip

Sending Emails in Strapi

S

Strapi

Creator on the Strapi channel

Watch on YouTube ↗

33K viewsMar 3, 20228:02 runtime

Learn how to configure and send emails from your Strapi application using an external provider like SendGrid. This guide walks you through setting up a new Strapi project, installing the SendGrid email provider, and configuring environment variables with your API key. Discover…

Chapters

#strapi#clip#cmscrm

Overview

This guide details how to integrate an email service with Strapi to send emails automatically. It uses SendGrid as the email provider and a lifecycle hook to trigger an email upon the creation of new content.

Step 1: Install Email Provider

Strapi uses provider packages to integrate with various email services. This example uses SendGrid.

Install the provider package via npm: npm install @strapi/provider-email-sendgrid

Step 2: Configure Environment Variables

API keys and other secrets should be stored securely in environment variables.

Add your SendGrid API key to the .env file in your project's root: SENDGRID_API_KEY=your_api_key_here

Important
Always keep your .env file out of version control (e.g., in .gitignore) to protect your secret keys.

Step 3: Configure the Email Plugin

To make Strapi use your provider, you must configure it in the plugins.js file.

Create a new file: config/plugins.js.

Add the following configuration code:

module.exports = ({ env }) => ({
  // ...
  email: {
    config: {
      provider: 'sendgrid',
      providerOptions: {
        apiKey: env('SENDGRID_API_KEY'),
      },
      settings: {
        defaultFrom: '[email protected]',
        defaultReplyTo: '[email protected]',
      },
    },
  },
  // ...
});

Note
The defaultFrom and defaultReplyTo email addresses must be verified senders in your SendGrid account for emails to be delivered successfully.

Step 4: Trigger Email with a Lifecycle Hook

Lifecycle hooks are functions that run automatically when certain events occur on your content types (e.g., creating, updating, or deleting an entry).

For the desired content type (e.g., api/to-do/), create a file named src/api/to-do/content-types/to-do/lifecycles.js.

Implement the afterCreate hook to send an email after a new entry is saved.

module.exports = {
  async afterCreate(event) {
    const { result } = event;

    try {
      await strapi.plugins['email'].services.email.send({
        to: '[email protected]',
        from: '[email protected]',
        subject: 'You have a new to-do',
        text: `Your to-do is: ${result.name}`,
      });
    } catch (err) {
      console.log(err);
    }
  }
};

Tip
Wrap your email sending logic in a try...catch block. This prevents an email sending failure from blocking the API request and crashing the content creation process in the admin panel.

Introduction and Strapi Project Setup

Hello everyone, my name is Braden Gerard and today we're going to look at how you can use Strapi to send emails. So if your application needs to send out an email for some reason and you want to manually trigger that, or maybe you want it to run automatically based on certain conditions, we can do that.

So let's create a new Strapi app by running npx create-strapi-app@latest. And then we're going to give it a name, so we'll call it my-email-strapi-tutorial. And then we'll say --quickstart in order to set up a project for us locally.

Installing the SendGrid Email Provider

So the installation is just finishing up and our application is launching. We'll just close that for a minute because we don't need to run it right now and we're going to install the provider package that we need for sending email. Strapi has multiple providers that you can use. We're going to use SendGrid.

So you can go to SendGrid's website, you can register an account and get an API key from there. So we're going to do an npm install @strapi/provider-email-sendgrid and then we'll save that into our dependencies.

Configuring the SendGrid API Key

Now that our provider is installed, we need to add the API key for our provider. So we'll open up our project here, and inside of our project, we'll see that we have our default Strapi application structure here. In our .env file, we need to add the SENDGRID_API_KEY... and here is my test key. And that's all we need to add into there, so we'll save that and close that.

Configuring the Email Plugin

Now we need to also configure our Strapi application to use SendGrid as the default provider. So we will go into our config folder and then we will go to the plugins.js file. Now by default that file's not there, so we can create a plugins.js.

In the plugins.js file, we're going to add the code from the Strapi provider email SendGrid plugin npm repository. So we'll go here, grab this section, and we'll put that into our plugins.js. Actually, we'll grab this whole file since we have a blank plugins.js currently. Remove this, remove this, and there we go.

So we have a default configuration set up using the SendGrid API key environment variable. So if we look in our .env, that will grab this SENDGRID_API_KEY. So we can save this. Now the 'default from' here, this needs to match the email address that you've set up inside of your SendGrid account. So in my case, I set it up no-reply@bradengerard. And we'll do that for both the default from as well as the default reply to.

Creating a 'To-Do' Content Type

Now this gets Strapi using SendGrid as your default email provider, and it uses the node module that we installed to do the sending, and we have our API key here. So now we just need to decide where we actually want to send our email from. So our application is set up, ready to go with SendGrid at this point. Strapi will send all of our default emails through SendGrid now. If I want to trigger my own email, we can do that.

So let's go over to our installation. Let's open up our terminal here and we will go into our project and we'll do an npm run develop. And then we'll just open that up in our browser. And it's going to ask us to set up our initial account, so we'll put in our info and click Let's Start.

All right, so we have our default Strapi installation set up. We're going to create a new content type. So we'll go over to our Content-Type Builder and we will create a new collection type, and we're going to call it To-dos. And we'll call it to-do, so we have the singular and then the plural version. We'll hit Continue. And then we're going to give our to-do a text field, so the name of our to-do. And we're going to give it a boolean field for whether it's complete or not. So let's say 'completed'. And then we'll save that content type.

Sending Email with a Lifecycle Hook

So now if we go to our content manager, we should see that we have To-dos. Perfect. And what we're going to do is when we create a new to-do, we're going to have it send us the to-do by email, so we have a record of it in our email.

So we'll go back to our application and now we should see in our api folder, a to-do folder. If we go into that to-do folder, we can see that there's some folders. We have a content-types folder, and inside of that content-types folder is the to-do folder. Now inside of that to-do folder is where you want to create a new file, and we're going to call that file lifecycles.js.

So in our lifecycles.js file, we'll do module.exports is equal to, and then inside of here, we're going to say afterCreate. So this is the hook that Strapi calls with the event, which is the object that's getting created. And we're going to make that async just so that we can await our email sending. And then we'll get the result from the event, which is the actual to-do itself. And then we're going to do a try...catch just to make sure that we don't cause any errors here if our email doesn't send.

And we'll await our email to send. And we'll say strapi.plugins['email'].services.email.send. And then that's going to take an object with the options for the email. So we'll say it's going to go to [email protected]. We're going to say who it's from, which in this case is going to be the email that you've set up in your SendGrid or your provider. And I have [email protected]. And then we're going to say what is the subject of the email: "You have a new to-do". And then what is the text, so the body of the email. And we'll say, "Your to-do is"... and we'll get the result.name, which is the name of our to-do.

And then just in case this fails, we will catch and we'll console.log the error just so we're not blocking the admin if something fails. We'll just log out the error. And that will do it. Now we should be able to send, have emails sent automatically after we create a new to-do.

Testing the Email Automation

So we'll just run our project here, and we'll go over to our admin and create a new to-do. So create new entry. The name: "feed the dog". And we'll say that it's not completed yet. And we'll save that. And now that that's saved, that would trigger our life cycle hook, which will then send me an email. And there's the email coming in right there: "Your to-do is feed the dog."

So that's how you can create emails being sent from Strapi.