Email Templates using Azure Functions & React Email

An Azure Function App using TypeScript for handling the rendering and sending of email templates using React Email.

Read the blog post for more information.

Development

Prerequisites

1. An installation of Node.js v20.14.0 (npm v10.7.0)
2. An installation of Azure Functions Core Tools v4
3. An installation of VSCode with the following extensions:
   1. Spelling Checker
   2. ESLint
   3. Prettier
   4. Azurite
4. A working knowledge of:
   1. Azure Functions (and the VsCode extension is installed)
   2. Node.js
   3. TypeScript

Getting Started

1. Review and complete the Prerequisites above
2. npm i: Install dependencies

Azure Function

Follow the steps below to start a local DEV environment for the Azure Function:

1. Copy ./local.settings-template.json to ./local.settings.json and replace the required environment variables
2. Start the Azurite Blob & Queue Services
3. npm run start:dev: Start the local DEV environment
4. Copy & paste the contents of sample.json into the SENDGRID_QUEUE_EMAIL queue in Azurite (be sure to update the details to your email address)
5. Press CTRL+c to stop the local DEV environment

Email Templates

Follow the steps below to start a local DEV environment for the email templates:

1. npm run email:dev: Start the local DEV environment
2. Open localhost:3000 in your browser
3. Press CTRL+c to stop the local DEV environment

Credits

• Des Holmes: Technical Leadership & Product Development
  • About Blog
• React Email
• Azure Functions