Merge pull request #2313 from glific/vite-migration

Vite migration
glific · Mar 15, 2023 · af9426c · af9426c
2 parents 507dac7 + ff609ae
commit af9426c
Show file tree

Hide file tree

Showing 147 changed files with 2,574 additions and 1,725 deletions.
diff --git a/.env.example b/.env.example
@@ -1,9 +1,9 @@
-REACT_APP_API_PREFIX="api"
-REACT_APP_GLIFIC_API_PORT=4001
-REACT_APP_GLIFIC_BACKEND_URL=''
-REACT_APP_APPSIGNAL_API_KEY=""
-REACT_APP_APPLICATION_NAME="Glific: Two way communication platform"
-REACT_APP_LOGFLARE_API_KEY=''
-REACT_APP_LOGFLARE_SOURCE_TOKEN=''
-REACT_APP_STRIPE_PUBLISH_KEY=''
-REACT_APP_RECAPTCHA_CLIENT_KEY='Your recaptch key'
+VITE_API_PREFIX="api"
+VITE_GLIFIC_API_PORT=4001
+VITE_GLIFIC_BACKEND_URL=''
+VITE_APPSIGNAL_API_KEY=""
+VITE_APPLICATION_NAME="Glific: Two way communication platform"
+VITE_LOGFLARE_API_KEY=''
+VITE_LOGFLARE_SOURCE_TOKEN=''
+VITE_STRIPE_PUBLISH_KEY=''
+VITE_RECAPTCHA_CLIENT_KEY='Your recaptch key'
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,6 +1,7 @@
 {
-  "extends": ["airbnb", "prettier"],
-  "plugins": ["prettier"],
+  "extends": ["airbnb", "prettier", "plugin:@typescript-eslint/recommended"],
+  "plugins": ["prettier", "@typescript-eslint"],
+  "parser": "@typescript-eslint/parser",
   "rules": {
     "prettier/prettier": ["error"],
     "react/jsx-filename-extension": [
@@ -35,9 +36,6 @@
     "react/require-default-props": "off",
     "no-undef": "off"
   },
-  "env": {
-    "jest": true
-  },
   "settings": {
     "import/resolver": {
       "node": {

diff --git a/.github/workflows/cypress-testing.yml b/.github/workflows/cypress-testing.yml
@@ -96,6 +96,9 @@ jobs:
         run: |
           echo clone cypress repo
           git clone https://github.com/glific/cypress-testing.git
+          cd cypress-testing
+          git checkout feature/vite
+          cd ..
           echo done. go to dir.
           cp -r cypress-testing/cypress cypress
           yarn add cypress@12.3.0
@@ -105,7 +108,7 @@ jobs:
         # Run frontend
       - name: Run glific frontend
         run: |
-          HOST=glific.test HTTPS=true SSL_CRT_FILE=../glific/priv/cert/glific.test+1.pem SSL_KEY_FILE=../glific/priv/cert/glific.test+1-key.pem yarn start &
+          yarn dev &
 
         # Run backend
       - name: Run glific backend

diff --git a/.github/workflows/netlify.yml b/.github/workflows/netlify.yml
@@ -12,8 +12,8 @@ jobs:
       - name: Install Dependencies
         run: |
           cp .env.example .env
-          sed -i "s/REACT_APP_GLIFIC_BACKEND_URL=''/REACT_APP_GLIFIC_BACKEND_URL='api.staging.tides.coloredcow.com'/g" .env
-          yarn setup && CI=false yarn run react-app-rewired build
+          sed -i "s/VITE_GLIFIC_BACKEND_URL=''/VITE_GLIFIC_BACKEND_URL='api.staging.tides.coloredcow.com'/g" .env
+          yarn build
 
       - name: Deploy to Netlify
         uses: nwtgck/actions-netlify@v1.2

diff --git a/.github/workflows/unit-testing.yml b/.github/workflows/unit-testing.yml
@@ -21,7 +21,7 @@ jobs:
         run: yarn install --frozen-lockfile
 
       - name: Run test and generate coverage report
-        run: yarn test --coverage --watchAll=false
+        run: yarn test:coverage
 
       - name: Upload coverage to Codecov
-        uses: codecov/codecov-action@v1
+        uses: codecov/codecov-action@v3
diff --git a/.gitignore b/.gitignore
@@ -15,6 +15,8 @@
 .DS_Store
 .env
 
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*

diff --git a/Dockerfile b/Dockerfile
@@ -1,10 +1,10 @@
 FROM node:12-alpine AS builder
 
 # Any env variables will be passed as arg here to make these available at build time.
-ARG REACT_APP_GLIFIC_API_PORT
+ARG VITE_GLIFIC_API_PORT
 
 # Add those arg as env variable for builder
-ENV REACT_APP_GLIFIC_API_PORT $REACT_APP_GLIFIC_API_PORT
+ENV VITE_GLIFIC_API_PORT $VITE_GLIFIC_API_PORT
 
 WORKDIR /app
 COPY . .

diff --git a/README.md b/README.md
@@ -13,6 +13,8 @@ Frontend interface built using React.
 
 - Setup the backend application. You can find the instructions [here](https://github.com/glific/glific).
 - SSL is mandatory for both frontend and backend in development. You can find the instructions to generate ssl certificate [here](https://github.com/glific/glific#use-ssl-for-frontend-and-backend)
+- Configure below host in your `/etc/hosts`
+  `127.0.0.1 glific.test`
 
 ## Installation steps
 
@@ -26,47 +28,42 @@ In the project directory, you can run:
 
 ### `yarn setup`
 
-Install the dependencies and required packages.<br />
+Install the dependencies and required packages.
 
-### `yarn start`
+### `yarn dev`
 
-Runs the app in the development mode.<br />
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
-
-The page will reload if you make edits.<br />
-You will also see any lint errors in the console.
-
-Run `HOST=glific.test yarn start` if you are using host configuration.
+Runs the app in the development mode.
 
 ### `yarn test`
 
-Launches the test runner in the interactive watch mode.<br />
+Launches the test runner in the interactive watch mode.
 
 ### `yarn test:coverage`
 
-Launches the test runner in the interactive watch mode and code coverage stats.<br />
+Launches the test runner in the interactive watch mode and code coverage stats.
 
 ### `yarn build`
 
-Builds the app for production to the `build` folder.<br />
+Builds the app for production to the `build` folder.
 It correctly bundles React in production mode and optimizes the build for the best performance.
 
-The build is minified and the filenames include the hashes.<br />
+The build is minified and the filenames include the hashes.
+
 Your app is ready to be deployed!
 
 ## Docker image for production
 
-```
+```bash
 docker build \
---build-arg REACT_APP_GLIFIC_API_PORT=API-PORT \
+--build-arg VITE_GLIFIC_API_PORT=API-PORT \
 --no-cache -t .
 ```
 
 ## Localization
 
 Update translation base file (i.e. English)
 
-```
+```bash
 yarn extract-translations
 ```
 

diff --git a/buildspec.yml.sample b/buildspec.yml.sample
@@ -1,7 +1,7 @@
 # Use this file in AWS code build for creating and pushing latest docker image to ECR repository.
 
 version: 0.2
-    
+
 phases:
   pre_build:
     commands:
@@ -14,8 +14,8 @@ phases:
   build:
     commands:
       - echo Build started on `date`
-      - echo Building the Docker image... 
-      - docker build --build-arg REACT_APP_GLIFIC_API=<API-URL> --build-arg REACT_APP_WEB_SOCKET=<SOCKET-URL> --build-arg REACT_APP_FLOW_EDITOR_API=<FLOWEDITOR-URL> -t $REPOSITORY_URI:latest .
+      - echo Building the Docker image...
+      - docker build --build-arg VITE_GLIFIC_API=<API-URL> --build-arg VITE_WEB_SOCKET=<SOCKET-URL> --build-arg VITE_FLOW_EDITOR_API=<FLOWEDITOR-URL> -t $REPOSITORY_URI:latest .
       - docker tag $REPOSITORY_URI:latest $REPOSITORY_URI:$IMAGE_TAG
   post_build:
     commands:

diff --git a/config-overrides.js b/config-overrides.js
diff --git a/index.html b/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="/Glific-Favicon.svg" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Heebo:wght@500&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap"
+      rel="stylesheet"
+    />
+    <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="description" content="Glific: Two way communication platform" />
+    <link rel="apple-touch-icon" href="/Glific-Favicon.svg" />
+    <!--
+      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="/manifest.json" />
+    <title>Glific: Two way communication platform</title>
+  </head>
+
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/global.ts"></script>
+    <!-- Add entry point 👇 -->
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -26,35 +26,14 @@
     "@mui/x-date-pickers": "^5.0.20",
     "@stripe/react-stripe-js": "^1.16.5",
     "@stripe/stripe-js": "^1.47.0",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.4.3",
-    "@types/draft-js": "^0.11.10",
-    "@types/emoji-mart": "^3.0.9",
-    "@types/jest": "^29.4.0",
-    "@types/node": "^18.14.2",
-    "@types/react": "^18.0.28",
-    "@types/react-color": "^3.0.6",
-    "@types/react-dom": "^18.0.11",
-    "@types/react-google-recaptcha": "^2.1.5",
-    "@types/react-linkify": "^1.0.1",
-    "@types/react-router": "^5.1.20",
-    "@types/react-router-dom": "^5.3.3",
-    "@types/uuid": "^9.0.1",
+    "@vitejs/plugin-react": "^3.0.1",
     "apollo-absinthe-upload-link": "^1.7.0",
     "apollo-link-token-refresh": "^0.4.0",
     "axios": "^1.3.4",
     "buffer": "^6.0.3",
     "date-fns": "^2.29.3",
     "draft-js": "^0.11.7",
     "emoji-mart": "^5.5.2",
-    "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-prettier": "^8.6.0",
-    "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.32.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
     "formik": "^2.2.9",
     "graphql": "^16.6.0",
     "graphql-ws": "^5.11.3",
@@ -65,9 +44,7 @@
     "moment": "^2.29.4",
     "pino": "^8.11.0",
     "pino-logflare": "^0.3.12",
-    "process": "^0.11.10",
     "react": "^18.2.0",
-    "react-app-rewired": "^2.2.1",
     "react-color": "^2.19.3",
     "react-dom": "^18.2.0",
     "react-draggable": "^4.4.5",
@@ -82,21 +59,28 @@
     "react-scripts": "^5.0.1",
     "react-tiny-link": "^3.6.1",
     "react-viewer": "^3.2.2",
-    "typescript": "^4.9.5",
+    "rollup-plugin-polyfill-node": "^0.12.0",
+    "stream-browserify": "^3.0.0",
+    "util": "^0.12.5",
     "uuid": "^9.0.0",
+    "vite": "^4.0.4",
+    "vite-plugin-checker": "^0.5.6",
+    "vite-plugin-svgr": "^2.4.0",
+    "vite-tsconfig-paths": "^4.0.3",
     "yup": "^1.0.1"
   },
   "scripts": {
-    "setup": "yarn cache clean && yarn install --force && yarn run floweditor",
-    "start": "HTTPS=true SSL_CRT_FILE=../glific/priv/cert/glific.test+1.pem SSL_KEY_FILE=../glific/priv/cert/glific.test+1-key.pem react-app-rewired start",
-    "build": "yarn setup && react-app-rewired build",
-    "test": "react-app-rewired test",
-    "test:coverage": "react-app-rewired test --coverage --watchAll",
+    "setup": "yarn install --force && yarn run floweditor",
+    "dev": "vite --host=glific.test",
+    "build": "yarn setup && yarn vite build",
+    "serve": "vite preview",
     "cy:run": "cypress run",
-    "eject": "react-scripts eject",
     "format": "prettier \"**/*.{ts,tsx,css,graphql}\" --write",
     "floweditor": "cp -r node_modules/@glific/flow-editor/build/static public && rm -rf public/sitestatic && cp -r node_modules/@glific/flow-editor/build/sitestatic public",
-    "extract-translations": "i18next"
+    "extract-translations": "i18next",
+    "test": "vitest watch",
+    "test:no-watch": "vitest run",
+    "test:coverage": "vitest run --coverage"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -113,36 +97,36 @@
       "last 1 safari version"
     ]
   },
-  "jest": {
-    "errorOnDeprecated": true,
-    "collectCoverageFrom": [
-      "src/**/*.{ts,tsx}",
-      "!src/react-app-env.d.ts",
-      "!src/types/**/*.{ts,tsx}"
-    ],
-    "coveragePathIgnorePatterns": [
-      "/common/",
-      "/config/",
-      "/context/",
-      "/services/",
-      "/index.tsx",
-      "/serviceWorker.ts"
-    ],
-    "coverageReporters": [
-      "text",
-      "html",
-      "lcov"
-    ],
-    "moduleNameMapper": {
-      "axios": "axios/dist/node/axios.cjs"
-    }
-  },
   "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/draft-js": "^0.11.10",
+    "@types/emoji-mart": "^3.0.9",
+    "@types/node": "^18.11.18",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.10",
+    "@types/react-google-recaptcha": "^2.1.5",
+    "@types/react-router": "^5.1.20",
+    "@types/react-router-dom": "^5.3.3",
     "@types/react-test-renderer": "^18.0.0",
+    "@types/uuid": "^9.0.0",
+    "@vitest/coverage-istanbul": "^0.28.5",
+    "@vitest/ui": "^0.28.5",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-prettier": "^8.6.0",
+    "eslint-plugin-import": "^2.27.4",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.32.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "i18next-parser": "^7.7.0",
+    "jsdom": "^21.1.0",
     "prettier": "^2.8.4",
     "react-test-renderer": "^18.2.0",
-    "stream-browserify": "^3.0.0",
+    "typescript": "^4.9.5",
+    "vite-plugin-eslint": "^1.8.1",
+    "vitest": "^0.28.5",
     "yarn-upgrade-all": "^0.7.2"
   }
 }