Deploy Frontend apps with AWS Amplify

Amplify was introduced to me in my school time in grade seven in the science subject. It was fun to learn and experiment with physic during those times. The Amplify that we are gonna dive into it is quite a different one, not the old school days. I got introduced to AWS Amplify during the pandemic with lightsail. In this blog post, we will go over a general overview of AWS Amplify and deployment guides of modern frontend applications with amplify hosting.

Amplify

AWS Amplify is a set of tools and abstractions that brings the power of AWS to developers. It allows web and mobile developers to create full-stack applications more quicker. In a few minutes, you can set up resources on the web, mobile, storage, and many more. AWS Amplify was built under Apache 2.0. It includes a wide variety of open-source libraries. It supports drag-and-drop UI components that developers can use.

Amplify wraps everything up for you. It helps to host your static content and dynamic procedures with various programming. You can also integrating other service like the lambda functions ,SES many more. It offers the possibility to generate AWS services based on a set of functionality categories. These categories are:

• Authentication: Fast and easy authentication and authorization out-of-the-box
• API: Create and use a REST or GraphQL API as a gateway to other services in AWS, such as Lambda functions or databases
• Storage: Used for storing and retrieving user-generated content on AWS such as photos, videos, or other files.
• Geo: Location-based functionality such as maps and location search
• Hosting: Hosting your app on AWS and setting up a CI/CD pipeline
• Interactions: Create chatbots for your application
• PubSub: Connectivity with cloud-based message-oriented middleware
• DataStore: Use on-device persistent storage to be able to use your application when offline
• Functions: Create Lambda functions that are linked to an API or create CRON jobs
• Analytics: Add tracking of user behavior of your apps
• AI/ML Predictions: Use AI/ML to add functionality such as text translation, speech-to-text, and entity recognition in images
• Push Notifications: Send messages to your customers to improve engagement
• Extensibility: Leverage any other AWS service that is not covered by the categories above by using AWS CDK

Guides

We are here for AWS Amplify Hosting. AWS Amplify Hosting is a managed CI/CD and hosting service for web applications . It scales, serves content with low latency from AWS’s reliable CDN. It also reduces the cost of hosting and operating web application infrastructures. It supports modern web frameworks such as React, Angular, Vue, Next.js, Gatsby, Hugo, Jekyll, and more.

I am going to jump over Amplify console for the deployment of the frontend application.

• Login to your AWS account and choose AWS Amplify in the services.

• Once you get logged into your AWS Amplify console, click “Get started”. It scrolls down to the “Get started” section at Amplify Hosting.

We choose Amplify Hosting at this moment as it should be according to our requirements. It will take you to the page where you can host your own React or any other application . You can connect the source code from the Git repository (or) if you don’t have any code. You can also scroll down and click “Continue” in the form full-stack samples option.

• First, connect your centralized code repository. E.g., Github, BitBucket, GitLab. You will need to allow AWS Amplify to communicate with it. Here, I clicked to connect the GitHub account and give permission to access my project.

• Select your production branch where the code gets merged. I’ve selected the main branch, as shown below.

The image given below shows the frontend build settings. Let’s accept the default.

As soon as the branch is selected, AWS Amplify detects the frontend framework that you’ve used. It will then suggest suitable build settings for you.

You can edit these settings, depending on your needs.

AWS takes some time to provision, build, deploy and verify once you created.

Missing things

Here in this guide, there are lots of things that were missed.

• Custom Domain with Free SSL Certificate

For SEO purposes, Google will lower your website ranking if you don’t set up the SSL. Attaching an SSL certificate is almost an a-must-to-do for the deployment. AWS Amplify Console helps you attach a custom domain to your website with a Free SSL certificate.

• Many environments for dev, stag, QA, and many more

This will be useful for development, and QA/Testing purposes.

Create many branches at the centralized code repository. We can configure the project to checkout code and build corresponding application environments. You can also configure custom sub-domains for many (dev, test) environments.

I had also written a blog on Git and Github.

Once you are ready for production release, merge the code into the main branch which triggers the production pipeline. Hence, the application will be deployed in the real world.

• Enable to build preview feature for Pull/Merge Request

• Protect your site via password

If you wanted to confirm the site with stakeholders on a new feature before realizing it to the public. Hence, you can prevent unwanted people to access by adding password protection. And this is straightforward with Amplify console.

Pricing

The pricing for the AWS amplify for its libraries and components is free. Yes, you heard that right, it is free. You need to pay for the only part when you use the services to build and deploy your application. After the completion of the free tier plan, you have to pay US$ 0.01 per build minute for building and deploying. Konw more here.

Feedbacks

• Documentation still lacks integration of other CI tools.
• Amplify could not handle cross-account deployment.
• Build and deploy scripts are isolated. Hence you cannot package up once and deploy to many environments.

Conclusion

You made it till the end. Thank you for reading. You have learned about AWS Amplify and how to deploy frontend apps with Amplify hosting. If you have any excellent practices via IaC that have helped you over time, I’d love to know. Feel free to provide feedback or reach out to me via Twitter. I look forward to hearing from you!