Task 3.0-prepare: transform to monorepo with serverless-compose

.github/workflows/main.yml

@@ -32,8 +32,7 @@ jobs:
             ${{ runner.os }}-node-
       - run: npm ci --legacy-peer-deps
       - run: npm run lint
-      - run: npm test -- --coverage
-      - run: npm run build
+      - run: npm run test
       - name: Configure AWS Credentials
         uses: aws-actions/configure-aws-credentials@v1
         with:
@@ -44,7 +43,7 @@ jobs:
         run: |
           # slugify branch ref
           slug=$(echo ${{ github.event.pull_request.head.ref || 'stg' }} | tr '[:upper:]' '[:lower:]' | sed -E 's/[^a-z0-9]+/-/g' | sed -E 's/^-+\|-+$//g')
-          body="$(npm run deploy -- -s $slug 2>&1)"
+          body="$(npm run deploy -- --stage $slug 2>&1)"
           body="${body//'%'/'%25'}"
           body="${body//$'\n'/'%0A'}"
           body="${body//$'\r'/'%0D'}" 

package.json

@@ -1,67 +1,31 @@
 {
-  "name": "my-store-app",
+  "name": "@guria.dev/aws-js-practitioner-app",
   "version": "1.0.0",
   "private": true,
+  "workspaces": [
+    "services/*",
+    "plugins/*"
+  ],
   "scripts": {
-    "start": "vite",
-    "build": "tsc && vite build",
-    "preview": "npm run build && vite preview",
-    "test": "vitest",
-    "test:ui": "vitest --ui",
-    "test:coverage": "vitest run --coverage",
-    "lint": "eslint --ignore-path .gitignore",
-    "lint:fix": "run-s 'lint --fix src'",
-    "prettier": "prettier src --write",
+    "test": "npx cross-env CI=true npm run --workspaces test",
+    "lint": "npm run --workspaces lint",
     "deploy": "sls deploy",
-    "remove": "sls remove",
-    "build:deploy": "run-s build deploy"
-  },
-  "dependencies": {
-    "@emotion/react": "^11.10.4",
-    "@emotion/styled": "^11.10.4",
-    "@mui/icons-material": "^5.10.6",
-    "@mui/material": "^5.10.7",
-    "@mui/styles": "^5.10.7",
-    "@vitest/coverage-c8": "^0.23.4",
-    "axios": "^0.27.2",
-    "formik": "^2.2.9",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-query": "^3.39.2",
-    "react-router-dom": "^6.4.1",
-    "yup": "^0.32.11"
+    "remove": "sls remove"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^14.4.3",
-    "@types/react": "^18.0.21",
-    "@types/react-dom": "^18.0.6",
-    "@typescript-eslint/eslint-plugin": "^5.38.1",
-    "@typescript-eslint/parser": "^5.38.1",
-    "@vitejs/plugin-react": "^2.1.0",
-    "@vitest/ui": "^0.23.4",
-    "eslint": "^8.24.0",
+    "@serverless/compose": "^1.3.0",
+    "@typescript-eslint/eslint-plugin": "^5.40.0",
+    "@typescript-eslint/parser": "^5.40.0",
+    "eslint": "^8.25.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.31.8",
-    "jsdom": "^20.0.0",
-    "msw": "^0.47.3",
+    "eslint-plugin-react": "^7.31.10",
     "npm-run-all": "^4.1.5",
     "prettier": "2.7.1",
     "serverless": "^3.22.0",
-    "serverless-cloudfront-invalidate": "^1.12.2",
-    "serverless-s3-sync": "^3.1.0",
-    "terser": "^5.15.0",
-    "typescript": "^4.8.4",
-    "vite": "^3.1.4",
-    "vite-plugin-top-level-await": "^1.1.1",
-    "vitest": "^0.23.4"
-  },
-  "msw": {
-    "workerDirectory": "public"
+    "typescript": "^4.8.4"
   },
   "engines": {
-    "node": ">=14.0.0"
+    "node": ">=16.0.0"
   }
 }

plugins/log-output-values/.eslintrc

@@ -0,0 +1,20 @@
+{
+  "root": true,
+  "env": {
+    "browser": true,
+    "commonjs": true,
+    "es2021": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:prettier/recommended",
+    "prettier"
+  ],
+  "plugins": ["prettier"],
+
+  "overrides": [],
+  "parserOptions": {
+    "ecmaVersion": "latest"
+  },
+  "rules": {}
+}

plugins/log-output-values/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "@guria.dev/serverless-log-output-values",
+  "version": "1.0.0",
+  "private": true,
+  "main": "index.js",
+  "scripts": {
+    "lint": "eslint .",
+    "test": "echo \"No test specified\" || true"
+  },
+  "engines": {
+    "node": ">=16.0.0"
+  }
+}

serverless-compose.yml

@@ -0,0 +1,3 @@
+services:
+  shop-frontend-app:
+    path: ./services/shop-frontend-app

services/shop-frontend-app/.eslintignore

@@ -0,0 +1,3 @@
+dist
+coverage
+public

.eslintrc → services/shop-frontend-app/.eslintrc

@@ -2,7 +2,7 @@
   "root": true,
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
-    "project": "./tsconfig.json"
+    "project": ["./tsconfig.json", "./tsconfig.node.json"],
   },
   "extends": [
     "plugin:@typescript-eslint/recommended",

README.md → services/shop-frontend-app/README.md

@@ -1,6 +1,4 @@
-# React-shop-cloudfront
-
-This is frontend starter project for nodejs-aws mentoring program. It uses the following technologies:
+This is frontend single page application. It uses the following technologies:
 
 - [Vite](https://vitejs.dev/) as a project bundler
 - [React](https://beta.reactjs.org/) as a frontend framework

services/shop-frontend-app/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@guria.dev/aws-js-practitioner-shop-frontend",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "start": "vite",
+    "build": "tsc && vite build",
+    "preview": "npm run build && vite preview",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest run --coverage",
+    "lint": "eslint .",
+    "lint:fix": "run-s 'lint --fix src'",
+    "build:deploy": "run-s build deploy",
+    "prepare": "run-s build"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.10.4",
+    "@emotion/styled": "^11.10.4",
+    "@mui/icons-material": "^5.10.6",
+    "@mui/material": "^5.10.8",
+    "@mui/styles": "^5.10.8",
+    "@vitest/coverage-c8": "^0.24.1",
+    "axios": "^1.1.2",
+    "formik": "^2.2.9",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-query": "^3.39.2",
+    "react-router-dom": "^6.4.2",
+    "yup": "^0.32.11"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/react": "^18.0.21",
+    "@types/react-dom": "^18.0.6",
+    "@vitejs/plugin-react": "^2.1.0",
+    "@vitest/ui": "^0.24.1",
+    "jsdom": "^20.0.1",
+    "msw": "^0.47.4",
+    "serverless-cloudfront-invalidate": "^1.12.2",
+    "serverless-s3-sync": "^3.1.0",
+    "terser": "^5.15.1",
+    "vite": "^3.1.7",
+    "vite-plugin-top-level-await": "^1.1.1",
+    "vitest": "^0.24.1"
+  },
+  "msw": {
+    "workerDirectory": "public"
+  },
+  "engines": {
+    "node": ">=16.0.0"
+  }
+}

serverless.yml → services/shop-frontend-app/serverless.yml

@@ -1,4 +1,4 @@
-service: aws-js-practitioner
+service: aws-js-practitioner-shop-frontend
 frameworkVersion: "3"
 configValidationMode: error
 useDotenv: true
@@ -10,19 +10,19 @@ provider:
 plugins:
   - serverless-s3-sync
   - serverless-cloudfront-invalidate
-  - log-output-values
+  - "@guria.dev/serverless-log-output-values"
 
 custom:
   vars:
-    bucketName: ${self:service}-${sls:stage}
-    domainName: ${self:service}-${sls:stage}.${env:HOSTED_ZONE_DOMAIN}
+    prefix: ${self:service}-${sls:stage}
+    domainName: ${self:custom.vars.prefix}.${env:HOSTED_ZONE_DOMAIN}
   log-output-values:
     - template:
         "Web App deployed to Cloudfront and available at following addresses:\n
         * https://{WebAppDistributionOutput}\n
         * https://{WebAppCustomDomainOutput}"
   s3Sync:
-    - bucketName: ${self:custom.vars.bucketName}
+    - bucketName: ${self:custom.vars.prefix}
       localDir: dist
       deleteRemoved: true
   cloudfrontInvalidate:
@@ -36,14 +36,14 @@ resources:
     WebAppS3Bucket:
       Type: AWS::S3::Bucket
       Properties:
-        BucketName: ${self:custom.vars.bucketName}
+        BucketName: ${self:custom.vars.prefix}
 
     CloudFrontOriginAccessControl:
       Type: AWS::CloudFront::OriginAccessControl
       Properties:
         OriginAccessControlConfig:
           Description: Default Origin Access Control
-          Name: CloudFrontOriginAccessControl-${sls:stage}
+          Name: ${self:custom.vars.prefix}
           OriginAccessControlOriginType: s3
           SigningBehavior: always
           SigningProtocol: sigv4
@@ -121,8 +121,6 @@ resources:
           EvaluateTargetHealth: false
 
   Outputs:
-    WebAppS3BucketOutput:
-      Value: !Ref WebAppS3Bucket
     WebAppDistributionOutput:
       Value: !GetAtt WebAppDistribution.DomainName
     WebAppDistributionIdOutput: