Hosting Frontend App on AWS Amplify Using GitHub

If you're building a frontend and want an easy, scalable way to host it, AWS Amplify is a great choice. With direct GitHub integration, you can set up continuous deployment in minutes. In this guide, you'll learn how to:

• Connect your GitHub repo to AWS Amplify

• Automatically build and deploy your React app

• Enable custom domains and environment variables

---

Prerequisites

Before you start, make sure you have:

• A Frontend app (I’ll be using React)

• A GitHub repository (with your project pushed)

• An AWS account (Create one if you don’t have it)

---

Folder Structure (Example)

Make sure your project structure looks something like:

my-react-app/
├── public/
├── src/
├── package.json
├── .gitignore
└── ...

---

Step 1: Push Your React App to GitHub

If your app isn’t already on GitHub:

git remote add origin https://github.com/yourusername/my-react-app.git
git add .
git commit -m "Initial commit"
git push -u origin main

---

Step 2: Open AWS Amplify

1. Go to AWS Amplify Console

2. Click “Get Started” under “Host your web app”

3. Choose GitHub as your source provider

4. Authorize AWS Amplify to access your GitHub account (if not done already)

5. Select the repository and branch of your React project

---

Step 3: Configure Build Settings

Amplify will auto-detect it’s a React app and suggest a default build config:

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: build
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

You can customize this if needed (e.g., for monorepos or custom directories).

Click Next.

---

Step 4: Deploy

1. Review the settings

2. Click “Save and Deploy”

3. Amplify will pull your code from GitHub, run the build commands, and deploy it.

Once done, you’ll see a live URL (like https://main.branchname.amplifyapp.com)

---

Step 5: Add Custom Domain (Optional)

1. In Amplify Console, go to Domain Management

2. Click Add Domain

3. Choose your domain (must be registered with Route 53 or elsewhere)

4. Configure subdomains (e.g., www or app)

5. Amplify will handle SSL setup automatically

---

Step 6: Add Environment Variables (Optional)

You can set API keys, backend URLs, etc.:

1. Go to your Amplify app dashboard

2. Click on the Environment Variables section

3. Add key-value pairs

4. Trigger a redeploy for the changes to apply

---

Step 7: Enable Continuous Deployment

Every time you push to the selected branch in GitHub, Amplify will:

• Pull the latest code

• Rebuild the app

• Deploy the new version live automatically

---

Bonus: Best Practices

• Use .env.production for production variables

• Enable Amplify’s branch previews for feature branches

• Use Amplify’s access control to password-protect environments

---

🧠 Summary

AWS Amplify makes hosting React apps incredibly easy:

---

📬 Need Help?

If you face any issues while hosting your Frontend app on AWS Amplify or have questions about CI/CD, custom domains, or GitHub integration — feel free to reach out!

📧 Contact Me: [khantanseer43@gmail.com]
Happy to help! 😊