Different Options for Serverless Frontends

The Serverless Website Component with React

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

Lesson Info

In this video, you'll learn about the different low-configuration Serverless Components you can use to deploy your frontend application. You'll also get more context on the state of Serverless Components and what you can expect from them going forward.


Welcome back. Let's get started by looking at how we can deploy our websites with Serverless Components. First I want to give you a little bit of context about Serverless Components, how they function and what their purposes as well as what you can expect from them going forward in the next few months.

After that, we'll take a look at another video from Austin Collins, our CEO, about how you can use the serverless website component to deploy your applications to AWS and get everything from an SSL certificate to a custom domain all the way through a cloud front distribution to cache your website files locally.

That'll help you get a very highly functional website up and running very quickly, but if you'd like another alternative approach for serverless frontends, we'll also be able to take a look at using Lambda@Edge to host our serverless frontends. We'll use the serverless Next.js component in that particular case and you'll see how we can use that to deploy another kind of application. But in the future you can expect a lot of other things from components like that.

Let's take a look at the state of Serverless Components in 2019. Right now they provide incredible utility for frontend developers looking to deploy their applications on something like AWS, which is the cloud provider that most of these components currently are focused on. They'll get you things like an HTTPS certificate, set up a CloudFront content distribution network and also make sure your custom domain that you've registered inside of AWS is synced up with these other services.

They're also going to work really fast because in the background they don't rely on AWS as CloudFormation to provision all these infrastructure resources. They're going to do it much more rapidly and if you want to use something like Lambda@Edge, we've started to introduce additional components for this alternative for hosting your frontends.

In this particular case, we'll be looking at two different options to actually deploy your frontends, but you can use a lot of different frontend frameworks or tools that work with these two different options.

The first one I'm thinking of is the Lambda@Edge. In this particular case, we'll demonstrate it with a Next.js website and show you how this will give you the options to use things like server side rendering.

However, there's also the option to use a website component to do static builds. These builds will be able to be deployed with a static website component and be hosted in all those AWS resources that I just mentioned with S3 hosting the website files and configuring everything else with services like ACM for HTTPS, CloudFront for content distribution and caching, and also Route 53 for the custom domain name. Don't worry if that's a lot of jargon.

Well, you won't even have to really deal with those services when you're using these components and if you want more details on that, jump into the next videos when we do more of that configuration manually and you'll see what you've saved in terms of time using these components.

I also want to point out that Serverless Components is still in beta. This means that you can't currently integrate it with other serverless services and it's not going to be enabled with the monitoring you might see in the dashboard @ dashboard.serverless.com.

This means that you can expect to see full integration with other framework features later on, but at the moment, if you need all of those integrations, Serverless Components might not be the best option.

However, if you're just trying to get jump started straight into deploying a website and you don't have a bunch of other dependencies, this is a really good fast way to get yourself started. So let's go ahead and look at the next videos first with Austin demonstrating how we can use a website component to deploy an application on AWS. So I'll see you in the next videos.

Get updated when a new course is released