Migrate to vite (#99)

* ci: extend apps config for renovate and add reviewers * ci: add spaenleh as reviewer in renovate config * fix: migrate to vite BREAKING CHANGE: building process has changed * fix(deps): update commitlint * ci: add on merge_group to build and cypress workflows
graasp · Apr 25, 2024 · 09f516d · 09f516d
1 parent 632b0db
commit 09f516d
Show file tree

Hide file tree

Showing 49 changed files with 2,548 additions and 7,459 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -1,5 +1,10 @@
 build
 public
 coverage
-src/registerServiceWorker.js
-cypress/integration/examples
+
+node_modules
+.yarn/.cache
+.husky
+.nyc_output
+.yarn
+commitlint.config.js
diff --git a/.eslintrc b/.eslintrc
@@ -1,16 +1,20 @@
 {
-  "env": {
-    "browser": true,
-    "es2021": true
-  },
   "extends": [
     "airbnb",
+    "plugin:import/typescript", // this is needed because airbnb uses eslint-plugin-import
     "prettier",
-    "plugin:prettier/recommended",
     "plugin:cypress/recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:react/recommended"
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:@typescript-eslint/recommended"
   ],
+  "plugins": ["@typescript-eslint", "prettier", "react-hooks"],
+  "env": {
+    "browser": true,
+    "node": true,
+    "mocha": true,
+    "jest": true
+  },
   "globals": {
     "cy": true,
     "Cypress": true
@@ -23,7 +27,6 @@
     "ecmaVersion": "latest",
     "sourceType": "module"
   },
-  "plugins": ["react", "react-hooks", "@typescript-eslint", "prettier"],
   "rules": {
     "react/no-array-index-key": "off",
     "react/jsx-props-no-spreading": "off",
@@ -39,6 +42,7 @@
       }
     ],
     "import/prefer-default-export": "off",
+    "prettier/prettier": "error",
     "import/extensions": [
       "error",
       "ignorePackages",
@@ -78,14 +82,17 @@
     "@typescript-eslint/no-shadow": ["error"]
   },
   "settings": {
-    "react": {
-      "version": "detect"
-    },
-    "import/resolver": {
-      "typescript": {}
-    },
+    "import/extensions": [".js", ".jsx", ".ts", ".tsx"],
     "import/parsers": {
       "@typescript-eslint/parser": [".ts", ".tsx"]
+    },
+    "import/resolver": {
+      "typescript": {
+        "alwaysTryTypes": true
+      },
+      "node": {
+        "extensions": [".js", ".jsx", ".ts", ".tsx"]
+      }
     }
   }
 }
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -0,0 +1,22 @@
+name: Build and Check
+
+on:
+  push:
+  merge_group:
+
+jobs:
+  build:
+    concurrency: build-${{ github.head_ref || github.ref }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: checkout
+        uses: actions/checkout@v4
+
+      - name: Yarn Install and Cache
+        uses: graasp/graasp-deploy/.github/actions/yarn-install-and-cache@v1
+
+      - name: Lint
+        run: yarn check
+
+      - name: Build
+        run: yarn build
diff --git a/.github/workflows/cypress.yml b/.github/workflows/cypress.yml
@@ -1,72 +1,55 @@
-name: cypress tests
+name: Cypress UI tests
 
 on:
   push:
-    branches-ignore:
-      - 'release-please-**'
+  merge_group:
 
 jobs:
   cypress-run:
+    concurrency: cypress-${{ github.head_ref || github.ref }}
     runs-on: ubuntu-latest
     steps:
-      - name: checkout
+      - name: Checkout
         uses: actions/checkout@v4
 
-      - name: set up node
-        uses: actions/setup-node@v4
-
       - name: Yarn Install and Cache
         uses: graasp/graasp-deploy/.github/actions/yarn-install-and-cache@v1
         with:
           cypress: true
 
-      - name: cypress run
-        uses: cypress-io/github-action@v4
+      - name: Build App
+        run: yarn build:test
+        shell: bash
+        env:
+          VITE_PORT: 3000
+          VITE_API_HOST: http://localhost:3636
+          VITE_GRAASP_APP_KEY: id-1234567890
+          VITE_ENABLE_MOCK_API: true
+          VITE_VERSION: cypress-tests
+
+      - name: Cypress Run
+        uses: cypress-io/github-action@v5
         env:
-          REACT_APP_API_HOST: http://localhost:3636
-          REACT_APP_GRAASP_DOMAIN: localhost
-          REACT_APP_GRAASP_APP_KEY: id-1234567890
-          REACT_APP_ENABLE_MOCK_API: true
-          NODE_ENV: test
+          VITE_PORT: 3000
+          VITE_API_HOST: http://localhost:3636
+          VITE_GRAASP_APP_KEY: id-1234567890
+          VITE_ENABLE_MOCK_API: true
+          VITE_VERSION: cypress-tests
         with:
           install: false
-          build: yarn build
           config: baseUrl=http://localhost:3000
-          start: yarn start:ci
-          wait-on: 'http://localhost:3000'
-          wait-on-timeout: 180
+          start: yarn preview:test
           browser: chrome
           quiet: true
           # point to new cypress@10 config file
           config-file: cypress.config.ts
 
-      # component tests are not running ok in the CI
-      # - name: Run Component tests 🧪
-      #   uses: cypress-io/github-action@v4
-      #   with:
-      #     # we have already installed everything
-      #     install: false
-      #     # to run component tests we need to use "component: true"
-      #     component: true
-
-      # after the test run completes
-      # store videos and any screenshots
-      # NOTE: screenshots will be generated only if E2E test failed
-      # thus we store screenshots only on failures
-      # Alternative: create and commit an empty cypress/screenshots folder
-      # to always have something to upload
       - uses: actions/upload-artifact@v4
         if: failure()
         with:
           name: cypress-screenshots
           path: cypress/screenshots
 
-      - uses: actions/upload-artifact@v4
-        if: failure()
-        with:
-          name: cypress-videos
-          path: cypress/videos
-
       - name: coverage report
         run: npx nyc report --reporter=text-summary
 

diff --git a/.github/workflows/deploy-dev.yml b/.github/workflows/deploy-dev.yml
@@ -25,17 +25,22 @@ jobs:
       - name: Yarn build
         # Set environment variables required to perform the build. These are only available to this step
         env:
-          REACT_APP_GRAASP_APP_KEY: ${{ secrets.APP_KEY }}
-          REACT_APP_API_HOST: ${{ secrets.REACT_APP_API_HOST_DEV }}
+          VITE_API_HOST: ${{ vars.API_HOST }}
+          VITE_GRAASP_APP_KEY: ${{ secrets.APP_KEY }}
+          VITE_SENTRY_ENV: ${{ vars.SENTRY_ENV }}
+          VITE_SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
+          VITE_VERSION: ${{ github.sha }}
+          VITE_WS_HOST: ${{ vars.WS_HOST }}
+          # add any env variable needed by your app here
         run: yarn build
         shell: bash
 
       - name: Deploy
         uses: graasp/graasp-deploy/.github/actions/deploy-s3-app@v1
-        # Replace input build-folder or version if needed
         with:
+          # Replace input build-folder or version if needed
           build-folder: 'build'
-          graasp-app-id: ${{ secrets.APP_ID }}
+          graasp-app-id: ${{ vars.APP_ID }}
           version: 'latest'
           aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID_DEV }}
           aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY_DEV }}

diff --git a/.github/workflows/deploy-prod.yml b/.github/workflows/deploy-prod.yml
@@ -6,6 +6,15 @@ on:
   repository_dispatch:
     types: [production-deployment]
 
+  # Allows to run the workflow manually from the Actions tab
+  workflow_dispatch:
+    inputs:
+      tag:
+        description: Tag or branch to deploy
+        required: false
+        default: main
+        type: string
+
 jobs:
   deploy-app:
     name: Deploy to production
@@ -14,24 +23,39 @@ jobs:
     steps:
       - name: Checkout code
         uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.client_payload.tag }}
 
       - name: Yarn install and Cache dependencies
         uses: graasp/graasp-deploy/.github/actions/yarn-install-and-cache@v1
 
+      - name: Set version
+        id: set-version
+        run: |
+          VERSION_REPO_DISPATCH=${{ github.event.client_payload.tag }}
+          VERSION_REF=${{ github.ref_name }}
+          VERSION_COMMIT=${{ github.sha }}
+          echo "VERSION=${VERSION_REPO_DISPATCH:-${VERSION_REF:-${VERSION_COMMIT:-"undefined"}}}" >> "$GITHUB_OUTPUT"
+
       - name: Yarn build
         # Set environment variables required to perform the build. These are only available to this step
         env:
-          REACT_APP_GRAASP_APP_KEY: ${{ secrets.APP_KEY }}
-          REACT_APP_API_HOST: ${{ secrets.REACT_APP_API_HOST_PROD }}
+          VITE_API_HOST: ${{ vars.API_HOST }}
+          VITE_GRAASP_APP_KEY: ${{ secrets.APP_KEY }}
+          VITE_SENTRY_ENV: ${{ vars.SENTRY_ENV }}
+          VITE_SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
+          VITE_VERSION: ${{ steps.set-version.outputs.VERSION }}
+          VITE_WS_HOST: ${{ vars.WS_HOST }}
+          # add any env variable needed by your app here
         run: yarn build
         shell: bash
 
       - name: Deploy
         uses: graasp/graasp-deploy/.github/actions/deploy-s3-app@v1
-        # Replace input build-folder or version if needed
         with:
+          # Replace input build-folder or version if needed
           build-folder: 'build'
-          graasp-app-id: ${{ secrets.APP_ID }}
+          graasp-app-id: ${{ vars.APP_ID }}
           version: 'latest'
           aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID_PROD }}
           aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY_PROD }}

diff --git a/.github/workflows/deploy-stage.yml b/.github/workflows/deploy-stage.yml
@@ -6,6 +6,15 @@ on:
   repository_dispatch:
     types: [staging-deployment]
 
+  # Allows to run the workflow manually from the Actions tab
+  workflow_dispatch:
+    inputs:
+      tag:
+        description: Tag or branch to deploy
+        required: false
+        default: main
+        type: string
+
 jobs:
   deploy-app:
     name: Deploy to staging
@@ -14,24 +23,39 @@ jobs:
     steps:
       - name: Checkout code
         uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.client_payload.tag }}
 
       - name: Yarn install and Cache dependencies
         uses: graasp/graasp-deploy/.github/actions/yarn-install-and-cache@v1
 
+      - name: Set version
+        id: set-version
+        run: |
+          VERSION_REPO_DISPATCH=${{ github.event.client_payload.tag }}
+          VERSION_REF=${{ github.ref_name }}
+          VERSION_COMMIT=${{ github.sha }}
+          echo "VERSION=${VERSION_REPO_DISPATCH:-${VERSION_REF:-${VERSION_COMMIT:-"undefined"}}}" >> "$GITHUB_OUTPUT"
+
       - name: Yarn build
         # Set environment variables required to perform the build. These are only available to this step
         env:
-          REACT_APP_GRAASP_APP_KEY: ${{ secrets.APP_KEY }}
-          REACT_APP_API_HOST: ${{ secrets.REACT_APP_API_HOST_STAGE }}
+          VITE_API_HOST: ${{ vars.API_HOST }}
+          VITE_GRAASP_APP_KEY: ${{ secrets.APP_KEY }}
+          VITE_SENTRY_ENV: ${{ vars.SENTRY_ENV }}
+          VITE_SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
+          VITE_VERSION: ${{ steps.set-version.outputs.VERSION }}
+          VITE_WS_HOST: ${{ vars.WS_HOST }}
+          # add any env variable needed by your app here
         run: yarn build
         shell: bash
 
       - name: Deploy
         uses: graasp/graasp-deploy/.github/actions/deploy-s3-app@v1
-        # Replace input build-folder or version if needed
         with:
+          # Replace input build-folder or version if needed
           build-folder: 'build'
-          graasp-app-id: ${{ secrets.APP_ID }}
+          graasp-app-id: ${{ vars.APP_ID }}
           version: 'latest'
           aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID_STAGE }}
           aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY_STAGE }}

diff --git a/.github/workflows/release-please.yml b/.github/workflows/release-please.yml
@@ -1,4 +1,3 @@
-# Automate releases of new app versions
 name: release-please
 
 on:
@@ -10,26 +9,15 @@ jobs:
   release-please:
     runs-on: ubuntu-latest
     steps:
-      - uses: google-github-actions/release-please-action@v3
+      - uses: google-github-actions/release-please-action@v4
         id: release
         with:
           release-type: node
-          package-name: graasp-app-file-drop
-          changelog-types: '[{"type":"feat","section":"Features","hidden":false},{"type":"fix","section":"Bug Fixes","hidden":false},{"type":"docs","section":"Documentation","hidden":false},{"type":"test","section":"Tests","hidden":false}]'
 
       - uses: actions/checkout@v4
 
-      # creates minor and major tags that follow the latest release
-      - name: Tag major and minor versions
-        uses: jacobsvante/[email protected]
-        if: ${{ steps.release.outputs.releases_created }}
-        with:
-          major: ${{ steps.release.outputs.major }}
-          minor: ${{ steps.release.outputs.minor }}
-
-      # put created tag in an env variable to be sent to the dispatch
       - name: Set tag
-        if: ${{ steps.release.outputs.releases_created }}
+        if: ${{ steps.release.outputs.releases_created == 'true' }}
         id: set-tag
         run: |
           REPOSITORY=$(echo '${{ github.repository }}')
@@ -39,13 +27,13 @@ jobs:
 
       # Trigger an 'on: repository_dispatch' workflow to run in graasp-deploy repository
       - name: Push tag to Graasp Deploy (Staging)
-        if: ${{ steps.release.outputs.releases_created }}
-        uses: peter-evans/repository-dispatch@v2
+        if: ${{ steps.release.outputs.releases_created == 'true' }}
+        uses: peter-evans/repository-dispatch@v3
         with:
           token: ${{ secrets.REPO_ACCESS_TOKEN }}
           repository: graasp/graasp-deploy
           event-type: update-staging-version
-          client-payload: ${{ steps.set-tag.outputs.json }}
+          client-payload: ${{steps.set-tag.outputs.json}}
 
       - name: Auto Tag
         uses: graasp/graasp-deploy/.github/actions/auto-tag-after-release@v1