Serverless Container Framework (SCF) streamlines the development and deployment of containerized applications on AWS Lambda and/or AWS Fargate ECS.

This example demonstrates how to build and deploy a React application using SCF. The application is bundled using esbuild and optimized for production deployments on AWS Fargate ECS.

• React Framework:
  Builds a client-side React application with a component-based architecture.
• Fast Bundling with esbuild:
  Uses esbuild for rapid development builds and efficient bundling.
• Static Asset Serving:
  Supports serving static assets and client-side routing.
• Flexible Compute Options:
  Configured for AWS Fargate ECS to accommodate larger bundle sizes that might exceed AWS Lambda request/response limits.

Docker:
Install and start Docker Desktop. (Get Docker)

Serverless Framework:
Install globally:

npm i -g serverless

Node.js & npm:
Ensure you have a recent Node.js LTS version installed.

AWS Credentials:
Set up your AWS credentials (via environment variables or profiles) for SCF deployment.

The SCF configuration is defined in the serverless.containers.yml file at the project root:

name: react

deployment:
  type: awsApi@1.0

containers:
  service:
    src: ./service
    routing:
      pathPattern: /*
      pathHealthCheck: /health
    environment:
      HELLO: world
    compute:
      # awsLambda is not recommended for this React app.
      # The bundled app may exceed AWS Lambda's request/response size limits.
      type: awsFargateEcs

A typical project structure for this React example:

example-react/
├── serverless.containers.yml      # SCF configuration file
└── service/
    ├── package.json                # Project configuration and dependencies
    ├── public/                     # Static assets (HTML, CSS, images, etc.)
    ├── server.js                   # Server entrypoint for serving the React app
    └── src/
        ├── index.jsx              # React application entrypoint
        └── (other components)      # React components and logic

For local development, use Serverless Container Framework's development mode:

serverless dev

This will automatically start the development environment with hot reloading and AWS-like routing.

Deploy your React application to AWS by running:

serverless deploy

SCF takes care of building the container image (using the provided Dockerfile) and provisioning the necessary resources.

To remove the deployed AWS resources, run:

serverless remove --force --all

• Serverless Container Framework Documentation
• React Documentation
• esbuild Documentation
• Docker Documentation
• AWS Fargate Documentation