Send transactional email with SendGrid from SvelteJS 196 words.
Created
Last Updated
Last Updated
This tutorial is an extension of the [SendGrid Transactional Email Guide](/lessons/sendgrid-transactional-email-guide/). You must have the Cloud Functions deployed to start sending email from your frontend app.
Initial Setup
Start by installing the Firebase Web SDK, then initialize the packages in the root of the project.
firebase.js
import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/functions';
const config = {
// your firebase config
}
firebase.initializeApp(config);
export const app = firebase.app();
export const auth = firebase.auth();
export const functions = firebase.functions();
Transactional Email Component
The Svelte component uses the onMount lifecycle hook to monintor to the user’s auth state, while sendEmail references the callable function deployed to Firebase.
App.svelte
<script>
import firebase from 'firebase/app';
import { auth, functions } from './firebase';
import { onMount } from 'svelte';
let user = null;
onMount(async () => {
auth.onAuthStateChanged(u => user = u);
});
function sendEmail() {
const callable = functions.httpsCallable('genericEmail');
return callable({ text: 'Sending email with Svelte and SendGrid is fun!', subject: 'Email from Svelte'}).then(console.log);
}
</script>
<h2>SendGrid Transactional Email with Svelte</h2>
{#if user}
<p>{ JSON.stringify(user) }</p>
<button on:click={() => sendEmail()}>Send Email with Callable Function</button>
<button on:click={() => auth.signOut()}>SignOut</button>
{:else}
<button on:click={() => auth.signInWithPopup(new firebase.auth.GoogleAuthProvider())}>SignIn with Google</button>
{/if}