Task 4

.gitignore

@@ -9,6 +9,7 @@ lerna-debug.log*
 
 node_modules
 .serverless
+jspm_packages
 coverage
 dist
 dist-ssr

package.json

@@ -11,18 +11,20 @@
     "test:coverage": "vitest run --coverage",
     "lint": "eslint --ignore-path .gitignore --fix src",
     "prettier": "prettier src --write",
-    "client:deploy": "sls client deploy --no-config-change --no-policy-change --no-cors-change",
+    "client:deploy:s3": "serverless client deploy --no-config-change --no-policy-change --no-cors-change",
+    "build:deploy:s3": "npm run build && npm run client:deploy:s3",
+    "client:deploy": "serverless client deploy --no-config-change --no-policy-change --no-cors-change",
     "client:deploy:nc": "npm run client:deploy -- --no-confirm",
     "client:build:deploy": "npm run build && npm run client:deploy",
     "client:build:deploy:nc": "npm run build && npm run client:deploy:nc",
-    "cloudfront:setup": "sls deploy",
-    "cloudfront:domainInfo": "sls domainInfo",
-    "cloudfront:invalidateCache": "sls invalidateCloudFrontCache",
+    "cloudfront:setup": "serverless deploy",
+    "cloudfront:domainInfo": "serverless domainInfo",
+    "cloudfront:invalidateCache": "serverless invalidateCloudFrontCache",
     "cloudfront:build:deploy": "npm run client:build:deploy && npm run cloudfront:invalidateCache",
     "cloudfront:build:deploy:nc": "npm run client:build:deploy:nc && npm run cloudfront:invalidateCache",
     "cloudfront:update:build:deploy": "npm run cloudfront:setup && npm run cloudfront:build:deploy",
     "cloudfront:update:build:deploy:nc": "npm run cloudfront:setup && npm run cloudfront:build:deploy:nc",
-    "serverless:remove": "sls remove"
+    "serverless:remove": "serverless remove"
   },
   "dependencies": {
     "@emotion/react": "^11.9.3",
@@ -31,12 +33,13 @@
     "@mui/material": "^5.8.7",
     "@mui/styles": "^5.8.7",
     "@types/yup": "^0.29.14",
-    "axios": "^0.27.2",
+    "axios": "^1.6.8",
     "formik": "^2.2.9",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-query": "^3.39.1",
     "react-router-dom": "^6.3.0",
+    "serverless-single-page-app-plugin": "file:./serverless-single-page-app-plugin",
     "yup": "^0.32.11"
   },
   "devDependencies": {
@@ -61,7 +64,7 @@
     "serverless-finch": "^4.0.0",
     "serverless-s3-cleaner": "^2.0.1",
     "typescript": "^4.7.4",
-    "vite": "^2.9.13",
+    "vite": "^5.2.11",
     "vitest": "^0.17.1"
   },
   "msw": {

.serverless_plugins/serverless-single-page-app-plugin.js → serverless-single-page-app-plugin/index.js

@@ -53,15 +53,7 @@ class ServerlessPlugin {
   // syncs the `app` directory to the provided bucket
   syncDirectory() {
     const s3Bucket = this.serverless.variables.service.custom.s3Bucket;
-    const buildFolder =
-      this.serverless.variables.service.custom.client.distributionFolder;
-    const args = [
-      "s3",
-      "sync",
-      `${buildFolder}/`,
-      `s3://${s3Bucket}/`,
-      "--delete",
-    ];
+    const args = ["s3", "sync", "app/", `s3://${s3Bucket}/`, "--delete"];
     const { sterr } = this.runAwsCommand(args);
     if (!sterr) {
       this.serverless.cli.log("Successfully synced to the S3 bucket");
@@ -125,7 +117,7 @@ class ServerlessPlugin {
         "--distribution-id",
         distribution.Id,
         "--paths",
-        '"/*"',
+        "/*",
       ];
       const { sterr } = this.runAwsCommand(args);
       if (!sterr) {

serverless-single-page-app-plugin/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "serverless-single-page-app-plugin",
+  "version": "1.0.0",
+  "description": "A plugin to simplify deploying Single Page Application using S3 and CloudFront",
+  "author": "",
+  "license": "MIT"
+}

serverless.yml

@@ -1,29 +1,26 @@
-service: my-store-app
-
+service: dw-store-app
+configValidationMode: warn
 frameworkVersion: "3"
 
 provider:
   name: aws
-  runtime: nodejs14.x
-  region: eu-west-1
+  runtime: nodejs16.x
+  region: sa-east-1
   # setup profile for AWS CLI.
-  # profile: node-aws
+  profile: default
 
 plugins:
   - serverless-finch
-  # 'serverless-single-page-app-plugin' is a custom plugin that located .serverless_plugins folder.
-  # Existing plugin (https://www.npmjs.com/package/serverless-single-page-app-plugin) doesn't have invalidate cache feature that often used during CI/CD events.
-  # How to build your own plugins: https://www.serverless.com/framework/docs/providers/aws/guide/plugins#service-local-plugin
   - serverless-single-page-app-plugin
   - serverless-s3-cleaner
 
 custom:
   client:
-    bucketName: my-store-app
+    bucketName: dw-store-app-client-v2
     distributionFolder: dist
-  s3BucketName: ${self:custom.client.bucketName}
 
   ## Serverless-single-page-app-plugin configuration:
+  s3BucketName: ${self:custom.client.bucketName}
   s3LocalPath: ${self:custom.client.distributionFolder}/
   serverless-s3-cleaner:
     buckets:
@@ -36,7 +33,11 @@ resources:
       Type: AWS::S3::Bucket
       Properties:
         BucketName: ${self:custom.s3BucketName}
-        AccessControl: PublicRead
+        PublicAccessBlockConfiguration:
+          BlockPublicAcls: false
+        OwnershipControls:
+          Rules:
+            - ObjectOwnership: ObjectWriter
         WebsiteConfiguration:
           IndexDocument: index.html
           ErrorDocument: index.html

src/components/MainLayout/MainLayout.tsx

@@ -10,7 +10,7 @@ function Copyright() {
     <Typography variant="body2" color="textSecondary" align="center">
       {"Copyright © "}
       <Link color="inherit" href="https://material-ui.com/" underline="hover">
-        My Store
+        Dawin&apos;s Awesome store
       </Link>{" "}
       {new Date().getFullYear()}
       {"."}
@@ -37,7 +37,7 @@ const MainLayout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
           color="textSecondary"
           component="p"
         >
-          Thank you for your purchase!
+          Thanks for your purchase!
         </Typography>
         <Copyright />
       </Box>

src/constants/apiPaths.ts

@@ -1,8 +1,8 @@
 const API_PATHS = {
-  product: "https://.execute-api.eu-west-1.amazonaws.com/dev",
+  product: "https://ojrmwfr769.execute-api.us-east-1.amazonaws.com",
   order: "https://.execute-api.eu-west-1.amazonaws.com/dev",
   import: "https://.execute-api.eu-west-1.amazonaws.com/dev",
-  bff: "https://.execute-api.eu-west-1.amazonaws.com/dev",
+  bff: "https://ojrmwfr769.execute-api.us-east-1.amazonaws.com",
   cart: "https://.execute-api.eu-west-1.amazonaws.com/dev",
 };
 

src/queries/products.ts

@@ -9,7 +9,7 @@ export function useAvailableProducts() {
     "available-products",
     async () => {
       const res = await axios.get<AvailableProduct[]>(
-        `${API_PATHS.bff}/product/available`
+        `${API_PATHS.bff}/products`
       );
       return res.data;
     }