Getting Started With AWS Amplify

Getting Started With AWS Amplify

AWS Amplify is a set of tools and services offered through Amazon Web Services to help developers build and deploy web and mobile applications in the cloud.

amplify-sandbox.png

It supports major frameworks and languages like JavaScript, React, Angular, Vue, Android, iOS, React Native, Flutter and can be easily integrated with other AWS services. On the surface, it looks like a new service. However, if we dig into it, AWS Amplify is a repackaged set of tools and services that are already available within the AWS ecosystem.

The perk of this is that the services are more likely to work with each other seamlessly as they are under the same ecosystem of service offerings. All the services and tools packaged and marketed under the AWS Amplify umbrella can be categorized under three umbrellas: develop, deliver, and manage. Here is a rundown of each category and what they encompass.

Develop with AWS Amplify

awsamplify-console.png

The tools and apps available under AWS Amplify develop track are geared at providing developers with services and tools that are often associated with fullstack web and mobile apps. It includes services such as authentication, storage (via S3), APIs through GraphQL and REST support, cloud functions, AWS-based analytics consoles, push notifications, and AI/ML integrations.

Deliver with AWS Amplify

awsamplify-deliver.png

The deliver portion of AWS Amplify focuses on delivering and hosting static web applications. You can easily connect Git repositories for deployments, configure custom build settings and deploy applications to any CDN within a few minutes. Deliver services includes CI/CD, monitoring, custom domain integrations, PR Previews, and cloud hosting capabilities.

Manage with AWS Amplify

awsamplify-manage.png

When it comes to software development, there's more to it than just putting it in the cloud. Managing your app with AWS Amplify involves user accessibility, management, and content controls.

Getting started with AWS Amplify

Here's a quick guide on how to get started with AWS Amplify. In this mini-tutorial, we will cover the following actions:

  • How to connect a code repository to AWS Amplify
  • How to select your branch for deployment
  • How to configure AWS Amplify build commands
  • How to handle multiple environments
  • How to add custom domains to your AWS Amplify app

How to connect a code repository to AWS Amplify

To connect AWS Amplify to your code repository, you need an AWS account. You also need to log into the AWS console and select Amplify from the service list.

awsamplify-config.png

Then select Get Started under the Deliver track, and you will be redirected to a new page. There you can select the Git provider of your codebase and connect the repository with Amplify.

awsamplify-getstarted.png

After selecting, you will be asked to authorize Amplify to access your repository, and you will be redirected to the next page.

How to select your branch for deployment

To select your branch, select the repository and branch you need to deploy.

awsamplify-github.png

It is always a good practice to maintain separate environments for development, testing, and production servers. In my example, I will only deploy my dev branch.

Similarly, we can deploy test and production branches. Amplify will use them to build, deploy and host independent environments.

How to configure AWS Amplify build commands

By default, Amplify provides a template for build configuration. Here is the space where you can go through the build template commands as necessary.

awsamplify-configbuild.png

Once completed, you can click on continue, review all the settings and deploy the application.

awsamplify-build.png

It will take a few minutes to complete. By default, Amplify will use its *amplifyapp.com* domain to host the application.

If you have a custom domain, you can also integrate it with Amplify.

How to handle multiple environments

Most software development teams maintain several environments for development, testing and production purposes. Here is how we can use Amplify to maintain separate deployment pipelines for these environments.

Besides, after deploying the first branch, you can click on the Connect Branch button and continue the process again from Step 2 to deploy multiple branches as you wish.

awsamplify-multiplebranches.png

You can see all the deployments in the Amplify console as shown above, and each of them will have unique URLs prefixed with the branch name.

How to add custom domains to your AWS Amplify app

Amplify provides options to integrate custom domains with hosted applications. You need to create a hosted zone for your custom domain. This can be achieved through AWS Route 53.

Creating a Hosted Zone with AWS Route 53

Route 53 can be found through the AWS service list in the navigation bar. There, you will find an option to create a hosted zone. After that, you will be redirected to a page like below where you need to enter domain name, type and a description.

awsamplify-hostedzones.png

The hosted zone will be created within a few seconds, and then you need to copy value/Route traffic values from the nameserver (NS) record to your domain providers dashboard.

*Note:* Make sure that you don’t copy the last full stop in the URLs.

awsamplify-route.png

Configuring the Custom Domain

Now we can map the custom domain to Amplify. First, you need to go back to Amplify console and select the Domain management option in the left sidebar.

awsamplify-customdomains.png

Then, click the Add domain button. There, you will be able to select the URL configured from Route 53. After choosing the correct domain, click the Configure domain button.

awsamplify-routes2.png

After that, you will see an option to configure the subdomains. There, you can select the branches and add custom subdomains as you prefer.

awsamplify-routes3.png

After saving the changes, Amplify will create a new SSL certificate for your domain using the Amazon certificate manager . This will be renewed automatically upon expiry, so there is no need to manually do it.

awsamplify-routes4.png

That’s basically it. You have successfully created a continuous deployment pipeline for 3 environments and integrated them to a custom domain into your AWS Amplify app.

AWS Amplify is great for starter apps

AWS Amplify is a full packaged cloud platform that includes everything you might need for your app. In a way, it is comparable to Google's Firebase and Digital Ocean's App Platform.

The idea behind AWS Amplify is that you start on the platform and it manages cloud infrastructure for you at a competitive price. It uses currently Amazon Web Services offerings but makes it easier to navigate through the myriad of offerings they currently have. This means frontend, backend, database, security and authentication are packaged to work together in a seamless manner.

Share this post