feat: setup vite (#79)

* feat: setup vite * fix: cupress github workflow * fix: add build job to cypress workflow * feat: delete script deploy file * fix: review comments * fix: use lodash sunpackages instead of whole lodash
graasp · Feb 15, 2024 · 5880255 · 5880255
1 parent ffba470
commit 5880255
Show file tree

Hide file tree

Showing 25 changed files with 4,198 additions and 12,020 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -40,12 +40,6 @@
     "@typescript-eslint/ban-ts-comment": "off",
     "import/no-import-module-exports": "off",
     "no-console": ["error", { "allow": ["error", "warn", "debug", "info"] }],
-    "import/no-extraneous-dependencies": [
-      "error",
-      {
-        "devDependencies": true
-      }
-    ],
     "import/prefer-default-export": "off",
     "prettier/prettier": "error",
     "import/extensions": [
@@ -94,6 +88,12 @@
         "varsIgnorePattern": "^_",
         "caughtErrorsIgnorePattern": "^_"
       }
+    ],
+    "import/no-extraneous-dependencies": [
+      "error",
+      {
+        "devDependencies": true
+      }
     ]
   },
   "settings": {
@@ -103,7 +103,7 @@
     },
     "import/resolver": {
       "typescript": {
-        "alwaysTryTypes": true
+        "directory": "./tsconfig.json"
       },
       "node": {
         "extensions": [".js", ".jsx", ".ts", ".tsx"]

diff --git a/.github/workflows/cypress.yml b/.github/workflows/cypress.yml
@@ -20,21 +20,25 @@ jobs:
         with:
           cypress: true
 
+      - name: Build App
+        run: yarn build:test
+        shell: bash
+        env:
+          VITE_PORT: 3017
+          VITE_API_HOST: ${{ vars.VITE_GRAASP_API_HOST }}
+          VITE_GRAASP_APP_KEY: id-1234567890
+          VITE_ENABLE_MOCK_API: true
+          VITE_VERSION: cypress-tests
+
       - name: cypress run
-        uses: cypress-io/github-action@v5
+        uses: cypress-io/github-action@v6
         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_GRAASP_APP_KEY: id-1234567890
+          VITE_ENABLE_MOCK_API: true
+          VITE_GRAASP_API_HOST: ${{ vars.VITE_GRAASP_API_HOST }}
         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

diff --git a/.github/workflows/deploy-dev.yml b/.github/workflows/deploy-dev.yml
@@ -25,8 +25,8 @@ 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 }}
+          VITE_GRAASP_API_HOST: ${{ secrets.REACT_APP_API_HOST_DEV }}
+          VITE_GRAASP_APP_KEY: ${{ secrets.APP_KEY }}
         run: yarn build
         shell: bash
 

diff --git a/.github/workflows/deploy-prod.yml b/.github/workflows/deploy-prod.yml
@@ -21,8 +21,8 @@ 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 }}
+          VITE_GRAASP_API_HOST: ${{ secrets.REACT_APP_API_HOST_PROD }}
+          VITE_GRAASP_APP_KEY: ${{ secrets.APP_KEY }}
         run: yarn build
         shell: bash
 

diff --git a/.github/workflows/deploy-staging.yml b/.github/workflows/deploy-staging.yml
@@ -21,8 +21,8 @@ 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 }}
+          VITE_GRAASP_API_HOST: ${{ secrets.REACT_APP_API_HOST_STAGE }}
+          VITE_GRAASP_APP_KEY: ${{ secrets.APP_KEY }}
         run: yarn build
         shell: bash
 

diff --git a/cypress.config.ts b/cypress.config.ts
@@ -4,6 +4,11 @@ export default defineConfig({
   e2e: {
     testIsolation: false,
     retries: { runMode: 1, openMode: 0 },
-    baseUrl: `http://localhost:${process.env.PORT || 3017}`,
+    baseUrl: `http://localhost:${process.env.VITE_PORT || 3017}`,
+    env: {
+      VITE_GRAASP_API_HOST: process.env.VITE_GRAASP_API_HOST,
+      VITE_ENABLE_MOCK_API: process.env.VITE_ENABLE_MOCK_API,
+      VITE_GRAASP_APP_KEY: process.env.VITE_GRAASP_APP_KEY,
+    },
   },
 });
diff --git a/index.html b/index.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/graasp.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="title" content="Graasp Calculator App" />
+    <meta
+      name="description"
+      content="A graasp calculator app"
+    />
+    <meta
+      name="version-info"
+      content="%VITE_VERSION% @ %VITE_BUILD_TIMESTAMP%"
+    />
+    <title>Calculator</title>
+    <script>
+
+      // sets a minimum height when embedded
+      if (window.frameElement) {
+        window.frameElement.style['min-height'] = '480px';
+      }
+    </script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="src/index.tsx"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -7,6 +7,7 @@
     "Kim Lan Phan Hoang"
   ],
   "homepage": ".",
+  "type": "module",
   "license": "AGPL3.0-only",
   "dependencies": {
     "@emotion/react": "11.11.1",
@@ -18,46 +19,39 @@
     "@mui/material": "5.14.4",
     "i18next": "22.5.1",
     "katex": "0.16.7",
+    "lodash.isnan": "3.0.2",
+    "lodash.isnumber": "3.0.3",
+    "lodash.isobject": "3.0.2",
+    "lodash.isstring": "4.0.1",
     "mathjs": "11.8.2",
     "prop-types": "15.8.1",
     "qs": "6.11.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-i18next": "12.3.1",
     "react-router-dom": "6.12.1",
-    "react-scripts": "5.0.1",
     "react-select": "5.7.3",
     "react-toastify": "9.1.3"
   },
   "scripts": {
-    "start": "npm-run-all --parallel start:local",
-    "start:local": "env-cmd -f ./.env.local react-scripts start",
-    "start:ci": "react-scripts start",
+    "dev": "yarn vite",
+    "start": "yarn dev",
+    "start:test": "yarn vite --mode test",
+    "build": "yarn vite build",
+    "build:test": "yarn vite build --mode test",
+    "preview": "yarn vite preview",
+    "preview:test": "yarn vite preview --mode test",
     "pre-commit": "yarn prettier:check && yarn lint && yarn type-check",
     "pre-push": "yarn lint && yarn build",
-    "build": "run-s build:react",
-    "build:react": "react-scripts build",
-    "build:local": "env-cmd -f ./.env.local yarn build",
-    "build:dev": "env-cmd -f ./.env.dev yarn build",
-    "build:prod": "env-cmd -f ./.env.prod yarn build",
-    "build:version": "REACT_APP_VERSION=$CI_BRANCH env-cmd --no-override -f ./.env.prod yarn build",
     "hooks:install": "husky install",
     "hooks:uninstall": "husky uninstall",
     "lint": "eslint .",
     "type-check": "tsc --noEmit && tsc --noEmit -p cypress/tsconfig.json",
-    "prettier:check": "prettier --check {src,cypress}/**/*.js",
-    "prettier:write": "prettier --write {src,cypress}/**/*.js",
-    "test": "react-scripts test",
-    "test:once": "cross-env CI=true env-cmd -f ./.env.test react-scripts test --env=jsdom",
-    "test:coverage": "react-scripts test --env=jsdom --coverage",
-    "test:ci": "run-s test:coverage report",
+    "prettier:check": "prettier --check {src,cypress}/**/*.{ts,tsx}",
+    "prettier:write": "prettier --write {src,cypress}/**/*.{ts,tsx}",
+    "test": "yarn build:test && concurrently -k -s first \"yarn preview:test\" \"yarn cypress:run\"",
+    "cypress:run": "env-cmd -f ./.env.test cypress run --browser chrome",
     "report": "cat ./coverage/lcov.info | codacy-coverage",
-    "eject": "react-scripts eject",
-    "release": "standard-version -a",
-    "release:first": "standard-version -a --first-release",
-    "release:minor": "standard-version -a --release-as minor",
-    "release:major": "standard-version -a --release-as major",
-    "release:patch": "standard-version -a --release-as patch",
     "cypress:open": "cypress open",
     "cypress": "npm-run-all --parallel start cypress:open",
     "postinstall": "husky install"
@@ -66,12 +60,15 @@
     "@commitlint/cli": "17.6.5",
     "@commitlint/config-conventional": "17.6.5",
     "@types/katex": "0.16.0",
-    "@types/lodash": "4.14.202",
-    "@types/react": "18.2.13",
+    "@types/lodash.isnan": "3.0.9",
+    "@types/lodash.isnumber": "3.0.9",
+    "@types/lodash.isobject": "3.0.9",
+    "@types/lodash.isstring": "4.0.9",
+    "@types/react": "18.2.39",
     "@types/react-dom": "18.2.6",
     "@typescript-eslint/eslint-plugin": "5.60.1",
     "@typescript-eslint/parser": "5.60.1",
-    "cross-env": "7.0.3",
+    "@vitejs/plugin-react": "4.2.1",
     "cypress": "13.6.3",
     "env-cmd": "10.1.0",
     "eslint": "8.43.0",
@@ -87,13 +84,11 @@
     "eslint-plugin-react": "7.32.2",
     "eslint-plugin-react-hooks": "4.6.0",
     "husky": "^8.0.3",
-    "npm-run-all": "4.1.5",
     "prettier": "3.2.4",
-    "standard-version": "9.5.0",
-    "typescript": "5.1.3"
-  },
-  "release": {
-    "analyzeCommits": "conventional"
+    "typescript": "5.1.3",
+    "vite": "5.1.1",
+    "vite-plugin-checker": "0.6.4",
+    "vite-plugin-istanbul": "5.0.0"
   },
   "browserslist": [
     ">0.2%",

diff --git a/public/graasp.svg b/public/graasp.svg
diff --git a/public/index.html b/public/index.html