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.htmlfile. If you are not a HTML wizard (like me), do not panic! I have you covered here! Simplycopy-pastethe following code, and save it asindex.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
Serviceshamburger menu navigate toAWS 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 withGithubin this demo.
SelectGithuband clickNext
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 Amplifyto access your VCS system.
-
Next, you will be prompted to select the
repositoriesyou wantAWS Amplifyto be able to access.
ClickOnly selected repositoriesand 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 theAll repositoriesoption.
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 branchwhich has the code for the website. To reiterate, theindex.htmlneeds 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
deployedstatus on your screen, cross your fingers and clickVisit 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
h2to thebodysection.
<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!
References:
- Getting Started with Amplify
- Development with AWS Amplify
- AWS Amplify FAQ
- Banner image and demo-website image are AI generated, using DALL-E
Top comments (4)
I'm building an app with VueJs and NodeJs - Can I host both front & backend using Amplify? Can they use the same Amplify insance?
Yes, AWS Amplify allows you to host both the frontend and backend components of your application on the same platform. However, they are typically managed as separate parts of the project. While they are deployed together as part of the same Amplify project, the frontend and backend operate independently. Amplify makes it easy to integrate them through its seamless backend management tools.
Very good one for reference, I've used it but never configured myself, do you know what is the quota for the free tier?
Thanks
Hi Dusan, The free-tier quota limit is pretty great! Deployments free throughout the 12 month free-tier cycle, 1000 build minutes/month, 15GB egress, 500k requests/month just to list a few. For the complete details, refer the link under the "cost" section of this blog.