fix: dependencies for make project workable.

.eslintignore

@@ -0,0 +1,4 @@
+node_modules
+public
+vite.config.ts
+serverless.yml

.eslintrc

@@ -0,0 +1,24 @@
+{
+  "root": true,
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "project": ["./tsconfig.json", "./aws_cdk/tsconfig.json"]
+  },
+  "extends": [
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended",
+    "plugin:react/jsx-runtime",
+    "plugin:prettier/recommended",
+    "prettier"
+  ],
+  "plugins": ["@typescript-eslint", "react", "prettier"],
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  }
+}

.gitignore

@@ -1,27 +1,30 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
 
-# dependencies
 node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# production
-build
 .serverless
+coverage
+dist
+dist-ssr
+*.local
 
-# misc
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
 .DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
 
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
 
-/.idea
-.vscode
+# env
+.env

.prettierrc

@@ -0,0 +1,9 @@
+{
+  "prettier/prettier": [
+    "error",
+    {
+      "singleQuote": true,
+      "parser": "flow"
+    }
+  ]
+}

README.md

@@ -1,45 +1,60 @@
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+# React-shop-cloudfront
+
+This is frontend starter project for nodejs-aws mentoring program. It uses the following technologies:
+
+- [Vite](https://vitejs.dev/) as a project bundler
+- [React](https://beta.reactjs.org/) as a frontend framework
+- [React-router-dom](https://reactrouterdotcom.fly.dev/) as a routing library
+- [MUI](https://mui.com/) as a UI framework
+- [React-query](https://react-query-v3.tanstack.com/) as a data fetching library
+- [Formik](https://formik.org/) as a form library
+- [Yup](https://github.com/jquense/yup) as a validation schema
+- [Vitest](https://vitest.dev/) as a test runner
+- [MSW](https://mswjs.io/) as an API mocking library
+- [Eslint](https://eslint.org/) as a code linting tool
+- [Prettier](https://prettier.io/) as a code formatting tool
+- [TypeScript](https://www.typescriptlang.org/) as a type checking tool
 
 ## Available Scripts
 
-In the project directory, you can run:  
-You can use NPM instead of YARN (Up to you)  
+### `start`
 
-### `yarn start` OR `npm run start`
+Starts the project in dev mode with mocked API on local environment.
 
-Runs the app in the development mode.<br />
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+### `build`
 
-The page will reload if you make edits.<br />
-You will also see any lint errors in the console.
+Builds the project for production in `dist` folder.
 
-### `yarn test` OR `npm run test`
+### `preview`
 
-Launches the test runner in the interactive watch mode.<br />
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+Starts the project in production mode on local environment.
 
-### `yarn build` OR `npm run build`
+### `test`, `test:ui`, `test:coverage`
 
-Builds the app for production to the `build` folder.<br />
-It correctly bundles React in production mode and optimizes the build for the best performance.
+Runs tests in console, in browser or with coverage.
 
-The build is minified and the filenames include the hashes.<br />
-Your app is ready to be deployed!
+### `lint`, `prettier`
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+Runs linting and formatting for all files in `src` folder.
 
-### `yarn eject` OR `npm run eject`
+### `cdk:deploy`
 
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+Builds and deploy on AWS
 
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+### `cdk:destroy`
 
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+Remove deploy from AWS
 
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+## AWS
 
-## Learn More
+1. `npm install -g aws-cdk`
+1. make dir for CDK scripts `mkdir aws_cdk && cd aws_cdk`
+1. once run bootstrapping `cdk bootstrap`
+1. come back to main three `cd ..`
+1. use `npm run cdk:deploy` for deploy
 
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+## Task-02 (links will be remove after same time)
 
-To learn React, check out the [React documentation](https://reactjs.org/).
+- [manual S3 deployment](http://rs-aws-dev.s3-website.us-east-2.amazonaws.com/)
+- [manual Cloudfront deployment](https://d3ran6b1rodd0j.cloudfront.net/)
+- [CDK deployment](https://d3fihs3nsna7qy.cloudfront.net/)

aws_cdk/.gitignore

@@ -0,0 +1,8 @@
+*.js
+!jest.config.js
+*.d.ts
+node_modules
+
+# CDK asset staging directory
+.cdk.staging
+cdk.out

aws_cdk/.npmignore

@@ -0,0 +1,6 @@
+*.ts
+!*.d.ts
+
+# CDK asset staging directory
+.cdk.staging
+cdk.out

aws_cdk/README.md

@@ -0,0 +1,14 @@
+# Welcome to your CDK TypeScript project
+
+This is a blank project for CDK development with TypeScript.
+
+The `cdk.json` file tells the CDK Toolkit how to execute your app.
+
+## Useful commands
+
+* `npm run build`   compile typescript to js
+* `npm run watch`   watch for changes and compile
+* `npm run test`    perform the jest unit tests
+* `npx cdk deploy`  deploy this stack to your default AWS account/region
+* `npx cdk diff`    compare deployed stack with current state
+* `npx cdk synth`   emits the synthesized CloudFormation template

aws_cdk/bin/aws_cdk.ts

@@ -0,0 +1,18 @@
+#!/usr/bin/env node
+import "source-map-support/register";
+import * as cdk from "aws-cdk-lib";
+import { AwsCdkStack } from "../lib/aws_cdk-stack";
+
+const app = new cdk.App();
+new AwsCdkStack(app, "AwsCdkStack", {
+  /* If you don't specify 'env', this stack will be environment-agnostic.
+   * Account/Region-dependent features and context lookups will not work,
+   * but a single synthesized template can be deployed anywhere. */
+  /* Uncomment the next line to specialize this stack for the AWS Account
+   * and Region that are implied by the current CLI configuration. */
+  // env: { account: process.env.CDK_DEFAULT_ACCOUNT, region: process.env.CDK_DEFAULT_REGION },
+  /* Uncomment the next line if you know exactly what Account and Region you
+   * want to deploy the stack to. */
+  // env: { account: '123456789012', region: 'us-east-1' },
+  /* For more information, see https://docs.aws.amazon.com/cdk/latest/guide/environments.html */
+});

aws_cdk/cdk.json

@@ -0,0 +1,72 @@
+{
+  "app": "npx ts-node --prefer-ts-exts bin/aws_cdk.ts",
+  "watch": {
+    "include": [
+      "**"
+    ],
+    "exclude": [
+      "README.md",
+      "cdk*.json",
+      "**/*.d.ts",
+      "**/*.js",
+      "tsconfig.json",
+      "package*.json",
+      "yarn.lock",
+      "node_modules",
+      "test"
+    ]
+  },
+  "context": {
+    "@aws-cdk/aws-lambda:recognizeLayerVersion": true,
+    "@aws-cdk/core:checkSecretUsage": true,
+    "@aws-cdk/core:target-partitions": [
+      "aws",
+      "aws-cn"
+    ],
+    "@aws-cdk-containers/ecs-service-extensions:enableDefaultLogDriver": true,
+    "@aws-cdk/aws-ec2:uniqueImdsv2TemplateName": true,
+    "@aws-cdk/aws-ecs:arnFormatIncludesClusterName": true,
+    "@aws-cdk/aws-iam:minimizePolicies": true,
+    "@aws-cdk/core:validateSnapshotRemovalPolicy": true,
+    "@aws-cdk/aws-codepipeline:crossAccountKeyAliasStackSafeResourceName": true,
+    "@aws-cdk/aws-s3:createDefaultLoggingPolicy": true,
+    "@aws-cdk/aws-sns-subscriptions:restrictSqsDescryption": true,
+    "@aws-cdk/aws-apigateway:disableCloudWatchRole": true,
+    "@aws-cdk/core:enablePartitionLiterals": true,
+    "@aws-cdk/aws-events:eventsTargetQueueSameAccount": true,
+    "@aws-cdk/aws-iam:standardizedServicePrincipals": true,
+    "@aws-cdk/aws-ecs:disableExplicitDeploymentControllerForCircuitBreaker": true,
+    "@aws-cdk/aws-iam:importedRoleStackSafeDefaultPolicyName": true,
+    "@aws-cdk/aws-s3:serverAccessLogsUseBucketPolicy": true,
+    "@aws-cdk/aws-route53-patters:useCertificate": true,
+    "@aws-cdk/customresources:installLatestAwsSdkDefault": false,
+    "@aws-cdk/aws-rds:databaseProxyUniqueResourceName": true,
+    "@aws-cdk/aws-codedeploy:removeAlarmsFromDeploymentGroup": true,
+    "@aws-cdk/aws-apigateway:authorizerChangeDeploymentLogicalId": true,
+    "@aws-cdk/aws-ec2:launchTemplateDefaultUserData": true,
+    "@aws-cdk/aws-secretsmanager:useAttachedSecretResourcePolicyForSecretTargetAttachments": true,
+    "@aws-cdk/aws-redshift:columnId": true,
+    "@aws-cdk/aws-stepfunctions-tasks:enableEmrServicePolicyV2": true,
+    "@aws-cdk/aws-ec2:restrictDefaultSecurityGroup": true,
+    "@aws-cdk/aws-apigateway:requestValidatorUniqueId": true,
+    "@aws-cdk/aws-kms:aliasNameRef": true,
+    "@aws-cdk/aws-autoscaling:generateLaunchTemplateInsteadOfLaunchConfig": true,
+    "@aws-cdk/core:includePrefixInUniqueNameGeneration": true,
+    "@aws-cdk/aws-efs:denyAnonymousAccess": true,
+    "@aws-cdk/aws-opensearchservice:enableOpensearchMultiAzWithStandby": true,
+    "@aws-cdk/aws-lambda-nodejs:useLatestRuntimeVersion": true,
+    "@aws-cdk/aws-efs:mountTargetOrderInsensitiveLogicalId": true,
+    "@aws-cdk/aws-rds:auroraClusterChangeScopeOfInstanceParameterGroupWithEachParameters": true,
+    "@aws-cdk/aws-appsync:useArnForSourceApiAssociationIdentifier": true,
+    "@aws-cdk/aws-rds:preventRenderingDeprecatedCredentials": true,
+    "@aws-cdk/aws-codepipeline-actions:useNewDefaultBranchForCodeCommitSource": true,
+    "@aws-cdk/aws-cloudwatch-actions:changeLambdaPermissionLogicalIdForLambdaAction": true,
+    "@aws-cdk/aws-codepipeline:crossAccountKeysDefaultValueToFalse": true,
+    "@aws-cdk/aws-codepipeline:defaultPipelineTypeToV2": true,
+    "@aws-cdk/aws-kms:reduceCrossAccountRegionPolicyScope": true,
+    "@aws-cdk/aws-eks:nodegroupNameAttribute": true,
+    "@aws-cdk/aws-ec2:ebsDefaultGp3Volume": true,
+    "@aws-cdk/aws-ecs:removeDefaultDeploymentAlarm": true,
+    "@aws-cdk/custom-resources:logApiResponseDataPropertyTrueDefault": false
+  }
+}

aws_cdk/construct/task02.ts

@@ -0,0 +1,80 @@
+#!/usr/bin/env node
+import * as s3 from "aws-cdk-lib/aws-s3";
+import * as cloudfront from "aws-cdk-lib/aws-cloudfront";
+import * as s3deploy from "aws-cdk-lib/aws-s3-deployment";
+import * as cloudfront_origins from "aws-cdk-lib/aws-cloudfront-origins";
+import { Duration, RemovalPolicy, Stack } from "aws-cdk-lib";
+import * as iam from "aws-cdk-lib/aws-iam";
+import { Construct } from "constructs";
+
+/**
+ * Static site infrastructure, which deploys site content to an S3 bucket.
+ * full code on https://github.com/aws-samples/aws-cdk-examples/blob/main/typescript/static-site/static-site.ts
+ */
+
+export class Task02 extends Construct {
+  constructor(parent: Stack, name: string) {
+    super(parent, name);
+
+    const cloudfrontOAI = new cloudfront.OriginAccessIdentity(
+      this,
+      "cloudfront-OAI",
+      {
+        comment: `OAI for ${name}`,
+      }
+    );
+
+    // Content bucket
+    const siteBucket = new s3.Bucket(this, "SiteBucket", {
+      publicReadAccess: false,
+      blockPublicAccess: s3.BlockPublicAccess.BLOCK_ALL,
+
+      removalPolicy: RemovalPolicy.DESTROY, // NOT recommended for production code
+
+      autoDeleteObjects: true, // NOT recommended for production code
+    });
+
+    // Grant access to cloudfront
+    siteBucket.addToResourcePolicy(
+      new iam.PolicyStatement({
+        actions: ["s3:GetObject"],
+        resources: [siteBucket.arnForObjects("*")],
+        principals: [
+          new iam.CanonicalUserPrincipal(
+            cloudfrontOAI.cloudFrontOriginAccessIdentityS3CanonicalUserId
+          ),
+        ],
+      })
+    );
+
+    // CloudFront distribution
+    const distribution = new cloudfront.Distribution(this, "SiteDistribution", {
+      defaultRootObject: "index.html",
+      minimumProtocolVersion: cloudfront.SecurityPolicyProtocol.TLS_V1_2_2021,
+      errorResponses: [
+        {
+          httpStatus: 403,
+          responseHttpStatus: 403,
+          responsePagePath: "/error.html",
+          ttl: Duration.minutes(30),
+        },
+      ],
+      defaultBehavior: {
+        origin: new cloudfront_origins.S3Origin(siteBucket, {
+          originAccessIdentity: cloudfrontOAI,
+        }),
+        compress: true,
+        allowedMethods: cloudfront.AllowedMethods.ALLOW_GET_HEAD_OPTIONS,
+        viewerProtocolPolicy: cloudfront.ViewerProtocolPolicy.REDIRECT_TO_HTTPS,
+      },
+    });
+
+    // Deploy site contents to S3 bucket
+    new s3deploy.BucketDeployment(this, "DeployWithInvalidation", {
+      sources: [s3deploy.Source.asset("../dist")],
+      destinationBucket: siteBucket,
+      distribution,
+      distributionPaths: ["/*"],
+    });
+  }
+}

aws_cdk/jest.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  testEnvironment: 'node',
+  roots: ['<rootDir>/test'],
+  testMatch: ['**/*.test.ts'],
+  transform: {
+    '^.+\\.tsx?$': 'ts-jest'
+  }
+};