Hackforge Academy

Explanation

AWS Amplify Hosting provides a managed way to deploy frontend applications. It supports React, automatic builds, custom domains, environment variables, and integration with Git repositories.

Code:

Typical flow:
1. Push React code to Git
2. Connect the repository to Amplify
3. Select the branch
4. Configure build settings
5. Deploy the application

Explanation

Amplify can connect to repositories hosted on platforms such as GitHub, GitLab, Bitbucket, or AWS CodeCommit. Every new commit can trigger a deployment.

Code:

git init
git add .
git commit -m "Initial React application"
git branch -M main
git remote add origin <repository-url>
git push -u origin main

Explanation

Amplify needs build instructions to install dependencies, create the production build, and publish the generated files. Vite React applications normally publish the dist directory.

Code:

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

Explanation

Environment variables can store configuration such as API URLs. Do not place private keys or AWS secret credentials in frontend environment variables because frontend values are visible in the browser.

Code:

VITE API BASE URL=https://api.example.com

// React usage
const apiUrl = import.meta.env.VITE API BASE_URL;

Explanation

Preview deployments create temporary environments for branches or pull requests. They help developers test UI changes before merging code into the main branch.

Code:

Feature branch:
feature/login-page

Pull request:
feature/login-page -> main

Amplify can build a preview URL for review.