rolling-scopes-school · lexmil · Feb 15, 2025 · Feb 15, 2025 · Feb 21, 2025 · Feb 22, 2025
diff --git a/.gitignore b/.gitignore
@@ -13,6 +13,7 @@ coverage
 dist
 dist-ssr
 *.local
+*.d.ts
 
 # Editor directories and files
 .vscode/*
@@ -24,3 +25,7 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# CDK asset staging directory
+.cdk.staging
+cdk.out
diff --git a/.npmignore b/.npmignore
@@ -0,0 +1,6 @@
+*.ts
+!*.d.ts
+
+# CDK asset staging directory
+.cdk.staging
+cdk.out
diff --git a/Agent b/Agent
diff --git a/README.md b/README.md
@@ -1,3 +1,9 @@
+## [CloudFront](https://d2b96icd4snjtl.cloudfront.net/)
+
+## [S3 Bucket](http://reactshopfrontend-alexmlogicalbucketidb65779d4-px3z7nuunokf.s3-website.eu-central-1.amazonaws.com/)
+
+---
+
 # React-shop-cloudfront
 
 This is frontend starter project for nodejs-aws mentoring program. It uses the following technologies:

diff --git a/bin/app.ts b/bin/app.ts
@@ -0,0 +1,13 @@
+#!/usr/bin/env node
+import 'source-map-support/register';
+import * as cdk from 'aws-cdk-lib';
+import { FrontendStack } from '../lib/frontend-stack';
+
+const app = new cdk.App();
+new FrontendStack(app, 'ReactShopFrontend', {
+  env: {
+    account: process.env.CDK_DEFAULT_ACCOUNT,
+    region: process.env.CDK_DEFAULT_REGION || 'eu-central-1'
+  },
+  description: 'React Shop Frontend Infrastructure'
+});
diff --git a/cdk.json b/cdk.json
@@ -0,0 +1,19 @@
+{
+  "app": "npx tsx bin/app.ts",
+  "watch": {
+    "include": [
+      "**"
+    ],
+    "exclude": [
+      "README.md",
+      "cdk*.json",
+      "**/*.d.ts",
+      "**/*.js",
+      "tsconfig.json",
+      "package*.json",
+      "yarn.lock",
+      "node_modules",
+      "test"
+    ]
+  }
+}
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>My shop</title>
+    <title>4 shopping</title>
   </head>
   <body>
     <div id="app"></div>

diff --git a/lib/frontend-stack.ts b/lib/frontend-stack.ts
@@ -0,0 +1,57 @@
+import * as cdk from 'aws-cdk-lib';
+import * as s3 from 'aws-cdk-lib/aws-s3';
+import * as cloudfront from 'aws-cdk-lib/aws-cloudfront';
+import * as origins from 'aws-cdk-lib/aws-cloudfront-origins';
+import * as s3deploy from 'aws-cdk-lib/aws-s3-deployment';
+import { RemovalPolicy } from 'aws-cdk-lib';
+
+export class FrontendStack extends cdk.Stack {
+  constructor(scope: cdk.App, id: string, props?: cdk.StackProps) {
+    super(scope, id, props);
+
+    // Create an S3 bucket for the website
+    const websiteBucket = new s3.Bucket(this, 'alexm-logical-bucket-id', {
+      autoDeleteObjects: true,
+      removalPolicy: RemovalPolicy.DESTROY,
+      blockPublicAccess: s3.BlockPublicAccess.BLOCK_ALL
+    });
+
+    // Create a CloudFront distribution
+    const distribution = new cloudfront.Distribution(this, 'alexm-distribution-id', {
+      defaultBehavior: {
+        origin: origins.S3BucketOrigin.withOriginAccessControl(websiteBucket),
+        viewerProtocolPolicy: cloudfront.ViewerProtocolPolicy.REDIRECT_TO_HTTPS,
+        cachePolicy: cloudfront.CachePolicy.CACHING_OPTIMIZED,
+        compress: true,
+      },
+      defaultRootObject: 'index.html',
+      errorResponses: [
+        {
+          httpStatus: 404,
+          responseHttpStatus: 200,
+          responsePagePath: '/index.html',
+        },
+        {
+          httpStatus: 403,
+          responseHttpStatus: 200,
+          responsePagePath: '/index.html',
+        }
+      ]
+    });
+
+    // Deploy the React application to S3
+    new s3deploy.BucketDeployment(this, 'alexm-deployment-id', {
+      sources: [s3deploy.Source.asset('./dist')],
+      destinationBucket: websiteBucket,
+      distribution,
+      distributionPaths: ['/*'],
+      prune: true
+    });
+
+    // Output the CloudFront URL
+    new cdk.CfnOutput(this, 'CloudFrontURL', {
+      value: `https://${distribution.distributionDomainName}`,
+      description: 'URL for website',
+    });
+  }
+}