How to Setup External Email Provider on Strapi Cloud
Tags: strapi, strapicloud, emailprovider
Published: 2023-04-03 13:17:29

We recently announced[ Strapi Cloud is now available](https://strapi.io/cloud). Strapi Cloud is a fully managed, composable, and collaborative platform to boost your team's velocity. It is a powerful platform for building and deploying your Strapi application. But sometimes, you must integrate additional functionality to take your project to the next level. One essential feature for many applications is email functionality. 

This tutorial teaches how to seamlessly set up an external email provider on Strapi Cloud using [Sendgrid](https:\\sendgrid.com). 

## Prerequisites
- Email Provider Account (SendGrid)
- Varified Email with website domain (someemail@businessname.com)
- Local Strapi Project 
- Strapi Project Deployed on Cloud

## Sengrid Account Overview
The two things you will need are an `api key` and a `verified email`.  It is recommended that you have a domain-specific email.  

For instance, I have a domain name, `codingafterthirty.com`, and my email is `paul@codingafterthirty.com`.

I set up my domain email using ***Google Workspaces***, but there are other services that you can use as well.
![Google Workspaces Screenshot](https://d2zv2ciw0ln4h1.cloudfront.net/uploads/Google_Workspaces_Screenshot_1b4b8cae3e.png)

Once you have your **domain** specific email, the next step is to **verify** it in Sendgrid.

You can do that within your Sendgrid dashboard under the **sender authentication section**. 
![sender authentication section](https://d2zv2ciw0ln4h1.cloudfront.net/uploads/sender_authentication_section_9af7f4d279.png)

And the final step is to create an `API KEY` that we will use when setting up our email provider.

Now that we have our `API KEY` and `domain-specific email`, we are ready to move on to the next step.

> Note: if you already have a project in the cloud, you can skip the next two sections:

## Setting Up Our Local Project

We will set up a simple local project so you can use it as a reference later. I will share the repo at the end of the article.

We can create our Strapi project by running the following command in your folder of choice:

``` bash
	npx create-strapi-app@latest email-provider-demo --quickstart
```

Once the project is created, go ahead and create your first `admin` user. Now let's save our project to git and push it to the cloud.

## Setting Up Our Strapi Cloud Project

The hard work is done to set up our project, go to [https://cloud.strapi.io](https://cloud.strapi.io/) to get started.

In the dashboard, click the `create-project` button.
![Strapi Cloud dashboard](https://d2zv2ciw0ln4h1.cloudfront.net/uploads/Strapi_Cloud_dashboard_58b5b271c2.png)

You should see the following screen:
![Import Strapi Cloud](https://d2zv2ciw0ln4h1.cloudfront.net/uploads/Import_Strapi_Cloud_89894e7e23.png)

Select the project repo that we just created and click the `next` button.
![Import Strapi Cloud_2](https://d2zv2ciw0ln4h1.cloudfront.net/uploads/Import_Strapi_Cloud_2_3ded434548.png)

Continue clicking next for all the remaining steps. Enter your billing information and click next.

> Note: this will create your project and start your subscription.  

Once the deployment process starts, you can see the progress under the `Deploys` menu tab after selecting the project.  
![Deploys Strapi Cloud](https://d2zv2ciw0ln4h1.cloudfront.net/uploads/Deploys_Cloud_741afbbe33.png)

By clicking the `eye` icon, you will get a more detailed view.
![Logs Details Strapi Cloud](https://d2zv2ciw0ln4h1.cloudfront.net/uploads/Logs_Details_Strapi_Cloud_cbdb1c72ab.png)

Once the deployment process is complete, let's create our first admin user and see our Strapi Admin Cloud email settings.

## Strapi Cloud Out Of The Box

Once your project is deployed, click the `Visit app` button and go to `/admin` to log in.
![Strapi Cloud Deploys](https://d2zv2ciw0ln4h1.cloudfront.net/uploads/Strapi_Cloud_Deploys_b03861f353.png)

Since this is a new project, you will be prompted to create a new `admin user` go ahead and do that to log in.

From the dashboard, click on the `settings` menu tab and navigate to the `EMAIL PLUGIN` configuration menu, and you will see the out-of-the-box email setting provided by Strapi.

![Strapi Application Dashboard](https://d2zv2ciw0ln4h1.cloudfront.net/uploads/Strapi_Application_Dashboard_1dbf7f990d.gif)

You can send emails and use the reset forgotten passwords feature if you get locked out of your account.

But you can not switch or configure your `default sender email` or `default response email` and you are limited to being able to send only 1000 emails per month. 

This may be perfect for most users, but if you need something more, this is where our custom email providers come in.

Let's set up our `Sendgrid` email provider.

## Setting Up Sendgrid Email Provider

We are going to set up our custom email provider.  

In this example, we are going to use our `@strapi/provider-email-sendgrid` provider that you can find in our [Strapi Marketplace](https://market.strapi.io/providers/@strapi-provider-email-sendgrid).

![@strapi:provider-email-sendgrid](https://d2zv2ciw0ln4h1.cloudfront.net/uploads/strapi_provider_email_sendgrid_020e96883e.png)

### Set Up Steps

**1. Install the provider inside your Local Strapi Project:**

Using the following command, let's install our provider:
```
	# using yarn 
	yarn add @strapi/provider-email-SendGrid 
	
	# using npm 
	npm install @strapi/provider-email-sendgrid --save
```

**2. Configure your provider:**

Inside your code editor, navigate to your  `config` folder, if the `plugins.js` file does not exist, go ahead and create one. 

![plugins.js](https://d2zv2ciw0ln4h1.cloudfront.net/uploads/pluginsjs_87bdf05a8c.png)

Inside the `plugins.js` file add the following configuration:
``` javascript
module.exports = ({ env }) => ({
  // ...
  email: {
    config: {
      provider: 'sendgrid',
      providerOptions: {
        apiKey: env('SENDGRID_API_KEY'),
      },
      settings: {
        defaultFrom: env('SENDGRID_DEFAULT_FROM'),
        defaultReplyTo: env('SENDGRID_DEFAULT_TO'),
      },
    },
  },
  // ...
});
```

Now let's set up our variables inside the `.env` file. You can find additional information on Strapi Providers [here](https://docs.strapi.io/dev-docs/providers#configuring-providers). 


**3 Adding your env variables: **

Inside the `.env` file, let's add our `SendGrid api key` that we generated earlier and our `domain varified` email.

``` env
	SENDGRID_API_KEY=your_sendgrid_api_key
	SENDGRID_DEFAULT_FROM=your_domain@your_domain.com
	SENDGRID_DEFAULT_TO=your_domain@your_domain.com
```

Once the following is done, let's push our changes to Strapi Cloud.

**4 Push the changes to Strapi Cloud**

Let's commit and push our changes to the cloud. 

``` bash
	git add .
	git status
	git commit -m "email provider setup"
	git push -u origin main
```

This will trigger a redeployment, but our email will not work yet.  We need to add our `env variable` on Strapi Cloud. 

You can do so by clicking on your project, going to `setting`, and selecting the `variables` menu option.

![Variables Strapi Cloud](https://d2zv2ciw0ln4h1.cloudfront.net/uploads/Variables_Strapi_Cloud_4c907f6c36.gif)
Go ahead and set your variables.

``` env
	SENDGRID_API_KEY=your_sendgrid_api_key
	SENDGRID_DEFAULT_FROM=your_domain@your_domain.com
	SENDGRID_DEFAULT_TO=your_domain@your_domain.com
```

Once you update your variables, you may retrigger the deployment by clicking the `Trigger Deploy` button.

![Trigger Deploy Strapi](https://d2zv2ciw0ln4h1.cloudfront.net/uploads/Trigger_Deploy_Strapi_bef4791947.png)

## The Moment Of Truth

Once the deployment is done, let's log into our Strapi Cloud instance and see if it worked.

![Strapi Cloud instance](https://d2zv2ciw0ln4h1.cloudfront.net/uploads/Strapi_Cloud_instance_66bd8a2c0e.gif)

Great, we can now use our SendGrid email provider to send emails. You can find the project repo [here](https://github.com/PaulBratslavsky/email-provider-demo).

## Conclusion
Hope you enjoyed this tutorial.

You can also watch the video tutorial that explains the step-by-step process we went through in this blog post.

{% youtube KkXufGtbNFE %}
 
If you have additional questions, feel free to stop by our `open office hours` held on Discord Monday - Friday at 12:30 PM CST time. 

Continue discussing this topic further or connect with more people using Strapi on our [Discord community](https://discord.com/invite/strapi). It is a great place to share your thoughts, ask questions, and participate in live discussions.

And finally, if you have any additional topics around Strapi Cloud that you would like us to cover, let us know in the comments.