Netlify Functions for Sending Emails

Let’s say you’re rocking a JAMstack-style site (no server-side languages in use), but you want to do something rather dynamic like send an email. Not a problem! That’s the whole point of JAMstack. It’s not just static hosting. It’s that plus doing anything else you wanna do through JavaScript and APIs.

Here’s the setup: You need a service to help you send the email. Let’s just pick Sparkpost out of a hat. There are a number of them, and I’ll leave comparing their features and pricing to you, as we’re doing something extremely basic and low-volume here. To send an email with Sparkpost, you hit their API with your API key, provide information about the email you want to send, and Sparkpost sends it.

So, you’ll need to run a little server-side code to protect your API key during the API request. Where can you run that code? A Lambda is perfect for that (aka a serverless function or cloud function). There are lots of services to help you run these, but none are easier than Netlify, where you might be hosting your site anyway.

Get Sparkpost ready

I signed up for Sparkpost and made sure my account was all set up and verified. The dashboard there will give you an API key:

Toss that API Key into Netlify

Part of protecting our API key is making sure it’s only used in server-side code, but also that we keep it out of our Git repository. Netlify has environment variables that expose it to functions as needed, so we’ll plop it there:

Let’s spin up Netlify Dev, as that’ll make this easy to work with

Netlify Dev is a magical little tool that does stuff like run our static site generator for us. For the site I’m working on, I use Eleventy and Netlify Dev auto-detects and auto-runs it, which is super neat. But more importantly, for us, it gives us a local URL that runs our functions for testing.

Once it’s all installed, running it should look like this:

In the terminal screenshot above, it shows the website itself being spun up at localhost:8080, but it also says:

◈ Lambda server is listening on 59629

That’ll be very useful in a moment when we’re writing and testing our new function — which, by the way, we can scaffold out if we’d like. For example:

netlify functions:create --name hello-world

From there, it will ask some questions and then make a function. Pretty useful to get started quickly. We’ll cover writing that function in a moment, but first, let’s use this…

Sparkpost has their own Node lib

Sparkpost has an API, of course, for sending these emails. We could look at those docs and learn how to hit their URL endpoints with the correct data.

But things get even easier with their Node.js bindings. Let’s get this set up by creating all the folders and files we’ll need:

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

All we need the package.json file for is to yank in the Sparkpost library, so npm install sparkpost --save-dev will do the trick there.

Then the send-email.js imports that lib and uses it:

const SparkPost = require('sparkpost');
const client = new SparkPost(process.env.SPARKPOST); exports.handler = function(event, context, callback) { client.transmissions .send({ content: { from: 'chris@css-tricks.com', subject: 'Hello, World!', html: "<html><body><p>My cool email.</p></body></html>" }, recipients: [{ address: 'chriscoyier@gmail.com' }] });
}

You’ll want to look at their docs for error handling and whatnot. Again, we’ve just chosen Sparkpost out of a hat here. Any email sending service will have an API and helper code for popular languages.

Notice line 2! That’s where we need the API key, and we don’t need to hard-code it because Netlify Dev is so darn fancy that it will connect to Netlify and let us use the environment variable from there.

Test the function

When Netlify Dev is running, our Lamba functions have that special port they are running. We’ll be able to have a URL like this to run the function:

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

This function is set up to run when it’s hit, so we could simply visit that in a browser to run it.

Testing

Maybe you’ll POST to this URL. Maybe you’ll send the body of the email. Maybe you’ll send the recipient’s email address. It would be nice to have a testing environment for all of this.

Well, we can console.log() stuff and see it in the terminal, so that’s always handy. Plus we can write our functions to return whatever, and we could look at those responses in some kind of API testing tool, like Postman or Insomnia.

It works!

I’ll leave it to you to get fancy with it 😉

The post Netlify Functions for Sending Emails appeared first on CSS-Tricks.

Static File Hosting Doesn’t Have To Be So… Static

A huge high-five and welcome to Netlify for the sponsorship this week.

If you haven’t heard of Netlify, the big thing you should know is that it’s web hosting, but more than that. It’s web hosting with the developer workflow squarely at heart. You can spin up a site on Netlify in literally seconds. One way is through their robust CLI. Another way, that I find very comfortable (and just did the other day), is to log into the Netlify web interface, create a new site, and connect a Git repo to it. Plus I can give it a command that will run my site’s build process when I push to master. Now anything I push up goes live on my website, which is HTTPS and on a CDN. Uh, wow. Of course, I can also point a custom domain name at Netlify and now we’re cooking with gas.

The JAMstack is at the heart of Netlify. It’s static file hosting, because static file hosting is super fast and secure. It means you can build your site with all kinds of fun, powerful, modern site generators like Hugo, Gatsby, Metalsmith, or 11ty. The site I spun up myself was my own custom thing with a Gulp build process that ran Sass and Nunjucks.

Try spinning up a Gatsby site right now!

Static sites aren’t just HTML-only zero-interactivity stone statues.

In fact, I think static sites are one of the ingredients to the larger world of serverless technology, in which functionality is handled by services that are perfect for the job.

Netlify knows this, of course, so they’ve released has some brand spanking new features that allow you to add interactivity and functionality to your site:

Form Handling

Just add a netlify attribute to the <form>, configure where you want the redirection and email notifications to go, and you’re set. You don’t have to write any server-side code or JavaScript. Even blast that data over to Zapier to integrate with a million other web services. They don’t inject JavaScript to make this work – it’s handled at the CDN level.

You can also receive and manage submissions in your Netlify dashboard, so this can be yet another thing that brings together site management under one roof.

Built-in AWS Lambda Functions

JavaScript functions are designed to handle requests. Does your site need to trigger a Slack message? Send an SMS through Twilio? Process data? Now you can host your cloud functions right in the same repo as your site and Netlify will handle pushing them over to AWS Lambda for you. You don’t have to configure anything or even bother setting up your own AWS account.

Plus, your functions benefit from the power of Deploy Previews and rollbacks. As in, your functions live in your version control along with the rest of your site, so they are easy to manage and come with all the comfort and advantages of working with Netlify. Wanna dig in? Here’s a tutorial by Alex MacArthur that goes deep.

Identity

Do you need to log in to your website for admin purposes? Or have users log in? With Identity, Netlify gives you a really easy way to make that happen. Imagine a feature like a gym website offering a food log for members. The member could log in with Google/Twitter/etc and save/view/edit their food data (via cloud functions of course!).

Social login is a handy feature, but it’s not required. You can manage and authenticate users that aren’t Netlify users or users of any other service. You’ll be able to handle log in, sign up, password recovery and all that. Very useful for gated content, site administration, and integrating with any service that understands JSON Web Tokens.

All on Netlify

All those things without having to go out, evaluate and purchase tools or customize open source tools, integrate them into your project, and then manage multiple disparate accounts/services.

How much does it all cost? There’s a good chance it doesn’t cost you anything. Small projects probably fit within Netlify’s free tier. If you grow up and build something big, they you might get into a paid tier, but still good news, you only pay for what you use.

Go check out Netlify right now.

The post Static File Hosting Doesn’t Have To Be So… Static appeared first on CSS-Tricks.