Skip to content

README.md

Latest commit

 

History

History
158 lines (108 loc) · 4.21 KB

README.md

File metadata and controls

158 lines (108 loc) · 4.21 KB

Rover Frontend

Develop Release

Description

This repository contains the Rover Frontend, a React-based application designed to interact with the Curiosity Rover API. It includes advanced features such as:

  • Integration with Amazon Cognito User Pools for user authentication.
  • Amazon CloudFront for secure, low-latency HTTPS hosting of the frontend.
  • CI/CD pipelines for both develop and release branches.

Key Features

  • Cognito User Pools: Enables secure user authentication using a hosted UI.
  • CloudFront Distribution: Provides HTTPS hosting and caching for the frontend, ensuring secure and fast delivery of content.
  • CI/CD Pipelines: Automates deployment processes for both development and production environments.

Getting Started

Prerequisites

  • Node.js (v18 or later)
  • AWS CLI
  • SAM CLI
  • Access to an AWS account with sufficient permissions
  • GitHub Actions secrets for AWS_ACCESS_KEY and AWS_SECRET_ACCESS_KEY

Project Structure

.
├── src/                    # Source code for the React app
│   ├── components/         # React components
│   ├── App.js              # Main app file
│   ├── App.test.js         # Unit tests for the app
│   └── index.js            # Entry point for the React app
├── sam/                    # SAM templates for infrastructure
│   └── template.yaml       # SAM template for the infrastructure
├── .github/workflows/      # GitHub workflows
│   ├── develop.yml         # Workflow for develop branch
│   └── release.yml         # Workflow for release branch
└── README.md               # Project documentation

CI/CD Pipelines

Develop Pipeline

Triggered on every push to the develop branch. This pipeline performs the following steps:

  1. Lint: Checks the codebase using ESLint.
  2. Test: Runs unit tests using Jest.
  3. Validate: Validates the SAM template.

Release Pipeline

Triggered on every push to the release branch. This pipeline performs the following steps:

  1. Deploy Infrastructure: Deploys resources defined in the SAM template, including Cognito User Pools and CloudFront.
  2. Build: Builds the React application.
  3. Sync to S3: Uploads the React app to the S3 bucket for hosting.

Authentication with Cognito User Pools

The application integrates with Amazon Cognito User Pools for secure user authentication. The authentication flow includes:

  • A hosted UI for login.
  • Tokens (idToken, accessToken, and refreshToken) are securely handled in localStorage.
  • A logout button to securely end user sessions.

Hosting with CloudFront

The frontend is hosted using Amazon CloudFront to provide:

  • HTTPS Support: Ensures secure communication between the browser and the app.
  • Caching: Improves performance and reduces latency for end users.

Usage

Running Locally

  1. Install dependencies:

    npm install

  2. Start the development server:

    npm start

  3. Access the app at http://localhost:3000.

Running Tests

Run all unit tests with Jest:

npm test

Validating Infrastructure

Validate the SAM template locally:

sam validate -t ./sam/template.yaml --region <your-region>

Deployment

Manual Deployment

To deploy infrastructure and sync the app manually:

  1. Deploy infrastructure using SAM:

    sam deploy --guided

  2. Build the React app:

    npm run build

  3. Sync the build folder to S3:

    aws s3 sync ./build s3://<your-bucket-name> --delete

Contributing

  1. Fork this repository.
  2. Create a feature branch.
  3. Submit a pull request.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Contact

For questions or suggestions, please open an issue in this repository.