Serverless computing provides us with benefits such as reduced operation cost and development time. It allows us to focus on our code to provide business value to the users without worrying about building and maintaining servers. AWS is one of the many providers of serverless computing services. In this post, I'll show you how to deploy the React application using the AWS Amplify CLI.
Serverless is a cloud-computing execution model in which the cloud provider is responsible for executing a piece of code by dynamically allocating resources to run the code when needed. In previous posts leading up to this point, we looked at what serverless is, and we set up our computer to be able to build serverless applications using AWS Amplify. We bootstrapped a React project and used the Amplify CLI to provision a secured backend API, a NoSQL database, and Amazon Pinpoint for usage tracking. In this post, I will show you how to host the React application we built, on AWS.
Amazon Simple Storage Service (S3) can be used to host web applications. To achieve this, you'll need to upload the files for your website to an S3 bucket, and then configure the bucket for hosting. We want to make this process easy for us, so we will use AWS Amplify CLI to configure hosting for our React application. Open the command line, switch to the directory containing the React project, and follow the instruction below to include a hosting resource to the Amplify project.
amplify add hosting. This will prompt you to select a deployment environment setup. Choose
Devand press Enter.
This added the hosting resource locally. If you open the folder amplify/backend, you'll find a hosting folder with a S3AndCloudFront/template.json file denoting information for the hosting configuration. We will push these files to the cloud, and AWS CloudFormation will create and configure S3 and CloudFront to run our application. Open the command line and run
amplify publish. It shows you the state of your Amplify project resources with a prompt asking if it should continue with the command. You should notice a new Hosting resource listed, with operation marked as Create. Press Enter for the CLI to run its operation.
amplify publish pushes update of our backend resources to the cloud. With the information logged in the command line, you'll notice it created an S3 bucket with the right policy and configured it for hosting, thereby printing the URL to access it. As soon as this is finished, it runs the script to build the React project, thereby generating files that can be deployed to S3. When the project is built successfully, it uploads the files to the S3 bucket created for hosting and opens the URL in the browser.
Hooray! We shipped the app and it's accessible via a public URL. The hosting resource can be updated if you want to change the website index and error docs, or configure CloudFront. You can do this by running
amplify hosting configure command in the command line. This should present you with 3 options:
You can further configure Amazon Route 53 to register a custom domain for the application. You can follow this guide to register and configure a custom domain for the application.
In this post, I showed you how to set up and host your web app with AWS Amplify CLI. We used the command
amplify add hosting to add hosting to the project and
amplify publish to build and upload the latest code to the S3 bucket for hosting. This shows that with AWS Amplify, hosting and deployment are achieved with two commands, and in under 15 minutes.
In previous posts, I walked through installing and configuring AWS Amplify CLI, initializing the Amplify and React project, building and consuming API, and then tracking usage metrics. In the next post, we will end the series by looking at Amplify Console, which is a continuous deployment and hosting service for mobile web applications.
The links below will take you to the different posts in this series.