Watching: The Serverless Website Component with React

From: Serverless for Frontend Developers

What are Serverless Components?

Next.js & Lambda @ Edge with Serverless Components

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

Lesson Info

A tutorial on how you can easily deploy React applications that are fast, cheap and distributed globally


Here's a tutorial on how you could deploy React applications so they are fast, global and cheap to host. The outcome of this is a website with a React app, a custom domain, and SSL certificate, basically, everything you need to be production ready. And all of this will be made simple via the Serverless Framework and its new Serverless Components feature.

Your React app will be distributed via a global content delivery network. This enables it to have incredibly fast performance around the world and we will be using possibly the cheapest infrastructure to do this, which is S3 in CloudFront from Amazon Web Services. How cheap are they? Well, for a year you could transfer 50 gigabytes of data and serve 2 million requests a month for free. After that, it'll cost you 8 to 2 cents per gigabyte depending on how much data you transfer, plus 1 cent per 10,000 HTTPS requests.

Check out the AWS CloudFront pricing page for more details. You will have to pay for your custom domain. However, you'll get a free public SSL certificate from AWS Certificate Manager. Now a disclaimer. I did not analyze all the options on the market for static site hosting before this, so I'm not aware of what cheaper alternatives exist, but S3 and CloudFront have been around for many years. They're reliable and fast.

Actually, many products for static site hosting are built on S3 and CloudFront and charge you a markup. The reason why developers don't use plain AWS S3 and AWS CloudFront is because the experience of using them is just too darn complicated compared to other offerings. However, this is where the Serverless Framework comes in. It brings a great developer experience to all infrastructure providers and it focuses especially on infrastructure with auto scaling pay peer use, AKA serverless qualities.

Before doing anything that you'll need to have an AWS account. You must have a credit card to sign up, though you will not be charged until you go over their free tier limits. Login to AWS, navigate to the IAM dashboard so you can create access keys that the Serverless Framework will use to provision the infrastructure needed for your React website. Go to users and click add user. Give it a name that includes Serverless Framework, then click to enable programmatic access, and click next. Select attach existing policies directly. Check the box next to administrator access. Hit next and next again to skip the tag screen, then hit create. Later, you may want to scope down these permissions so the Serverless Framework will have the least amount of access necessary, though this can be complex because the Serverless Framework uses many AWS services.

To give you a head start if you want to do this, the website component currently uses S3 Certificate Manager, CloudFront, and Route 53 and needs access specifically for those. Copy the access key ID and the secret access key, you'll need them in a second. Now it's time for the fun Serverless Framework part. Make sure you have no JS installed. Then install Serverless Framework via NPM and add the global flag. Make sure you're using Serverless Framework version 1.49 or later. And a hint, if you're installing it right now, you probably are. To do this, we're going to use a website template that has all of the scaffolding you need to get started quickly, and you can install the template using this command. This will create a website folder for you with all the scaffolding in it. Go into that folder and install the React dependencies via NPM by running NPM Install. Also in the website folder, create a file named .env and paste in your AWS keys formatted like this.

You're done with the setup, now it's time to start development. This project uses React and Parcel for building and bundling the application. You can also run the application locally with Parcel using this command. Now you could develop and see changes immediately thanks to hot module reloading. Out of the box, the website templates should be ready to deploy. If you look in your serverless.yml File, you will see a Serverless Component in it titled Website.

A Serverless Component is simply code that knows how to deploy the Cloud infrastructure needed to create a specific outcome or use case. Serverless Components are open source and you could use them to easily deploy lots of use cases on serverless Cloud infrastructure. Check them out here. Every Serverless Component has an inputs property, which allows you to configure the use case that the component will provision.

For example, here, you could see the source input that points to the directory containing your website assets as well as a hook that could be called to build your website before deployment. This way you don't have to run the build script before deploying, it just happens as part of the deployment process. All right, let's get to the deployment part. To deploy your React app in the website folder, simply run the serverless command. Your website should deploy in less than a minute and you should get a URL pointing to your live website. The first deployment always takes the longest because creating Cloud resources can be more time consuming than updating them. To set up your custom domain, your CloudFront CDN, and an SSL certificate, you'll need to do one manual step. You must log into your AWS account and purchase your domain. Currently, the website component only works with domains purchased on AWS Route 53.

Go to AWS Route 53's dashboard, register your domain, and wait for the registration to complete. This might take up to an hour. Once it is completed, simply add in the custom domain to the website component's inputs. Run the serverless command again and it will acknowledge the new input and set up your custom domain, your CloudFront CDN, and SSL certificate. You'll need to wait for your new domain to propagate to the DNS servers around the world. This might take up to an hour. Though once it's available, you'll be able to see your website under your new custom domain with an SSL certificate.

Every time you run serverless to deploy changes to your website, the website component will invalidate the assets you have cached in AWS CloudFront. This will enable you to see changes almost immediately. And that's it. If you want to go further and build out a full stack application just as easily as this website, check out the full stack application template. This will give you everything you need to deliver a fast, cheap, and global entire serverless application. Enjoy.

Get updated when a new course is released