Deploy Frontend with AWS Amplify Hosting

Use AWS Amplify Hosting to publish the React/Vite frontend as a production web application. This step should be completed after the Cognito User Pool is created and after the API Gateway Invoke URL is available from section 5.7.3.

1. Goal

Deploy the DocuFlow AI frontend from GitHub, configure production environment variables, verify the Amplify domain, and confirm the hosted application can call the backend API.

2. Prerequisites

Before starting, prepare these values:

Do not put server-side secrets in Vite variables. Any variable prefixed with VITE_ is bundled into the browser application.

3. Deploy with Amplify Hosting

1. Open the AWS Amplify console.
2. Choose New app -> Host web app or Deploy an app.
3. Select your Git provider, for example GitHub, then authorize the AWS Amplify GitHub App if prompted.
4. Select the repository that contains the frontend source code.
5. Select the branch to deploy, for example main.
6. If the repository is a monorepo, set the application root to:

apps/web

7. On the build settings page, confirm or replace the build specification with:

version: 1
applications:
  - appRoot: apps/web
    frontend:
      phases:
        preBuild:
          commands:
            - corepack enable
            - pnpm install --frozen-lockfile
        build:
          commands:
            - pnpm run build
      artifacts:
        baseDirectory: dist
        files:
          - '**/*'
      cache:
        paths:
          - node_modules/**/*
          - apps/web/node_modules/**/*

8. Add the production environment variables:

VITE_COGNITO_REGION=ap-southeast-1
VITE_COGNITO_USER_POOL_ID=ap-southeast-1_xxxxxxxxx
VITE_COGNITO_CLIENT_ID=xxxxxxxxxxxxxxxxxxxxxxxxxx
VITE_API_BASE_URL=https://xxxxxxxxxx.execute-api.ap-southeast-1.amazonaws.com/dev

9. Review the configuration and choose Save and deploy.
10. Wait for the build pipeline to finish. The stages should complete successfully: Provision, Build, Deploy, and Verify.
11. Open the Amplify domain, for example:

https://main.xxxxx.amplifyapp.com

4. Configure SPA Routing

If refreshing a frontend route returns a 404 page, add a rewrite rule in Amplify:

Save the rule and redeploy the app if Amplify prompts you to do so.

5. Verify the Hosted Frontend

1. Open the Amplify app URL.
2. Register or sign in with a Cognito test user.
3. Enter the verification code sent by email to confirm the account.
4. Confirm the user is created and confirmed in the Cognito User Pool.
5. Sign in to the application dashboard.
6. Choose Upload document to open the document upload flow.
7. Select a sample invoice or document to upload.
8. Click Upload and process and wait for the frontend to submit the file to the backend.
9. Open the document detail page to inspect extracted data and review status.
10. Review and approve the result to confirm the frontend calls API Gateway successfully.
11. Open the S3 Raw bucket and verify the uploaded file appears under the expected prefix:

raw/{userId}/{documentId}/original.pdf

If the browser reports a CORS error, update the API Gateway CORS configuration to allow the Amplify domain, then redeploy the API stage.