Hackforge Academy

Explanation

Continuous Integration and Continuous Delivery automate testing, building, and deploying applications. A React CI/CD pipeline can deploy changes whenever code is pushed to a selected branch.

Code:

Developer push
      |
      v
Install dependencies
      |
      v
Run tests and build
      |
      v
Deploy to AWS

Explanation

Automated tests help detect broken components before deployment. Add a test command to the pipeline and fail the build when tests do not pass.

Code:

npm ci
npm test -- --run
npm run build

Explanation

Amplify Hosting can automatically build and deploy a React application after changes are pushed to a connected branch. This is useful for simple frontend delivery workflows.

Code:

main branch push
        |
        v
Amplify build
        |
        v
Deploy React dist/ files
        |
        v
Application updated

Explanation

AWS CodePipeline can coordinate source retrieval, build steps, testing, and deployment. It can be combined with CodeBuild and S3 or CloudFront hosting.

Code:

CodeCommit or GitHub
          |
          v
      CodePipeline
          |
          v
       CodeBuild
          |
          v
       S3 deploy

Explanation

Development, staging, and production environments may use different API URLs and settings. Store environment-specific configuration securely and deploy each branch to the correct environment.

Code:

Development:
VITE_API_BASE_URL=https://dev-api.example.com

Production:
VITE_API_BASE_URL=https://api.example.com