Build a Basic Web Application
Module 1: Create a Web App
In this module, you will deploy static resources for your web application using the AWS Amplify console
In this module, you will use the AWS Amplify console to deploy the static resources for your web application. In subsequent modules, you will add dynamic functionality to these pages using AWS Lambda and Amazon API Gateway to call remote RESTful APIs. (REST, which stands for Representational State Transfer, is an architectural pattern for creating web services. API stands for application programming interface. Thus, a RESTful API is one that implements that architectural pattern.)
If you are nervous about working with so many new things, don't worry! You won't use other AWS services right now, and you also don't need to run any web servers to make your website available. (A "server" is software or a hardware device that accepts and responds to requests made over a network.)
The website will be an extremely simple "Hello World" page, and we will add more functionality in later modules.
For most real applications, you will want to use a custom domain to host your site. A custom domain is a unique branded name that identifies a website, such as www.amazon.com. If you're interested in this, Amplify provides support for custom domains as well.
What you will accomplish
In this module, you will:
- Create an Amplify app
- Upload files for a website directly to Amplify
- Deploy new versions of a webpage with Amplify
Static website – A static website has fixed content, unlike dynamic websites. Static websites are the most basic type of website and are the easiest to create. All that is required is creating a few HTML pages and publishing them to a web server.
Web hosting – Provides the technologies/services needed for the website to be viewed on the internet.
AWS Regions – Separate geographic areas that AWS uses to house its infrastructure. These are distributed around the world so that customers can choose a Region closest to them to host their cloud infrastructure there.
Minimum time to complete
- A text editor. Here are a few free ones:
Create a web app with Amplify console
- Open your favorite text editor on your computer. Create a new file and paste the following HTML in it:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello World</title> </head> <body> Hello World </body> </html>
2. Save the file as index.html.
3. ZIP (compress) only the HTML file.
4. In a new browser window, log into the Amplify console. Note: We will be using the Oregon (us-west-2) Region for this tutorial.
5. In the Get Started section, under Host your web app, choose the orange Get started button.
6. Select Deploy without Git provider. This is what you should see on the screen:
7. Choose the Continue button.
8. In the App name field, enter GettingStarted.
9. For Environment name, enter dev.
10. Select the Drag and drop method. This is what you should see on your screen:
11. Choose the Choose files button.
12. Select the ZIP file you created in Step 3.
13. Choose the Save and deploy button.
14. After a few seconds, you should see the message Deployment successfully completed.
Test your web app
1. Select Domain Management in the left navigation menu.
2. Copy and paste the URL displayed in the form into your browser.
Your web app will load in a new browser tab and render "Hello World." Congratulations!
Here is what our architecture looks like right now:
It is pretty minimal right now because we are only using the AWS Amplify console. We now have a live web app users can interact with. Next, we will create a Lambda function.