1. Continuous Deployment

A Continuous Deployment Pipeline is essential for modern application development. It helps you automate the delivery of your application as soon as the developers commit code. That will, in turn, help your team focus on building features that matter to the business, and not worrying about time-consuming deployment.

Here is how you’d set up a Continous Deployment Pipeline with AWS Amplify Console.

Step 01 — Connect your Code Repository

First, connect your centralized code repository. E.g., Github, BitBucket, GitLab. You will need to authorize AWS Amplify to communicate with it.

Step 02 — Adding the Repo Branch

Select your production branch where the code gets ultimately merged. I’ve selected the “master” branch, as shown below.

Step 03 — Configure Build Settings

As soon as the branch is selected, AWS Amplify automatically detects the frontend framework that you’ve used to develop the application. It will then suggest suitable build settings for both Frontend and Backend. You can edit these settings, depending on your needs.

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

Step 05 — Save & Deploy

That’s it! Now you can save the pipeline configurations, and Amplify will not only start building the application for the first time but also attach a domain URL to view the application.

Whenever there is a code change in the master branch, AWS Amplify will re-build the project and deploy it.

View the application using the URL

2. Add a Custom Domain with Free SSL Certificate

Google will lower your website ranking if it doesn’t have an SSL certificate attached. You will also see warning messages indicating that your site is not secure. So, attaching an SSL certificate is almost a-must-to-do when deploying your website.

AWS Amplify Console helps you attach a custom domain to your website with a Free SSL certificate and configure subdomains. Here is how you do it.

Step 01 — Purchase a Domain and Configure Nameservers.

First of all, you need to buy a domain. If you purchase it from Domain Registrars like GoDaddy, Namecheap, etc. you should configure its nameservers to point to AWS. Here is a video that’ll guide you on that.

Step 02 — Attach the Custom Domain

Next, go to the “Domain Management” section in the AWS Amplify Console and click “Add Domain.”

Select the custom domain and click on the “configure domain” to create sub-domains and redirections.

In the image below, you can see how I configure my main domain (coffeelove.tk) to redirect to www.coffeelove.tk, which displays my website.

AWS Amplify Console has acquired a managed SSL certificate from AWS, and attaches it to my domain automatically.

The preview of the site with an SSL certificate attached

3. Creating Dev/Test Environments

When you build production applications, you probably need multiple application environments other than the production environment. That will be useful for developer testing, QA testing, Staging, etc.…

Let’s see how to create two environments — Dev and Test for the example CoffeeLove application.

Step 01 — Create New Branches for Dev and Test Environments

We should start by creating two branches at the centralized code repository. Have a look at the Github example below.

When we have separate branches, we can configure the Amplify Console to checkout code separately and build corresponding application environments.

Step 02 — Creating Build Pipelines for Dev and Test

You can now select the “Connect Branch” button on the Amplify Web Hosting Console and connect the two branches.

As is discussed in the Continuous Deployment section, select the dev and test git branches and set up Continuous Deployment pipelines for Dev and Test.

Once both the pipelines are built and two environments are created, you can go tothe “Domain Management” section and configure custom sub-domains for Dev and Test environments.

Finally, your app dashboard will look like as follows.

The Team Workflow

Now each time when you commit code to the dev branch, a development build will be triggered. Developers can then test their features in the dev environment.

After that, the dev branch code will be merged into the test branch. Then, the test pipeline will be triggered, and QAs can run their test suites in the test environment.

Finally, when you are ready for a production release, merge the code into the master branch. It will trigger the production pipeline, and the application will be deployed to production.

4. Password Protect Your Site (My favorite feature*)

Let’s imagine that you are working on a new version of the application. Before releasing it to the public, you would need to validate the site with your stakeholders. So how would you do that?

One of the options is to create a new application environment and share the link directly with the stakeholders. However, the website URL is public. Anyone can access it.

You can prevent unwanted people from accessing it by adding Password Protection to the site. Now, this is straightforward with Amplify Console.

Go to the “Manage Access” Section of the Amplify Console.

Let’s imagine that you have created a new environment called version2, which references your new version.

Select the version2 branch as a “Restricted” branch and add a username and password to it. That’s it!

If we go to version2.coffeelove.tk, it will ask for username and password to preview the website.

Password Protected Website

5. Pull Request Previews (PR Previews)

If your team uses the Pull Request model to review and merge developer codes, this feature is a Gem!

We can configure AWS Amplify Console to temporarily create application environments using the code change of the developer’s PR. So the reviewer can test the feature, improvement, or bug fix of the developer directly in the PR preview environment. Once the code and the functionality are tested, the reviewer will merge the PR, and the PR preview environment will be destroyed automatically.

Here is how you set it up.

Step 01 — Enabling PR Previews

Goto “Previews” section of the Amplify Console and click on the “Enable Previews” button.

Step 02 — Install Github App

As the next step, you will be prompted to install the Github app so that Amplify can send PR updates to Github.

Step 03 — Enable PR Preview to the

Next, select the branch that the PR will be merged, and it will enable PR Previews for that branch. Each time a developer sends a PR to the selected branch, a new preview environment will be initialized.

Finally, you can see the PR Build Status under the Github PR itself. :)

Summary

AWS Amplify simplifies both web/mobile development and deployment. In this article, we have discussed powerful web hosting features that you can enable easily with Amplify Web Hosting.

I have referenced some video links if you like to follow the video version of implementing the features.

Thanks for reading and if you have any questions, let me know in the comments below 😊

Learn More