Amplify has everything we need to build full-stack web and mobile apps on AWS. Amplify Hosting enables developers build the apps with the Amplify Framework to continuously deploy updates to their backend and frontend on every code commit.
Hosting static web assets
In my project where I had built a serverless web application, I'd leveraged AWS Amplify hosting for deployment and hosting of the static web resources including HTML, CSS, JavaScript, and image files which were loaded in my repo.
Here's a quick look at how it works:
.26991c2935dc23236759635449c17c56e549658a.png)
After building, deploying my web application and configuring the API Gateway endpoint, it was finally the time to initialise Amplify, so that I could create the necessary backend services needed to support the app. This was done by configuring Amplify hosting. We use the 'amplify init' command to initialize it.
When we initialize a new Amplify project, a few things happen:
It creates a top level directory called amplify that stores our backend definition. As we add features, the amplify folder will grow with infrastructure-as-code templates that define our backend stack. It is the best practice way to create a replicable backend stack.
It creates a file called aws-exports.js in the src directory that holds all the configuration for the services we create with Amplify. This is how the Amplify client is able to get the necessary information about our backend services.
Now that I'd built something, it was the time to deploy it to the web with Amplify Console! We can manually deploy our web app or setup automatic continuous deployment. However, I'd opted for the prior option and went ahead. Following is a summary of how that was done:
After running the 'amplify add hosting' command, was prompted to select a plugin to use for hosting. So I selected the Hosting with Amplify Console, and had then chosen manual as the deployment method. In the concluding step using the 'amplify publish' command, the CloudFormation stack was deployed and I'd received my URL for accessing the web application!
Amplify or Amazon S3 ?
One may also wonder about choosing Amazon S3 (Simple Storage Service) buckets for storing, accessing the files having static web assets & eventually host the website, integrating it further with AWS CloudFront for delivering that content globally with low latency.
While both S3 and Amplify are a good fit, the difference comes down to the following:
CI/CD - Somewhere down the road, there will definitely be some collaborations on the projects. So we need to set up a repo and a pipeline of some sort to allow collaboration and automated deployments to the website. Amplify will set up the pipeline for us.
All we really have to do is point our Amplify project to our repo (GitHub, BitBucket, CodeCommit, etc). Amplify will build and deploy our website when it detects a change on the remote branch. Additionally, we can create and deploy to different environments (dev, test, prod) using the Amplify CLI.
Infrastructure as a code (IaC) -Suppose we want to set up Cognito and API Gateway for our website. One option could be to set them up manually in the console and document the steps we take, or spend the time to code those services in Cloudformation or CDK.
With Amplify, we can run a few commands and Amplify would configure and deploy those services for us. When we update our configurations via the Amplify CLI, Amplify will update the Cloudformation code to keep track of our changes.
So if you are building a truly static S3 website with no backend service and you do not plan on updating it on a regular basis, then a static S3 website might be the right choice for you. Whereas if you need to build something quickly that requires basic functionality, then Amplify would make a great fit. Also, if you care about infrastructure as a code, you will appreciate that fact that Amplify writes all that code for you.
Because the best kind of code is the code that you do not have to write :)