Tanushree Aggarwal

Posted on Nov 21

Amplify your web development speed with "AWS Amplify"

#webdev #aws #cloudcomputing

Introduction:

We live in the age of THE WEB. Knowing how to host a website is essential in today’s digital age. It empowers individuals and businesses to establish their online presence, share their ideas, and reach broader audiences. It provides full control over how your website operates, looks, and functions, allowing customization to suit personal or professional needs. To many, this may still seem like a daunting task. Gone are the days when you needed to rely on third parties or host your own web servers to be able to publish a website. In this blog I will be demonstrating a way to host a website, just with a few simple clicks.

Services :

AWS Amplify:

AWS Amplify is everything you need to build web and mobile apps. Easy to start, easy to scale.
If I had to describe AWS Amplify in 3 words, I would say "hosting made simple".
Few reasons why you should make "AWS Amplify" your best friend:

deploying application frontends with simple Git based workflows
spinning up multiple environments by connecting branches from Git (or any other version control system)
support for numerous languages, ranging from Java to Typescript to React
built-in CI/CD, eliminating the need for manual code updates/deployment

Goal:

In this demo, we will be deploying a website using a single AWS service AWS Amplify, under five minutes and zero dollar spend! We will then modify the website code and see what kind of changes need to be performed to our deployment, in order to reflect the updated code.

Pre-requisites :

AWS IAM account (do not use root account) having:
- admin privileges
- access to AWS Management Console
A Github (or any other VCS like Bitbucket) account

Cost :

None (if you have an AWS free-tier eligible account). Check AWS Amplify pricing details here

Implementation:

Let's begin!

Before we begin with the AWS bit, let us get our website code ready.

This does not have to be a fancy website; our aim is to understand the integration, so we will be using a basic HTML file. You can of-course choose to go full Ninja if that is what you prefer!

Login to your Github account and create a new repository.
Create your website homepage index.html file. If you are not a HTML wizard (like me), do not panic! I have you covered here! Simply copy-paste the following code, and save it as index.html.

Note: It is mandatory that you name the main file as index.html.
AWS Amplify requires an index.html file primarily because it acts as the entry point for a web application.

Optionally save any jpeg image with the name welcome.jpg under the same path. (This is just for aesthetic, you can totally skip this step)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin: 0;
            padding: 0;
            background-color: #000000;
        }
        h1 {
            color: #db3f30;
        }
        h2 {
            color: #da3728;
        }
        img {
            width: 300px;
            height: auto;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>Welcome to my AWS Amplify demo website</h1>
    <img src="welcome.jpg" alt="Welcome Image">
</body>
</html>

We are now ready to host this static website using AWS Amplify.

Login to the AWS Management Console as an IAM user, and switch to the region of your choice. In this demo I will be using eu-central-1, but you can choose one closer to your geographical location.
From the Services hamburger menu navigate to AWS Amplify

This will take you to the Amplify homepage.
Click Deploy an App
Amplify supports integration with a number of Version Control Systems. Select your preferred tool, and click Next. I will be working with Github in this demo.
Select Github and click Next
A pop-up appears on the screen. This may differ from the below screenshot, depending on which version control tool you chose at step-4. Verify your identify and authorize AWS Amplify to access your VCS system.
Next, you will be prompted to select the repositories you want AWS Amplify to be able to access.
Click Only selected repositories and select the desired repository from the drop-down list.

Note: As per the security best practice Principle of least privilege, it is advisable to select specific repositories, and avoid selecting the All repositories option.
Note: You may be prompted for a MFA code, if you have this security feature enabled for your Github account.
If you granted permissions to multiple repositories, select the relevant repo from the dropdown list at this stage. Additionally, select the repo branch which has the code for the website. To reiterate, the index.html needs to be at the repo landing path.
Give the application a name, and click Next
Review the details, and click Save and deploy
Now we wait! The deployment may take a few minutes to complete.
Once the deployment is complete, and you see the deployed status on your screen, cross your fingers and click Visit deployed URL.
Tada! our website is deployed!

Impressed?

Bonus

Hold on! Our demo does not end here!

In the real world, we seldom deploy the complete website in the first attempt. Often any code goes through multiple iterations, before the final version.

Suppose this is the case with our demo website as well. To publish the updated code, we do not need to repeat the whole process!
AWS Amplify is that one best friend, who notices even the slightest change in our mood and adapts accordingly!

Confused? Let me demonstrate!

Let us make some modifications to theindex.html in our github repo .

I have simply added a new h2 to the body section.

<body>
    <h1>Welcome to my AWS Amplify demo website</h1>
    <h2>Did you like my AWS Amplify demo?</h2>
    <p></p>
    <img src="welcome.jpg" alt="Welcome Image">
</body>

As soon as I click commit in my Github repo, AWS Amplify detects the change, and starts a new deployment!

Open the deployment URL when the status changes to deployed. This may take a few minutes to complete.

Our updated code is reflecting on our website!

This did not require any manual intervention or redeployment!
The deployment URL remains unchanged after the update
AND there was ZERO downtime during the upgrade!

If you weren't impressed before, I am sure you are NOW!

So, are you going to AWS Amplify a try?

The capabilities of AWS Amplify do not end here. In fact, this was just the tip of the iceberg!
In an upcoming blog, I will be demonstrating how AWS Amplify can be integrated with other AWS services.

Till then, give AWS Amplify a try and come back for more such content.

Happy learning!