Autor: Tung Do

Sagen wir du hast deine erste moderne statische Website (JAMStack) gebaut und willst sie dynamischer gestalten wie z.B durch das Versenden von E-Mails mit dynamischen Inhalten und Dateianhang. Dafür willst du aber keinen eigenen Server aufsetzen bzw. nutzen. Wie das gelingt, erklären wir in diesem Post.

Was benötigt man?

1. Mailing Service

Als allererstes brauchst du einen Mailing Service, der deine Emails versendet. Wichtig ist, dass du Emails nicht von deinem eigenen Emailserver senden solltest, sondern immer auf einen größeren Dienstleister zurückgreifen solltest um beispielsweise der Gefahr zu entgehen, dass du als Spamversender eingestuft wirst. Um eine Mail zu versenden, sprichst du die Service API mit einem API Key an und übergibst alle Daten, die in der Mail enthalten sein sollen und der Mailing Service verschickt sie dann an die Zieladresse.

Es gibt viele Services zur Auswahl und du solltest jenen nehmen, der von den Features und dem Preis her am besten zu dir passt. Da ich bei meinem letzten Projekt gerne mit POSTMARK gearbeitet habe, werde ich in diesem Post vorstellen, wie man diesen Dienst benutzt.

2. Netlify

Als Nächstes brauchen wir eine kleine Menge serverseitigen Code, um dem API Key beim API Request zu schützen. Dafür eignen sich Lambda Funktionen bestens. Man ruft einen URL Endpoint auf und beim Aufruf wird ein vorgegebener Code ausgeführt. Netlify unterstützt dies, also wäre es eine gute Idee deine Seite darauf zu hosten.

Schritt 1: Mail Service einrichten

POSTMARK einrichten

Als Erstes melden wir uns bei Postmark an und gehen alle Schritte durch, bis wir zum Dashboard kommen und Zugriff auf den API Token haben.

API Key für Netlify zur Verfügung stellen

Um den API Key zu schützen, sollte der Key nur beim Ausführen serverseitigen Codes zur Verfügung gestellt werden. Im Netlify müssen wir deshalb unter “Environment” den Key einer Variable zuweisen.

Schritt 2: Functions schreiben

Wie erstellen wir eine Netlify Function? Ganz einfach. In deinem Projekt Ordner legst du ein Ordner mit dem Namen “functions” an. In diesem legst du dann alle JavaScript Dateien an, die du benötigst. In unserem Fall legen wir die Datei send-email.js an.

/project
   ... your entire website or whatever ...
   /functions/
         send-email.js

Postmark Node Library benutzen

Postmark stellt eine eigene Node.js Bibliothek zur Verfügung und mit einem Blick auf die Dokumentation entdecken wir gleich am Anfang ein einfaches Codebeispiel zum Testen.

const serverToken = "xxxx-xxxxx-xxxx-xxxxx-xxxxxx" //API Key
let postmark = require("postmark")
let client = new postmark.ServerClient(serverToken);

exports.handler = (event, context, callback) => {
client.sendEmail(
    {
        From: "from@example.com", //Deine Emailadresse
        To: "to@example.com", //Ziel Emailadresse
        Subject: "test email",
        HtmlBody: "test",
        TextBody: "test"
    }
).then(response => {
    console.log(response.To);
    console.log(response.SubmittedAt);
    console.log(response.Message);
    console.log(response.MessageID);
    console.log(response.ErrorCode);
});
}

Wenn du mit der AWS Lambda Funktionen noch nicht so vertraut bist oder nicht kennst – No Problem! Ich gebe dir einen kleinen Überblick über die einzelnen Parameter, die unser handler erhält.

• event is an object that contains data on the request
• context contains the user information when using Identity for user authentication
• callback is a function we can use to create a response

Mit der callback() Methode können wir testen, ob unsere Anfrage bei der Mailing Service API angekommen ist.

  callback(null, {
    statusCode: 200,
    body: 'I am on my way !'
  })
}

Schritt 3: Testen

Netlify Dev

Nun haben wir unsere erste Netlify Funktion geschrieben und möchten unser Werk testen. Dafür gibt es ein kleines Tool namens Netlify Dev. Damit können wir einen dev Server simulieren, der uns eine lokale URL ausgibt mit denen wir unseren Funktionen in der Entwicklungsumgebung ausführen und testen können.

Nach der Installation und Ausführung sollte es ungefähr so aussehen:

Testen der Funktion

Um unsere Lambda Funktion aufzurufen, müssen wir sie mit eine URL, wie die unten ausgeführte, ansprechen:

http://localhost:8888/.netlify/functions/send-email

Wenn alles geklappt hat, wird sich der Empfänger über deine erste E-Mail freuen 🙂

Schritt 4: Email mit Daten befüllen

Glückwunsch, nun hast du deine erste E-Mail mit der Netlify Function verschickt. Leider ist der Inhalt noch statisch und langweilig. Um deiner Mail mehr Leben einzuhauchen, müssen wir den Code dynamischer machen.

Sagen wir du willst mehrere Glückwünsche per E-Mail an Freunde versenden und eine Textdatei mit einer persönliche Nachricht als Anhang hinzufügen.

Alle Daten befüllst du mit einem Formular und diese werden als ein Objekt gespeichert z.B.:

const congratulation = {
  targetEmail: "test@gmail.com", 
  reason: "Geburtstag",
  firstname: "Peter",
  message: "Alles Gute zum Geburtstag. Es freut mich das du erwachsen 
           wirst"
}

Nun müssen diese Daten beim Versenden an die URL der send-mail.js Funktion übergeben werden. Dazu nutzen wir eine HTTP Request mit der Funktion URL als Zieladresse mit den Formulardaten als payload.

axios({
          method: 'POST',
          headers: { 'content-type': 'application/json' },
          url: '/.netlify/functions/send-email',
          data: congratulation, //payload
      })

Als nächstes müssen wir in unserer send-mail.js Funktion noch den Inhalt der E-Mail mit den Daten aus dem payload befüllen. Es empfiehlt sich beim Entwickeln console.log(event) zu benutzen, um sich alle Daten aus dem Request im Terminal anzeigen zulassen

Um einen Anhang hinzuzufügen, braucht man nur einen Blick auf die Postmark Node.js Dokumentation zu werfen.

const attachment = new 
                    postmark.Models.Attachment("Glückwunschtext.txt", 
                    Buffer.from("payload.message").toString("base64"), 
                    "text");

client.sendEmail(
    {
        From: "from@example.com", //Deine Emailadresse
        To: "to@example.com", //Ziel Emailadresse
        Subject: "test email",
        HtmlBody: "test",
        TextBody: "test"
        Attachments: [attachment],
    })

Die fertig angepasste Funktion sieht dann am Ende so aus.

const serverToken = "xxxx-xxxxx-xxxx-xxxxx-xxxxxx" //API Key
let postmark = require("postmark")
let client = new postmark.ServerClient(serverToken);

exports.handler = (event, callback) => {
console.log(event) 
const payload = JSON.parse(event.body)

 const attachment = new 
                    postmark.Models.Attachment("Glückwunschtext.txt", 
                    Buffer.from("payload.message").toString("base64"), 
                    "text");

client.sendEmail(
    {
        From: "tung@phmu.de", //Deine Emailadresse
        To: payload.targetEmail, //Ziel Emailadresse
        Subject: payload.reason, 
        TextBody: `Liebe ${payload.firstname}, 
                  du hast eine Glückwunschemail erhalten`,
        Attachments: [attachment],
    })
} 

Der Inhalt der verschickten Emails sollte dann so aussehen:

Von: tung@phmu.de
An: test@gmail.com
Betreff: Geburtstag

Anhang: Glückwunschtext.txt

Nachricht: 
Liebe Peter, 
du hast eine Glückwunschemail erhalten             

Wie ihr seht, ist das Versenden von E-Mails mit Netlify Functions gar nicht so kompliziert. Man könnte jetzt die E-Mails noch fancier machen wie z. B. HTML Code hinzufügen und… Aber das werde ich dir überlassen 😉