Task 2 - Serving SPA

README.md

@@ -1,8 +1,10 @@
 # React-shop-cloudfront
 
-
+### Manual Deployment:
+   - [x] **s3 bucket link:** https://my-web-shop.s3.us-east-1.amazonaws.com/index.html
+   - [x] **CloudFront Url:** https://dxdyaoxipq2bo.cloudfront.net/
 ### CDK link
-[d3q9g2lmtri9eu.cloudfront.net](https://d3q9g2lmtri9eu.cloudfront.net/)
+   - [x] [d3q9g2lmtri9eu.cloudfront.net](https://d3q9g2lmtri9eu.cloudfront.net/)
 
 
 <img width="1439" alt="Screenshot 2025-02-13 at 09 26 58" src="https://github.com/user-attachments/assets/7d899a5d-378a-4ee7-b808-84a9a46bc481" />

package.json

@@ -10,14 +10,18 @@
     "test:ui": "vitest --ui",
     "test:coverage": "vitest run --coverage",
     "lint": "eslint --ignore-path .gitignore --fix src",
-    "prettier": "prettier src --write"
+    "prettier": "prettier src --write",
+    "cdk:build": "pip install -r requirements.txt && npx aws-cdk synth",
+    "cdk:deploy": "npx aws-cdk deploy",
+    "cdk:destroy": "npx aws-cdk destroy",
+    "cdk:bootstrap": "npx aws-cdk bootstrap"
   },
   "dependencies": {
     "@emotion/react": "^11.9.3",
     "@emotion/styled": "^11.9.3",
     "@mui/icons-material": "^5.8.4",
-    "@mui/material": "^5.8.7",
-    "@mui/styles": "^5.8.7",
+    "@mui/material": "^5.16.14",
+    "@mui/styles": "^5.16.14",
     "@types/yup": "^0.29.14",
     "axios": "^0.27.2",
     "formik": "^2.2.9",

src/components/pages/PageProducts/components/Products.tsx

@@ -25,7 +25,7 @@ export default function Products() {
           >
             <CardMedia
               sx={{ pt: "56.25%" }}
-              image={`https://source.unsplash.com/random?sig=${index}`}
+              image={`https://picsum.photos/400/225?random=${index}`}
               title="Image title"
             />
             <CardContent sx={{ flexGrow: 1 }}>
@@ -43,3 +43,5 @@ export default function Products() {
     </Grid>
   );
 }
+
+

src/constants/apiPaths.ts

@@ -1,5 +1,7 @@
 const API_PATHS = {
-  product: "https://.execute-api.eu-west-1.amazonaws.com/dev",
+  //product: "https://.execute-api.eu-west-1.amazonaws.com/dev",https://pj8m5nmg5m.execute-api.us-east-1.amazonaws.com/prod/products/
+  //product: "https://i58jmttgyj.execute-api.us-east-1.amazonaws.com/prod/products",https://pj8m5nmg5m.execute-api.us-east-1.amazonaws.com/prod/products
+  product: "https://pj8m5nmg5m.execute-api.us-east-1.amazonaws.com/prod",
   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",

src/queries/products.ts

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

tsconfig.json

@@ -22,4 +22,8 @@
   },
   "include": ["src"],
   "references": [{ "path": "./tsconfig.node.json" }]
+
+ // "exclude": ["node_modules"]
+
+
 }