Watching: Different Options for Serverless Frontends

From: Serverless for Frontend Developers


Introduction to Plugins

To make the most of this tutorial series,  create a Serverless Framework PRO account for free

Lesson Info

In this video, you'll learn a few of the options for developing and deploying frontend applications on AWS. You'll look at a few common examples of frontend development frameworks and static site generators and some common AWS services and tools used to configure an application frontend.


Welcome back. So what are serverless frontends? I have a pretty high level definition of any frontend that allows you to scale rapidly and avoid managing server infrastructure. But this really doesn't get over the full breadth of things that could be included in serverless frontends.

So let's take a look at some of the possible tools we might use to actually build some. One of the first set of tools we might use is frontend frameworks. These could be anything from React to Next.js, Gatsby, Vue or Nuxt and many of these rely on each other and work with different frontends. For example, Vue and Nuxt have a relationship in terms of Nuxt being related to how you develop with Vue. And the same thing with Next.js and React. In addition to a popular frontend frameworks, we might also use something called static site generators.

These generators will help us create lots of pre-compiled HTML, CSS and JavaScript files that all go into making our website without having to deal with any additional rendering behind the scenes. These are things like Jekyll, Hugo and Pelican.

In addition to popular frontend frameworks and static site generators, we're also gonna need some infrastructure resources to potentially host our static sites or frontend frameworks. We might use something like Amazon S3 website hosting and we'll be doing that later on in these videos, but we could also use managed services like Netlify, GitHub Pages or which are more specific to just allowing things like static sites to be hosted on them. Whereas S3 has additional functionality as object storage, but in this case, these services are more finely tuned to actually hosting frontend frameworks.

So what else might we need? We could also host frontend frameworks on something like AWS Lambda or Lambda @ Edge, and these are alternate sets of tooling that we could also use. If we wanted to actually deploy this with the Serverless Framework, there's a few different tools we can use for this.

One of the first is Serverless Components and we'll take a look at a video from our CEO, Austin Collins, about how we could use a serverless website component to quickly deploy an entire frontend application complete with an SSL certificate, a custom domain, a CloudFront distribution for content distribution. And also just get all that configuration out of the way within a few lines.

But if we wanted to do it a little more manually, there's still the option to use serverless plugins to configure our files to be deployed to something like an S3 bucket and then we can either use other plugins or manually configure the SSL HTTPS certificate and things like the CDN and custom domain. So with all of these different tools in mind, let's go ahead and jump into the next videos where we'll be taking a look at how we can actually build everything out using this infrastructure and these tools.

Get updated when a new course is released