chore: migrate to vite

Author: ReidyT

.github/workflows/cypress.yml

@@ -1,76 +1,54 @@
-name: Cypress
+name: Cypress UI tests
 
 on:
-  merge_group:
   push:
-    branches-ignore:
-      - 'release-please-**'
 
 jobs:
   cypress-run:
-    concurrency:
-      group: cypress-${{ github.head_ref || github.ref }}
+    concurrency: cypress-${{ github.head_ref || github.ref }}
     runs-on: ubuntu-latest
     steps:
-      - name: checkout
-        uses: actions/checkout@v3
-
-      - name: set up node
-        uses: actions/setup-node@v3
-        with:
-          node-version: '18'
+      - name: Checkout
+        uses: actions/checkout@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:
-          PORT: 3000
-          REACT_APP_API_HOST: http://localhost:3636
-          REACT_APP_GRAASP_APP_KEY: id-1234567890
-          REACT_APP_ENABLE_MOCK_API: true
+          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:
-          wait-on: http://localhost:3000
-          wait-on-timeout: 180
           install: false
-          build: yarn build
           config: baseUrl=http://localhost:3000
-          start: yarn start:ci
+          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@v3
+      - uses: actions/upload-artifact@v4
         if: failure()
         with:
           name: cypress-screenshots
           path: cypress/screenshots
 
-      - uses: actions/upload-artifact@v3
-        if: failure()
-        with:
-          name: cypress-videos
-          path: cypress/videos
-
       - name: coverage report
         run: npx nyc report --reporter=text-summary
 
@@ -88,4 +66,4 @@ jobs:
           GITHUB_TOKEN: ${{ github.token }}
           REPO_PATH: ${{ github.repository }}
           COMMIT_SHA: ${{ github.sha }}
-          RUN_ID: ${{ github.run_id }}
+          RUN_ID: ${{ github.run_id }}

.github/workflows/deploy-dev.yml

@@ -25,9 +25,11 @@ jobs:
       - name: Yarn build
         # Set environment variables required to perform the build. These are only available to this step
         env:
-          REACT_APP_API_HOST: ${{ secrets.REACT_APP_API_HOST_DEV }}
-          REACT_APP_GRAASP_APP_KEY: ${{ secrets.APP_KEY }}
-          REACT_APP_SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
+          VITE_API_HOST: ${{ vars.VITE_API_HOST }}
+          VITE_GRAASP_APP_KEY: ${{ secrets.VITE_GRAASP_APP_KEY }}
+          VITE_SENTRY_ENV: development
+          VITE_SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
+          VITE_VERSION: ${{ github.sha }}
         run: yarn build
         shell: bash
 

.github/workflows/deploy-prod.yml

@@ -24,9 +24,11 @@ jobs:
       - name: Yarn build
         # Set environment variables required to perform the build. These are only available to this step
         env:
-          REACT_APP_API_HOST: ${{ secrets.REACT_APP_API_HOST_PROD }}
-          REACT_APP_GRAASP_APP_KEY: ${{ secrets.APP_KEY }}
-          REACT_APP_SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
+          VITE_API_HOST: ${{ vars.VITE_API_HOST }}
+          VITE_GRAASP_APP_KEY: ${{ secrets.VITE_GRAASP_APP_KEY }}
+          VITE_SENTRY_ENV: production
+          VITE_SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
+          VITE_VERSION: ${{ github.event.client_payload.tag }}
         run: yarn build
         shell: bash
 

.github/workflows/deploy-stage.yml

@@ -24,9 +24,11 @@ jobs:
       - name: Yarn build
         # Set environment variables required to perform the build. These are only available to this step
         env:
-          REACT_APP_API_HOST: ${{ secrets.REACT_APP_API_HOST_STAGE }}
-          REACT_APP_GRAASP_APP_KEY: ${{ secrets.APP_KEY }}
-          REACT_APP_SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
+          VITE_API_HOST: ${{ vars.VITE_API_HOST }}
+          VITE_GRAASP_APP_KEY: ${{ secrets.VITE_GRAASP_APP_KEY }}
+          VITE_SENTRY_ENV: staging
+          VITE_SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
+          VITE_VERSION: ${{ github.event.client_payload.tag }}
         run: yarn build
         shell: bash
 

.husky/pre-commit

@@ -5,4 +5,6 @@
 
 . "$(dirname "$0")/_/husky.sh"
 
-yarn pretty-quick --staged && yarn lint
+yarn type-check
+yarn prettier:check
+yarn lint

.husky/pre-push

@@ -5,4 +5,6 @@
 
 . "$(dirname "$0")/_/husky.sh"
 
-yarn lint && yarn build
+yarn type-check
+yarn lint
+yarn build

README.md

@@ -4,10 +4,9 @@
   Create a env.development file with:
 
   PORT=3005
-  REACT_APP_GRAASP_APP_KEY=<app KEY>
-  REACT_APP_ENABLE_MOCK_API=true
-  REACT_APP_GRAASP_DOMAIN=localhost
-  REACT_APP_API_HOST=<request address for the backend>
+  VITE_GRAASP_APP_KEY=<app KEY>
+  VITE_ENABLE_MOCK_API=true
+  VITE_API_HOST=<request address for the backend>
 ```
 
 ![GitHub package.json version](https://img.shields.io/github/package-json/v/graasp/graasp-app-text-analysis?color=green&style=flat-square)

cypress.config.ts

@@ -1,11 +1,22 @@
 import { defineConfig } from 'cypress';
+import vitePreprocessor from 'cypress-vite';
+
+import setupCoverage from '@cypress/code-coverage/task';
 
 export default defineConfig({
   video: false,
+  retries: {
+    runMode: 2,
+  },
+  chromeWebSecurity: false,
   e2e: {
     setupNodeEvents(on, config) {
-      return require('./cypress/plugins/index')(on, config);
+      // cypress-vite allow to using vite specific features
+      // like plugins and virtual imports, import.meta, etc. in e2e tests
+      on('file:preprocessor', vitePreprocessor());
+      setupCoverage(on, config);
+      return config;
     },
-    baseUrl: `http://localhost:${process.env.PORT || 3000}`,
+    baseUrl: `http://localhost:${process.env.VITE_PORT || 3335}`,
   },
 });

cypress/plugins/index.ts

@@ -1,4 +1,6 @@
 /// <reference types="../../src/interfaces/window" />
+import { PermissionLevel } from '@graasp/sdk';
+
 import '@testing-library/cypress/add-commands';
 
 import { CURRENT_MEMBER, MEMBERS, MOCK_SERVER_ITEM } from '../../src/data/db';
@@ -48,7 +50,9 @@ Cypress.Commands.add(
       win.appContext = {
         memberId: currentMember.id,
         itemId: MOCK_SERVER_ITEM.id,
-        apiHost: Cypress.env('REACT_APP_API_HOST') || MOCK_SERVER_API_HOST,
+        apiHost: Cypress.env('VITE_API_HOST') || MOCK_SERVER_API_HOST,
+        context: 'standalone',
+        permission: PermissionLevel.Read,
         ...appContext,
       };
     });

cypress/support/commands.ts

@@ -1,9 +1,14 @@
 {
+  "extends": "../tsconfig.json",
   "compilerOptions": {
     "target": "es5",
-    "lib": ["es5", "dom"],
-    "types": ["cypress", "node"],
-    "esModuleInterop": true
+    "lib": ["es5", "dom", "ES2021.String"],
+    "types": ["cypress", "node", "vite/client"],
+    "esModuleInterop": true,
+    "strictNullChecks": false,
+    "strict": true,
+    "sourceMap": false
   },
-  "include": ["**/*.ts", "../src/data/members.ts"]
+  "include": ["**/*.ts", "../src/data/members.ts", "cypress.d.ts"],
+  "exclude": ["coverage", ".nyc_output"]
 }

cypress/tsconfig.json

@@ -359,10 +359,9 @@ jobs:
       - name: cypress run
         uses: cypress-io/github-action@v2
         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
+          VITE_API_HOST: http://localhost:3636
+          VITE_GRAASP_APP_KEY: id-1234567890
+          VITE_ENABLE_MOCK_API: true
           NODE_ENV: test
         with:
           install: false

docs/Setup_Intructions.md

@@ -2,15 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <!-- todo: change this to appropriate values -->
     <meta
       name="Text Analysis"
       content="A Graasp App created using a template."
     />
-    <meta name="version-info" content="%REACT_APP_VERSION%" />
+    <meta name="version-info" content="%VITE_VERSION%" />
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
@@ -22,13 +22,13 @@
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="manifest" href="/manifest.json" />
     <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
+      Notice the use of  in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
 
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      Unlike "/favicon.ico" or "favicon.ico", "/favicon.ico" will
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
@@ -48,5 +48,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+    <script type="module" src="src/index.tsx"></script>
   </body>
 </html>