Merge pull request #100 from Tauffer-Consulting/feature/use-vite-reac…

…t-typescript refactor: use vite on frontend
Tauffer-Consulting · Oct 10, 2023 · 61383a0 · 61383a0
2 parents 6de60aa + 9865688
commit 61383a0
Show file tree

Hide file tree

Showing 15 changed files with 1,294 additions and 7,518 deletions.
diff --git a/docker-compose-dev.yaml b/docker-compose-dev.yaml
@@ -361,7 +361,7 @@ services:
     container_name: domino-frontend
     command: yarn start:local
     environment:
-      - REACT_APP_DOMINO_DEPLOY_MODE=local-compose
+      - VITE_DOMINO_DEPLOY_MODE=local-compose
     ports:
       - 3000:3000
     volumes:

diff --git a/frontend/Dockerfile b/frontend/Dockerfile
@@ -1,10 +1,10 @@
 # Refs:
 # https://dev.to/otomato_io/how-to-optimize-production-docker-images-running-nodejs-with-yarn-504b
 # https://snyk.io/blog/10-best-practices-to-containerize-nodejs-web-applications-with-docker/
-FROM node:19.2-bullseye-slim
+FROM node:18-slim
 
-ENV REACT_APP_API_ENV=local
-ENV REACT_APP_DOMINO_DEPLOY_MODE=local-compose
+ENV VITE_API_ENV=local
+ENV VITE_DOMINO_DEPLOY_MODE=local-compose
 
 # ENV PATH /app/node_modules/.bin:$PATH
 WORKDIR /usr/src/app

diff --git a/frontend/Dockerfile.dev.k8s b/frontend/Dockerfile.dev.k8s
@@ -1,6 +1,6 @@
-FROM node:19.2-bullseye-slim
+FROM node:18-slim
 
-ENV REACT_APP_API_ENV=dev
+ENV VITE_API_ENV=dev
 
 WORKDIR /usr/src/app
 COPY --chown=node:node . /usr/src/app

diff --git a/frontend/Dockerfile.prod b/frontend/Dockerfile.prod
@@ -1,4 +1,4 @@
-FROM node:19.9.0 as build
+FROM node:18-slim as build
 
 # Set the working directory
 WORKDIR /app
@@ -28,4 +28,4 @@ COPY nginx.conf /etc/nginx/conf.d/default.conf
 EXPOSE 80
 
 # Run nginx in the foreground
-CMD ["nginx", "-g", "daemon off;"]
+CMD ["nginx", "-g", "daemon off;"]
diff --git a/frontend/Dockerfile.prod.compose b/frontend/Dockerfile.prod.compose
@@ -1,13 +1,13 @@
-FROM node:19.9.0 as build
+FROM node:18-slim as build
 
 # Set the working directory
 WORKDIR /app
 
 # Copy the package.json and yarn.lock files
 COPY package.json yarn.lock ./
 
-ENV REACT_APP_API_ENV=local
-ENV REACT_APP_DOMINO_DEPLOY_MODE=local-compose
+ENV VITE_API_ENV=local
+ENV VITE_DOMINO_DEPLOY_MODE=local-compose
 
 # Install dependencies
 RUN yarn install
@@ -31,4 +31,4 @@ COPY nginx.conf /etc/nginx/conf.d/default.conf
 EXPOSE 80
 
 # Run nginx in the foreground
-CMD ["nginx", "-g", "daemon off;"]
+CMD ["nginx", "-g", "daemon off;"]
diff --git a/frontend/public/index.html → frontend/index.html b/frontend/public/index.html → frontend/index.html
@@ -4,7 +4,6 @@
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <meta name="description" content="Web site created using create-react-app" />
 
   <script src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" data-auto-a11y="true"></script>
 
@@ -20,6 +19,7 @@
 <body>
   <noscript>You need to enable JavaScript to run this app.</noscript>
   <div id="root"></div>
+  <script type="module" src="/src/index.tsx"></script>
 </body>
 
-</html>
+</html>
diff --git a/frontend/package.json b/frontend/package.json
@@ -26,6 +26,7 @@
     "@types/react-dom": "^18.0.9",
     "@types/uuid": "^9.0.0",
     "@uiw/react-textarea-code-editor": "^2.1.1",
+    "@vitejs/plugin-react": "^4.1.0",
     "ag-grid-community": "^28.2.1",
     "ag-grid-react": "^28.2.1",
     "axios": "^1.2.1",
@@ -43,24 +44,24 @@
     "react-hook-form": "^7.45.1",
     "react-markdown": "^8.0.7",
     "react-router-dom": "^6.6.0",
-    "react-scripts": "^5.0.1",
     "react-toastify": "^9.1.1",
     "reactflow": "^11.4.0",
     "swr": "^2.0.0",
     "typescript": "*",
     "uuid": "^9.0.0",
+    "vite": "^4.4.11",
+    "vite-plugin-svgr": "^2.2.1",
+    "vite-tsconfig-paths": "^3.5.0",
     "web-worker": "^1.2.0",
     "yup": "^1.2.0"
   },
   "scripts": {
-    "start": "cross-env REACT_APP_API_ENV=dev DISABLE_ESLINT_PLUGIN=true react-scripts start",
-    "start:local": "cross-env NODE_OPTIONS=--openssl-legacy-provider REACT_APP_API_ENV=local react-scripts start",
-    "start:mock": "cross-env NODE_OPTIONS=--openssl-legacy-provider REACT_APP_API_ENV=local REACT_APP_USE_MOCK=true react-scripts start",
-    "build": "cross-env react-scripts build",
+    "start": "cross-env VITE_API_ENV=dev DISABLE_ESLINT_PLUGIN=true vite",
+    "start:local": "cross-env NODE_OPTIONS=--openssl-legacy-provider VITE_API_ENV=local vite",
+    "start:mock": "cross-env NODE_OPTIONS=--openssl-legacy-provider VITE_API_ENV=local VITE_USE_MOCK=true vite",
+    "build": "cross-env tsc && vite build",
     "lint": "eslint . --ext js,jsx,ts,tsx",
-    "lint:fix": "eslint . --ext js,jsx,ts,tsx --fix",
-    "test": "cross-env NODE_OPTIONS=--openssl-legacy-provider react-scripts test",
-    "eject": "cross-env NODE_OPTIONS=--openssl-legacy-provider react-scripts eject"
+    "lint:fix": "eslint . --ext js,jsx,ts,tsx --fix"
   },
   "eslintConfig": {
     "extends": [

diff --git a/frontend/src/config/environment.config.ts b/frontend/src/config/environment.config.ts
@@ -14,7 +14,7 @@ export interface IEnvironment {
  * Stores all environment variables for easier access
  */
 export const environment: IEnvironment = {
-  NODE_ENV: process.env.NODE_ENV as INodeEnv,
-  API_ENV: process.env.REACT_APP_API_ENV as IApiEnv,
-  USE_MOCK: !!process.env.REACT_APP_USE_MOCK,
+  NODE_ENV: import.meta.env.NODE_ENV as INodeEnv,
+  API_ENV: import.meta.env.VITE_API_ENV as IApiEnv,
+  USE_MOCK: !!import.meta.env.VITE_USE_MOCK,
 };
diff --git a/frontend/src/features/workflowEditor/components/SidebarSettingsForm/index.tsx b/frontend/src/features/workflowEditor/components/SidebarSettingsForm/index.tsx
@@ -40,7 +40,7 @@ const defaultSettingsData: IWorkflowSettings = {
 };
 
 const storageSourceOptions =
-  process.env.REACT_APP_DOMINO_DEPLOY_MODE === "local-compose"
+  import.meta.env.VITE_DOMINO_DEPLOY_MODE === "local-compose"
     ? [
         {
           label: "None",

diff --git a/frontend/src/react-app-env.d.ts b/frontend/src/react-app-env.d.ts
diff --git a/frontend/src/vite-env.d.ts b/frontend/src/vite-env.d.ts
@@ -0,0 +1,2 @@
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference types="vite/client" />
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
@@ -6,6 +6,7 @@
       "dom.iterable",
       "esnext"
     ],
+    "types": ["vite/client", "vite-plugin-svgr/client"],
     "baseUrl": "src",
     "allowJs": true,
     "skipLibCheck": true,

diff --git a/frontend/vite.config.js b/frontend/vite.config.js
@@ -0,0 +1,16 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import viteTsconfigPaths from "vite-tsconfig-paths";
+import svgrPlugin from "vite-plugin-svgr";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  server: {
+    host: '0.0.0.0',
+    port: 3000,
+  },
+  plugins: [react(), viteTsconfigPaths(), svgrPlugin()],
+  build: {
+    outDir: "build",
+  }
+});
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		// eslint-disable-next-line @typescript-eslint/triple-slash-reference
		/// <reference types="vite/client" />