chore(build-system-test): update web framework and build tool version…

…s, parameterize options (#5878)
aws-amplify · Oct 9, 2024 · 371a770 · 371a770
1 parent 77ac8b9
commit 371a770
Show file tree

Hide file tree

Showing 18 changed files with 63 additions and 501 deletions.
diff --git a/.github/workflows/reusable-build-system-test.yml b/.github/workflows/reusable-build-system-test.yml
@@ -17,53 +17,24 @@ jobs:
       matrix:
         framework: [react]
         framework-version: [latest]
-        build-tool: [cra, next, vite]
+        build-tool: [next, vite]
         build-tool-version: [latest]
         pkg-manager: [npm]
         language: [ts]
-        node-version: [18]
+        node-version: [20]
         pkg-manager-version: [latest]
         include:
-          - framework: react
-            framework-version: latest
-            build-tool: cra
-            build-tool-version: latest
-            pkg-manager: npm
-            language: ts
-            node-version: 20
-          - framework: react
-            framework-version: 16
-            build-tool: cra
-            build-tool-version: latest
-            pkg-manager: npm
-            language: ts
-            node-version: 20
-          - framework: react
-            framework-version: latest
-            build-tool: cra
-            build-tool-version: latest
-            pkg-manager: npm
-            language: js
-            node-version: 20
-          - framework: react
-            framework-version: latest
-            build-tool: cra
-            build-tool-version: latest
-            pkg-manager: yarn
-            pkg-manager-version: 1
-            language: ts
-            node-version: 20
           - framework: react
             framework-version: 18
             build-tool: next
-            build-tool-version: 12
+            build-tool-version: 13
             pkg-manager: npm
             language: ts
             node-version: 20
           - framework: react
-            framework-version: latest
+            framework-version: 18
             build-tool: vite
-            build-tool-version: 2
+            build-tool-version: 3
             pkg-manager: npm
             language: ts
             node-version: 20
@@ -98,7 +69,7 @@ jobs:
             language: ts
             node-version: 20
           - framework: vue
-            framework-version: latest
+            framework-version: 3
             build-tool: vite
             build-tool-version: 3
             pkg-manager: npm
@@ -112,9 +83,6 @@ jobs:
             language: ts
             node-version: 20
 
-    env:
-      MEGA_APP_NAME: ${{ matrix.framework }}-${{ matrix.framework-version }}-${{ matrix.build-tool }}-${{ matrix.build-tool-version }}-${{ matrix.language }}-ui-${{ inputs.dist-tag }}
-
     steps:
       - name: Checkout Amplify UI
         uses: actions/checkout@b80ff79f1755d06ba70441c368a6fe801f5f3a62 # v4.1.3 https://github.com/actions/checkout/commit/cd7d8d697e10461458bc61a30d094dc601a8b017
@@ -128,6 +96,6 @@ jobs:
         env:
           SEGMENT_DOWNLOAD_TIMEOUT_MINS: 2
       - name: Create MegaApp ${{ env.MEGA_APP_NAME }} and run build on NodeJS ${{ matrix.node-version }}
-        run: npm run ${{ env.MEGA_APP_NAME }}
+        run: npm run test:${{ matrix.framework }}:${{matrix.build-tool}} -- --framework-version ${{matrix.framework-version}} --build-tool-version ${{matrix.build-tool-version}} --pkg-manager ${{matrix.pkg-manager}} --tag ${{inputs.dist-tag}}
         shell: bash
         working-directory: build-system-tests
diff --git a/build-system-tests/README.md b/build-system-tests/README.md
@@ -15,7 +15,7 @@ In this _build-system-tests_ folder, run
 
 ```sh
 $ npm run <MEGA_APP_NAME> # e.g. npm run react-latest-vite-latest-ts
-$ npm run setup:<FRAMEWORK>:<BUILD_TOOL> -- --framework-version <FRAMEWORK_VERSION_NUMBER> --build-tool-version <BUILD_TOOL_VERSION_NUMBER> # e.g npm run setup:vue:vite -- -f latest -b 2
+$ npm run test:<FRAMEWORK>:<BUILD_TOOL> -- --framework-version <FRAMEWORK_VERSION_NUMBER> --build-tool-version <BUILD_TOOL_VERSION_NUMBER> # e.g npm run test:vue:vite -- -f latest -b 2
 ```
 
 Note:
@@ -35,41 +35,41 @@ If the MegaApp you want to create is not pre-configured in the package.json, her
 #### Setup MegaApp in One Step
 
 ```sh
-$ ./mega-app-create-app.sh --build-tool react --build-tool-version latest --language typescript --name react-latest-cra-latest-node-18-ts --framework cra --framework-version latest
+$ ./mega-app-create-app.sh --build-tool next --build-tool-version latest --name react-latest-next-latest-node-18-ts --framework react --framework-version latest
 
-$ npm run setup:<FRAMEWORK>:<BUILD_TOOL> -- --framework-version <FRAMEWORK_VERSION_NUMBER> --build-tool-version <BUILD_TOOL_VERSION_NUMBER> # e.g npm run setup:vue:vite -- -f latest -b 2
+$ npm run test:<FRAMEWORK>:<BUILD_TOOL> -- --framework-version <FRAMEWORK_VERSION_NUMBER> --build-tool-version <BUILD_TOOL_VERSION_NUMBER> # e.g npm run test:vue:vite -- -f latest -b 2
 ```
 
 ### Setup MegaApp Step by Step
 
 - Step 1: Create
 
 ```sh
-$ ./mega-app-create-app.sh --build-tool react --build-tool-version latest --language typescript --name react-latest-cra-latest-node-18-ts --framework cra --framework-version latest
+$ ./mega-app-create-app.sh --build-tool next --build-tool-version latest --name react-latest-next-latest-node-18-ts --framework react --framework-version latest
 ```
 
 - Step 2: Copy/Modify Files
 
 ```sh
-$ ./mega-app-copy-files.sh --build-tool react --build-tool-version latest --language typescript --name react-latest-cra-latest-node-18-ts --framework cra --framework-version latest
-$ ./mega-app-copy-files.sh -n react-latest-cra-latest-node-18-ts
-$ ./mega-app-copy-files.sh -B react -b latest -l typescript -n react-latest-cra-latest-node-18-ts -F cra -f latest
+$ ./mega-app-copy-files.sh --build-tool  next --build-tool-version latest --name react-latest-next-latest-node-18-ts --framework react --framework-version latest
+$ ./mega-app-copy-files.sh -n react-latest-next-latest-node-18-ts
+$ ./mega-app-copy-files.sh -B next -b latest -l typescript -n react-latest-next-latest-node-18-ts -F react -f latest
 ```
 
 - Step 3: Install Dependencies
 
 ```sh
-$ ./mega-app-install.sh --build-tool react --build-tool-version latest --language typescript --name react-latest-cra-latest-node-18-ts --framework cra --framework-version latest --pkg-manager npm --pkg-manager-version latest
-$ ./mega-app-install.sh -B react -b latest -l typescript -n react-latest-cra-latest-node-18-ts -F cra -f latest -P npm -p latest
-$ ./mega-app-install.sh -n react-latest-cra-latest-node-18-ts
+$ ./mega-app-install.sh --build-tool next --build-tool-version latest --name react-latest-next-latest-node-18-ts --framework react --framework-version latest --pkg-manager npm
+$ ./mega-app-install.sh -B next -b latest -l typescript -n react-latest-next-latest-node-18-ts -F react -f latest -P npm -p latest
+$ ./mega-app-install.sh -n react-latest-next-latest-node-18-ts
 ```
 
 - Step 4: Run Build
 
 ```sh
-$ ./mega-app-build.sh --build-tool react --build-tool-version latest --language typescript --name react-latest-cra-latest-node-18-ts --framework cra --framework-version latest --pkg-manager npm
-$ ./mega-app-build.sh -B react -b latest -l typescript -n react-latest-cra-latest-node-18-ts -F cra -f latest -P npm
-$ ./mega-app-build.sh -n react-latest-cra-latest-node-18-ts
+$ ./mega-app-build.sh --build-tool next --build-tool-version latest --name react-latest-next-latest-node-18-ts --framework react --framework-version latest --pkg-manager npm
+$ ./mega-app-build.sh -B next -b latest -l typescript -n react-latest-next-latest-node-18-ts -F react -f latest -P npm
+$ ./mega-app-build.sh -n react-latest-next-latest-node-18-ts
 ```
 
 ### Troubleshooting

diff --git a/build-system-tests/package.json b/build-system-tests/package.json
@@ -10,58 +10,18 @@
     "strip-json-comments-cli": "^2.0.2"
   },
   "scripts": {
-    "setup:react": "./scripts/setup-mega-app.sh",
-    "setup:react:cra": "./scripts/setup-mega-app.sh -B cra",
-    "setup:react:next": "./scripts/setup-mega-app.sh -B next",
-    "setup:react:vite": "./scripts/setup-mega-app.sh -B vite",
-    "setup:angular": "./scripts/setup-mega-app.sh -F angular",
-    "setup:angular:cli": "./scripts/setup-mega-app.sh -F angular -B angular-cli",
-    "setup:vue": "./scripts/setup-mega-app.sh -F vue",
-    "setup:vue:cli": "./scripts/setup-mega-app.sh -F vue -B vue-cli",
-    "setup:vue:vite": "./scripts/setup-mega-app.sh -F vue -B vite",
-    "setup:vue:nuxt": "./scripts/setup-mega-app.sh -F vue -B nuxt",
+    "test:react": "./scripts/setup-mega-app.sh",
+    "test:react:next": "./scripts/setup-mega-app.sh --build-tool next",
+    "test:react:vite": "./scripts/setup-mega-app.sh --build-tool vite",
+    "test:angular": "./scripts/setup-mega-app.sh -F angular",
+    "test:angular:angular-cli": "./scripts/setup-mega-app.sh -F angular --build-tool angular-cli",
+    "test:vue": "./scripts/setup-mega-app.sh -F vue",
+    "test:vue:vue-cli": "./scripts/setup-mega-app.sh -F vue --build-tool vue-cli",
+    "test:vue:vite": "./scripts/setup-mega-app.sh -F vue --build-tool vite",
+    "test:vue:nuxt": "./scripts/setup-mega-app.sh -F vue --build-tool nuxt",
     "setup:react-native": "./scripts/setup-mega-app.sh -F react-native",
     "setup:react-native:cli": "./scripts/setup-mega-app.sh -F react-native -B cli",
-    "setup:react-native:expo": "./scripts/setup-mega-app.sh -F react-native -B expo",
-    "react-latest-cra-latest-ts-ui-latest": "npm run setup:react:cra -- -P yarn",
-    "react-latest-cra-latest-ts-ui-next": "npm run setup:react:cra -- -P yarn -t next",
-    "react-latest-cra-latest-ts-ui-hotfix": "npm run setup:react:cra -- -P yarn -t hotfix",
-    "react-latest-next-latest-ts-ui-latest": "npm run setup:react:next",
-    "react-latest-next-latest-ts-ui-next": "npm run setup:react:next -- -t next",
-    "react-latest-next-latest-ts-ui-hotfix": "npm run setup:react:next -- -t hotfix",
-    "react-latest-vite-latest-ts-ui-latest": "npm run setup:react:vite",
-    "react-latest-vite-latest-ts-ui-next": "npm run setup:react:vite -- -t next",
-    "react-latest-vite-latest-ts-ui-hotfix": "npm run setup:react:vite -- -t hotfix",
-    "react-16-cra-latest-ts-ui-latest": "npm run setup:react:cra -- -f 16",
-    "react-16-cra-latest-ts-ui-next": "npm run setup:react:cra -- -f 16 -t next",
-    "react-16-cra-latest-ts-ui-hotfix": "npm run setup:react:cra -- -f 16 -t hotfix",
-    "react-latest-cra-latest-js-ui-latest": "npm run setup:react:cra -- -l js",
-    "react-latest-cra-latest-js-ui-next": "npm run setup:react:cra -- -l js -t next",
-    "react-latest-cra-latest-js-ui-hotfix": "npm run setup:react:cra -- -l js -t hotfix",
-    "react-18-next-12-ts-ui-latest": "npm run setup:react:next -- -f 18 -b 12",
-    "react-18-next-12-ts-ui-next": "npm run setup:react:next -- -f 18 -b 12 -t next",
-    "react-18-next-12-ts-ui-hotfix": "npm run setup:react:next -- -f 18 -b 12 -t hotfix",
-    "react-latest-vite-2-ts-ui-latest": "npm run setup:react:vite -- -b 2",
-    "react-latest-vite-2-ts-ui-next": "npm run setup:react:vite -- -b 2 -t next",
-    "react-latest-vite-2-ts-ui-hotfix": "npm run setup:react:vite -- -b 2 -t hotfix",
-    "angular-latest-angular-cli-latest-ts-ui-latest": "npm run setup:angular:cli",
-    "angular-latest-angular-cli-latest-ts-ui-next": "npm run setup:angular:cli -- -t next",
-    "angular-latest-angular-cli-latest-ts-ui-hotfix": "npm run setup:angular:cli -- -t hotfix",
-    "angular-14-angular-cli-14-ts-ui-latest": "npm run setup:angular:cli -- -f 14 -b 14 -n angular-14-angular-cli-14-ts-ui-latest",
-    "angular-14-angular-cli-14-ts-ui-next": "npm run setup:angular:cli -- -f 14 -b 14 -n angular-14-angular-cli-14-ts-ui-next -t next",
-    "angular-14-angular-cli-14-ts-ui-hotfix": "npm run setup:angular:cli -- -f 14 -b 14 -n angular-14-angular-cli-14-ts-ui-hotfix -t hotfix",
-    "vue-3-vue-cli-latest-ts-ui-latest": "npm run setup:vue:cli -- -f 3 -P yarn",
-    "vue-3-vue-cli-latest-ts-ui-next": "npm run setup:vue:cli -- -f 3 -P yarn -t next",
-    "vue-3-vue-cli-latest-ts-ui-hotfix": "npm run setup:vue:cli -- -f 3 -P yarn -t hotfix",
-    "vue-latest-vite-latest-ts-ui-latest": "npm run setup:vue:vite",
-    "vue-latest-vite-latest-ts-ui-next": "npm run setup:vue:vite -- -t next",
-    "vue-latest-vite-latest-ts-ui-hotfix": "npm run setup:vue:vite -- -t hotfix",
-    "vue-latest-vite-3-ts-ui-latest": "npm run setup:vue:vite -- -b 3",
-    "vue-latest-vite-3-ts-ui-next": "npm run setup:vue:vite -- -b 3 -t next",
-    "vue-latest-vite-3-ts-ui-hotfix": "npm run setup:vue:vite -- -b 3 -t hotfix",
-    "vue-latest-nuxt-latest-ts-ui-latest": "npm run setup:vue:nuxt",
-    "vue-latest-nuxt-latest-ts-ui-next": "npm run setup:vue:nuxt -- -t next",
-    "vue-latest-nuxt-latest-ts-ui-hotfix": "npm run setup:vue:nuxt -- -t hotfix",
+    "test:react-native:expo": "./scripts/setup-mega-app.sh -F react-native -B expo",
     "rn-latest-cli-latest-ts-ios-ui-latest": "npm run setup:react-native:cli -- -A ios",
     "rn-latest-cli-latest-ts-ios-ui-next": "npm run setup:react-native:cli -- -A ios -t next",
     "rn-latest-cli-latest-ts-ios-ui-hotfix": "npm run setup:react-native:cli -- -A ios -t hotfix",

diff --git a/build-system-tests/scripts/mega-app-build.sh b/build-system-tests/scripts/mega-app-build.sh
@@ -2,35 +2,24 @@
 set -e
 
 # Default values
-BUILD_TOOL="cra"
-BUILD_TOOL_VERSION="latest"
-LANGUAGE="ts"
+BUILD_TOOL="next"
 MEGA_APP_NAME=""
 FRAMEWORK="react"
-FRAMEWORK_VERSION="latest"
 PLATFORM="android"
 LOG_FILE="test.log"
 
 # Options
 # e.g.
-# $ ./mega-app-build.sh --build-tool react --build-tool-version latest --language typescript --name react-latest-cra-latest-node-18-ts --framework cra --framework-version latest --pkg-manager npm
-# $ ./mega-app-build.sh -B react -b latest -l typescript -n react-latest-cra-latest-node-18-ts -F cra -f latest -P npm
-# $ ./mega-app-build.sh -n react-latest-cra-latest-node-18-ts
+# $ ./mega-app-build.sh --build-tool next --build-tool-version latest --name react-latest-next-latest-node-18-ts --framework react --framework-version latest --pkg-manager npm
+# $ ./mega-app-build.sh -B next -b latest -l typescript -n react-latest-next-latest-node-18-ts -F react -f latest -P npm
+# $ ./mega-app-build.sh -n react-latest-next-latest-node-18-ts
 
 while [[ $# -gt 0 ]]; do
     case $1 in
     -B | --build-tool)
         BUILD_TOOL=$2
         shift
         ;;
-    -b | --build-tool-version)
-        BUILD_TOOL_VERSION=$2
-        shift
-        ;;
-    -l | --language)
-        LANGUAGE=$2
-        shift
-        ;;
     -n | --name)
         MEGA_APP_NAME=$2
         shift
@@ -39,9 +28,8 @@ while [[ $# -gt 0 ]]; do
         FRAMEWORK=$2
         shift
         ;;
-    -f | --framework-version)
-        FRAMEWORK_VERSION=$2
-        shift
+     -f | --framework-version)
+        shift # unused but allowed option
         ;;
     -P | --pkg-manager)
         PKG_MANAGER=$2
@@ -54,9 +42,8 @@ while [[ $# -gt 0 ]]; do
     -h | --help)
         echo "Usage: mega-app-create-app.sh [OPTIONS]"
         echo "Options:"
-        echo "  -B, --build-tool            Specify the build tool: cra, next, vite, angular-cli, vue-cli, nuxt, react-native-cli, expo. (default: cra)"
+        echo "  -B, --build-tool            Specify the build tool: next, vite, angular-cli, vue-cli, nuxt, react-native-cli, expo. (default: next)"
         echo "  -b, --build-tool-version    Specify the build tool version (default: latest)"
-        echo "  -l, --language              Specify the language: js, ts (default: js)"
         echo "  -n, --name                  Specify the mega app name (required)"
         echo "  -F, --framework             Specify the framework: react, angular, vue, react-native (default: react)"
         echo "  -f, --framework-version     Specify the framework version (default: latest)"

diff --git a/build-system-tests/scripts/mega-app-copy-files.sh b/build-system-tests/scripts/mega-app-copy-files.sh
@@ -2,33 +2,23 @@
 set -e
 
 # Default values
-BUILD_TOOL="cra"
-BUILD_TOOL_VERSION="latest"
-LANGUAGE="js"
+BUILD_TOOL="next"
 MEGA_APP_NAME=""
 FRAMEWORK="react"
 FRAMEWORK_VERSION="latest"
 
 # Options
 # e.g.
-# $ ./mega-app-copy-files.sh --build-tool react --build-tool-version latest --language typescript --name react-latest-cra-latest-node-18-ts --framework cra --framework-version latest
-# $ ./mega-app-copy-files.sh -B react -b latest -l typescript -n react-latest-cra-latest-node-18-ts -F cra -f latest
-# $ ./mega-app-copy-files.sh -n react-latest-cra-latest-node-18-ts
+# $ ./mega-app-copy-files.sh --build-tool next --build-tool-version latest --name react-latest-next-latest-node-18-ts --framework react --framework-version latest
+# $ ./mega-app-copy-files.sh -B next -b latest -l typescript -n react-latest-next-latest-node-18-ts -F react -f latest
+# $ ./mega-app-copy-files.sh -n react-latest-next-latest-node-18-ts
 
 while [[ $# -gt 0 ]]; do
     case $1 in
     -B | --build-tool)
         BUILD_TOOL=$2
         shift
         ;;
-    -b | --build-tool-version)
-        BUILD_TOOL_VERSION=$2
-        shift
-        ;;
-    -l | --language)
-        LANGUAGE=$2
-        shift
-        ;;
     -n | --name)
         MEGA_APP_NAME=$2
         shift
@@ -44,9 +34,8 @@ while [[ $# -gt 0 ]]; do
     -h | --help)
         echo "Usage: mega-app-create-app.sh [OPTIONS]"
         echo "Options:"
-        echo "  -B, --build-tool          Specify the build tool: cra, next, vite, angular-cli, vue-cli, nuxt, react-native-cli, expo. (default: cra)"
+        echo "  -B, --build-tool          Specify the build tool: next, vite, angular-cli, vue-cli, nuxt, react-native-cli, expo. (default: next)"
         echo "  -b, --build-tool-version Specify the build tool version (default: latest)"
-        echo "  -l, --language          Specify the language: js, ts (default: js)"
         echo "  -n, --name                 Specify the mega app name (required)"
         echo "  -F, --framework           Specify the framework: react, angular, vue, react-native (default: react)"
         echo "  -f, --framework-version  Specify the framework version (default: latest)"
@@ -76,24 +65,6 @@ echo "Installing json and strip-json-comments"
 echo "npm install"
 npm install
 
-if [ "$BUILD_TOOL" == 'cra' ]; then
-    echo "cp $AWS_EXPORTS_FILE mega-apps/${MEGA_APP_NAME}/src/aws-exports.js"
-    cp $AWS_EXPORTS_FILE mega-apps/${MEGA_APP_NAME}/src/aws-exports.js
-    if [ "$LANGUAGE" == 'js' ]; then
-        echo "cp templates/components/react/cra/App.js mega-apps/${MEGA_APP_NAME}/src/App.js"
-        cp templates/components/react/cra/App.js mega-apps/${MEGA_APP_NAME}/src/App.js
-    else
-        echo "cp templates/components/react/cra/App.js mega-apps/${MEGA_APP_NAME}/src/App.tsx"
-        cp templates/components/react/cra/App.js mega-apps/${MEGA_APP_NAME}/src/App.tsx
-        if [ "$FRAMEWORK_VERSION" == '16' ]; then
-            # We have to customize the index.tsx file for React 16 because the render API changed since React 18.
-            # See more: https://legacy.reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html
-            echo "cp templates/components/react/cra/index-react-${FRAMEWORK_VERSION}.js mega-apps/${MEGA_APP_NAME}/src/index.tsx"
-            cp templates/components/react/cra/index-react-${FRAMEWORK_VERSION}.js mega-apps/${MEGA_APP_NAME}/src/index.tsx
-        fi
-    fi
-fi
-
 if [ "$BUILD_TOOL" == 'next' ]; then
     echo "mkdir mega-apps/${MEGA_APP_NAME}/data"
     mkdir mega-apps/${MEGA_APP_NAME}/data
@@ -110,15 +81,6 @@ if [[ "$FRAMEWORK" == 'react' && "$BUILD_TOOL" == 'vite' ]]; then
     cp $AWS_EXPORTS_DECLARATION_FILE mega-apps/${MEGA_APP_NAME}/src/aws-exports.d.ts
     echo "cp templates/components/react/vite/App.tsx mega-apps/${MEGA_APP_NAME}/src/App.tsx"
     cp templates/components/react/vite/App.tsx mega-apps/${MEGA_APP_NAME}/src/App.tsx
-
-    # See troubleshooting:
-    # https://ui.docs.amplify.aws/react/getting-started/troubleshooting#vite
-    echo "cp templates/components/react/vite/index.html mega-apps/${MEGA_APP_NAME}/index.html"
-    cp templates/components/react/vite/index.html mega-apps/${MEGA_APP_NAME}/index.html
-    echo "cp templates/components/react/vite/template-tsconfig-vite-${BUILD_TOOL_VERSION}.json mega-apps/${MEGA_APP_NAME}/tsconfig.app.json"
-    cp templates/components/react/vite/template-tsconfig-vite-${BUILD_TOOL_VERSION}.json mega-apps/${MEGA_APP_NAME}/tsconfig.app.json
-    echo "cp templates/components/react/vite/vite.config.ts mega-apps/${MEGA_APP_NAME}/vite.config.ts"
-    cp templates/components/react/vite/vite.config.ts mega-apps/${MEGA_APP_NAME}/vite.config.ts
 fi
 
 if [[ "$FRAMEWORK" == 'angular' ]]; then