Deploy the Dashboard Frontend with Amplify Hosting

Learning Outcomes

By the end of this lesson, you will be able to:

1. Deploy the dashboard frontend to Amplify Hosting without a Git repository.
2. Explain the difference between the temporary amplifyapp.com URL and a custom domain.
3. Add a custom domain in Amplify, especially when the domain is in Route 53.
4. Explain when to use the default Amplify-managed certificate versus a custom ACM certificate.

---

The Core Idea

Amplify Hosting can publish a web app without connecting a Git provider. AWS supports manual deployments where you drag and drop a zipped build folder. For this dashboard, this is often the fastest path to a secure, production-ready URL.

---

Before You Deploy

Before you zip the frontend, make sure your frontend files are pointing at the correct production backend values:

• Your real API_BASE_URL (from API Gateway)
• Your Cognito settings (User Pool ID and Client ID)

---

Part 1: Prepare the Frontend Files

Your deployment artifact should contain the contents of your build output, not the entire project source folder. If you are using a standard static setup, this means your index.html, CSS, and JavaScript files.

Note: Amplify manual deployments are for static sites and single-page apps (SPAs). They do not support server-side rendered (SSR) apps.

---

Part 2: Zip the Frontend

Create a .zip file that contains your files. The maximum size for a manual deployment is 5 GB, which is far more than a typical dashboard requires.

---

Part 3: Create the Amplify App

In the AWS Console:

1. Navigate to AWS Amplify.
2. Choose Create new app.
3. Select Deploy without Git.
4. Enter an App name and a Branch name (e.g., production).
5. Drag and drop your .zip file into the upload area.
6. Choose Save and deploy.

---

Part 4: Test the Default Amplify URL

After deployment, Amplify provides a default URL shaped like: https://branch-name.random-id.amplifyapp.com

Always test this URL first to verify that:

• The UI loads correctly.
• API calls are authorized.
• Login/Logout flows work.

Testing the default URL helps separate deployment issues from DNS/domain issues.

---

Part 5: Add a Custom Domain

Once the default URL works, you can connect your own domain (e.g., dashboard.yourname.com).

If your domain is in Route 53:

1. Open your Amplify app and go to Hosting > Custom domains.
2. Choose Add domain.
3. Enter your root domain and choose Configure domain.
4. Amplify will automatically detect Route 53 and offer to create the necessary records for you.

---

Part 6: Choose the Certificate Option

Amplify gives you two choices for SSL/TLS:

1. Amplify-managed certificate (Recommended): Amplify issues and automatically renews the certificate for you. It's free and requires zero maintenance.
2. Custom certificate: You can use your own certificate from ACM, but it must be in the us-east-1 Region.

---

Lab Checklist

---

Micro-activity 1: Reflection

---

Micro-activity 2: Match the Deployment Concepts

---

Summary

In this lesson, you moved your frontend from a "dev-only" S3 website endpoint to a production-ready home on Amplify Hosting. You now have HTTPS by default, a global CDN, and an easy path to a custom domain.

---

Quiz