cdk react

🎯 As the frontend for the Serverless Application on AWS, this React application has been bootstrapped with Create React App.

💎 The AWS CDK Construct cdk-spa for deploying Single-Page Application (Angular/React/Vue) to AWS S3 behind CloudFront CDN, Route53 DNS, Certificate Manager in minutes.

💎 The CDK Construct cdk-cognito for deploying Amazon Cognito to provide authentication, authorization, and user management for web & mobile applications.

https://www.youtube.com/watch?v=A3miMT1CKYI

1. Create a Serverless Application using the AWS Cloud Development Kit (CDK) ⚙️

This is the CDK source code for deploying a Serverless Application ⚡ on AWS, which includes the infrastructure for the ReactJS Frontend, NodeJS Backend, Cognito authentication, authorization, and user management, CodeBuild / CodePipeline DevOps CI/CD, and IAM / KMS / CloudWatch Operation.

Step 1.1. Create an AWS CDK app cdk

CDK_APP_ID=cdk
mkdir $CDK_APP_ID && cd $CDK_APP_ID

cdk init app --language typescript

Step 1.2. Installing cdk-spa for deploying frontend

npm install --save cdk-spa
- cdk-spa Option 1. Basic setup needed for a non-SSL, non cached S3 website.
- cdk-spa Option 2. S3 deployment will be created, which is fronted by a Cloudfront Distribution.
- cdk-spa Option 3. The deployment of S3, Cloudfront Distribution, ACM SSL certificates, and Route53 hosted zones.
💎 This CDK TypeScript Construct Library cdk-spa includes a construct CdkSpa and an interface CdkSpaProps to make deploying a Single Page Application (SPA) Website (React.js / Vue.js / Angular) to AWS S3 behind CloudFront CDN, Route53 DNS, Certificate Manager SSL as easy as 5 lines of code.

Step 1.3. Usage of CDK constructs Serverless/cdk/lib/frontend-stack.ts

import { StackProps, Stack } from 'aws-cdk-lib';
import { Construct } from 'constructs';
import { CdkSpa } from 'cdk-spa';

interface Props extends StackProps {
  contentBucket: string;
}

export class FrontendStack extends Stack {
  constructor(scope: Construct, id: string, props: Props) {
    super(scope, id, props);

    /**
     * 1. Encrypted S3 Bucket
     * 2. Deploying a SPA-Website to AWS S3 behind CloudFront CDN
     * 3. Auto Deploy to/from Hosted Zone Name
     */
    new CdkSpa(this, 'CDK-SPA Website behind Cloudfront CDN', {
      bucketName: props.contentBucket,
      encryptBucket: true,
      // ipFilter: true,
      // ipList: ['1.1.1.1']
    })
      /* Option 1. Basic setup needed for a non-SSL, non vanity url, non cached S3 website. */
      .createSiteS3({
      // /* Option 2. S3 deployment will be created, which is fronted by a Cloudfront Distribution. */
      // .createSiteWithCloudfront({
      // /* Option 3. The deployment of S3, Cloudfront Distribution, ACM SSL certificates, and Route53 hosted zones. */
      // .createSiteFromHostedZone({
      //   zoneName: 'serverless.aws.oceansoft.io',
        indexDoc: 'index.html',
        websiteFolder: '../frontend'
      });

  }
}

Step 1.4. Usage of CDK Application Serverless/cdk/bin/cdk.ts

#!/usr/bin/env node
import 'source-map-support/register';
import * as cdk from 'aws-cdk-lib';

import { FrontendStack } from "../lib/frontend-stack";

const APP_ID = "Serverless";

const account = process.env.AWS_ACCOUNT;
const region = process.env.AWS_REGION;
const contentBucketName = `${APP_ID}-${account}-${region}-content`.toLowerCase();

const app = new cdk.App();

/**
 * 1. AuthStack
 * 2. BackendStack
 * 3. FrontendStack
 * 4. OpsStack
 * 5. DashboardStack
 */

/* 3. FrontendStack */
const frontend = new FrontendStack(app, APP_ID.concat("-Frontend"), {
  contentBucket: contentBucketName,
  // env: { account: account, region: region },
});

cdk.Tags.of(frontend).add("APP_ID", APP_ID);

Step 1.5. CDK Deployment deploy.sh

echo "Boostrap the AWS Account/Region you plan to deploy to ..."
cdk bootstrap aws://${AWS_ACCOUNT}/${AWS_REGION}

echo "Installing & building ..."
npm install
npm run build

echo "deploy this stack to your AWS account/region"
cdk deploy --all --require-approval never

⚠️ CDK v1 👇

https://www.youtube.com/watch?v=3IC1edBb2BA
✅ Source Code: https://github.com/OceanSoftIO/Serverless/cdk

2. Deploying a CDK Application using AWS CloudShell 🆓

🆓 CloudShell provides you with a browser-based shell to run scripts and commands. It includes 1 GB of persistent storage per Region at no extra cost to you.

git clone https://github.com/OceanSoftIO/Serverless

cd Serverless/cdk
./deploy.sh

3. Create React Application `frontend`

✅ Frontend Tech Stack: ✅ React.js || ☑️ Next.js || ☑️ Angular || ☑️ Vue
To boot up Create React App, use the following command-line:
```
npx create-react-app frontend

cd frontend
npm start
```
☑️ Running Tests with the React Testing Library
```
npm run test
```
☑️ Changing the App’s MetaData || Images || Other Types of Assets

☑️ Installing Dependencies
```
npm install axios
```
☑️ Importing components

☑️ Styling React App with CSS

☑️ Building and Publishing the React App
```
npm run build
```

4. Deploying Amazon Cognito `cdk-cognito`

💎 The CDK Construct cdk-cognito for deploying Amazon Cognito to provide authentication, authorization, and user management for web & mobile applications.

5. When & Why & Should Developers consider Micro-frontends

📚 Micro-Frontends in context

6. Server-Side Rendering Micro-Frontend

Micro-Frontend

Micro-frontends are a very effective way to embrace distributed systems on the front end using a Serverless approach. As every Serverless Micro-Frontend returns an HTML fragment (HTML-on-the-wire), a UI composer stitches together these independent components, creating a seamless user experience.
- This architecture starts with Amazon CloudFront that has two origins: an Amazon Simple Storage Service (Amazon S3) bucket, and a public Application Load Balancer.
- The Amazon S3 bucket contains all the static files to be served for the browser, such as common micro-frontend dependencies, images, or CSS files. Additionally, it contains the templates required by the UI composer for placing each micro-frontend on an HTML page.
- The UI composer is an AWS Fargate cluster that combines different micro-frontends into one and serves the results to the browser in real-time, streamlining the response to improve the performance of web applications. Using an Amazon ElastiCache cluster can increase performance even further by caching some micro-frontend output or the entire page.
- Use AWS Systems Manager Parameter Store to collect all the micro-services endpoints. They can be HTTP endpoints, or Amazon Resource Names (ARNs) of a specific service such as AWS Lambda or AWS Step Functions. By decoupling, you maintain independence between the teams working on the application.
- The serverless micro-frontend is composed of AWS Lambda and Amazon DynamoDB for storing the data that will be rendered. The output is an HTML fragment ready to be embedded in the template composed by the UI composer.
- Utilizing Amazon API Gateway, which validates tokens or API keys, ensures that only your application can access those endpoints if you work with third parties in the same application.
- Step Functions Express provides a low-code solution for creating micro-frontends. Step Functions' integration with over 200 services allows you, for example, to retrieve data natively from Amazon DynamoDB and delegate only the rendering of that data to an AWS Lambda function.

[💪 FullStack Serverless ⚡ Frontend 💎] Deploying Single-Page Application (SPA) with AWS CDK V2 🆓

Comments

⛅️ AWS Cloud

⛅ Architecture Patterns for building Serverless Applications ⚡

More from this blog

ADLC Framework: Enterprise AI Agent Governance for Multi-Cloud DevSecOps

Local Testing Strategy for AWS Infrastructure

AI-Powered AWS Network Architecture Discovery Automation & Cost Optimization

Agile SDLC Workflow for HITL + AI Agents

Expose Kubernetes Microservices hosted on Private Subnets and On-Premises Networks

1. Create a Serverless Application using the AWS Cloud Development Kit (CDK) ⚙️

2. Deploying a CDK Application using AWS CloudShell 🆓

3. Create React Application `frontend`

4. Deploying Amazon Cognito `cdk-cognito`

5. When & Why & Should Developers consider Micro-frontends

6. Server-Side Rendering Micro-Frontend

Command Palette

Comments

⛅️ AWS Cloud

⛅ Architecture Patterns for building Serverless Applications ⚡

More from this blog

1. Create a Serverless Application using the AWS Cloud Development Kit (CDK) ⚙️

2. Deploying a CDK Application using AWS CloudShell 🆓

3. Create React Application frontend

4. Deploying Amazon Cognito cdk-cognito

5. When & Why & Should Developers consider Micro-frontends

6. Server-Side Rendering Micro-Frontend

3. Create React Application `frontend`

4. Deploying Amazon Cognito `cdk-cognito`