DEV Community

Robertblazor
Robertblazor

Posted on • Edited on

5

Azure Static Web App for a contact us page

Is it possible to have an alternative to Twilio SendGrid, Mail gun, or other third-party communication Software as a Service that drives me nuts on verification and compliance?

There is one offered by Microsoft built-in on Azure, and it can be easily integrated into Azure functions, as a backend function. Let's dive in.

First, we need to select the service we need from Azure, like here:

Image description

And under the page, look for this one icon with a name of Azure Email communication Service Domain.

Image description

Second, just follow the configuration steps listed on this blogpost.

https://learn.microsoft.com/en-us/azure/communication-services/quickstarts/email/create-email-communication-resource

Now, we can pick a starter template from GitHub and create a repo.

https://github.com/staticwebdev/blazor-starter

Note if you want to create your own repo from scratch, it's also okay. Here are some CLI commands you can reference:
dotnet new blazorwasm -f net6.0 -n "Client"
dotnet new classlib -f net6.0 -n "Shared"
'func init'
'func new'
'dotnet new sln -n "Repo-Name"'
'dotnet add reference ..\classlibName\classlibName.csproj'

If the following cli doesn't work, here is a different tutorial you can reference.

'func init'

Alternative GUI method in Visual Studio Code:

https://learn.microsoft.com/en-us/azure/azure-functions/functions-develop-vs-code?tabs=csharp

Now, got to your Api folder, type or copy the following commands:
'dotnet add package Azure.Communication.Email --version 1.0.0'
'dotnet add package Microsoft.ApplicationInsights.WorkerService --version 2.22.0-beta3'

Type the following command
'func new --template "HttpTrigger" --name "SendEmail"'

And reference to this repo as I did (Thanks to Mike) for the C# part of the function.

https://github.com/mikepfeiffer/azure-serverless-contact

This function won't run as you made the change, please, go ahead and edit the local.settings.json file, as I did:

{
  "IsEncrypted": false,
  "Values": {
    "AzureWebJobsStorage": "",
    "FUNCTIONS_WORKER_RUNTIME": "dotnet",
    "AzureCommunicationServicesConnectionString": "<Your Connection String>",
    "myEmailAddress":"<Your Email to receive the email>",
    "senderEmailAddress":"<System assigned email address or your custom email address to host the service>"
  },
  "Host": {
    "LocalHttpPort": 7071,
    "CORS": "*"
    }
}
Enter fullscreen mode Exit fullscreen mode

And the serviceDependencies.json to the following:

{
    "dependencies": {
      "storage1": {
        "type": "storage",
        "connectionId": "AzureWebJobsStorage"
      },
      "appInsights1": {
        "type": "appInsights",
        "connectionId": "<Azure communication service connection key>",
        "dynamicId": null
      }
    }
  }
Enter fullscreen mode Exit fullscreen mode

You can test the function with the following CLI
'func start'

And you can also start your frontend.

Make two new files as Contact.razor and Contact.razor.css

Please use PostAsJsonAsync to invoke the Azure function API. and edit the page as you need to.

Here is my own Repo as open-source for everyone to use.

https://github.com/Robertblazor/Contact-us-exp

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay