update to vite with successful build

contentful · Dec 9, 2024 · 970be1c · 970be1c
1 parent 2b29fd4
commit 970be1c
Show file tree

Hide file tree

Showing 8 changed files with 5,889 additions and 17,106 deletions.
diff --git a/apps/google-analytics-4/frontend/.env b/apps/google-analytics-4/frontend/.env
@@ -1,5 +1,5 @@
-REACT_APP_BACKEND_API_URL=https://google-analytics-4.ctfapps.net
-REACT_APP_BACKEND_API_URL_TEST=https://google-analytics-4-test.ctfapps.net
-REACT_APP_VERSION=$npm_package_version
-REACT_APP_SENTRY_DSN=https://b8f524eae7c446fb8071476431426640@o2239.ingest.sentry.io/4504725335834624
-REACT_APP_SEGMENT_WRITE_KEY=jGZHaYldsH12362MNsO2mT0BEvV2Hi6W
+VITE_BACKEND_API_URL=https://google-analytics-4.ctfapps.net
+VITE_BACKEND_API_URL_TEST=https://google-analytics-4-test.ctfapps.net
+VITE_VERSION=$npm_package_version
+VITE_SENTRY_DSN=https://b8f524eae7c446fb8071476431426640@o2239.ingest.sentry.io/4504725335834624
+VITE_SEGMENT_WRITE_KEY=jGZHaYldsH12362MNsO2mT0BEvV2Hi6W
diff --git a/apps/google-analytics-4/frontend/.env.development b/apps/google-analytics-4/frontend/.env.development
@@ -1,4 +1,4 @@
-REACT_APP_BACKEND_API_URL=http://localhost:8080/dev
-REACT_APP_VERSION=$npm_package_version
-REACT_APP_SENTRY_DSN=https://b8f524eae7c446fb8071476431426640@o2239.ingest.sentry.io/4504725335834624
-REACT_APP_SEGMENT_WRITE_KEY=BGIumuDUo6a53DN2ojoHqRjIQyQ7L4U0
+VITE_BACKEND_API_URL=http://localhost:8080/dev
+VITE_VERSION=$npm_package_version
+VITE_SENTRY_DSN=https://b8f524eae7c446fb8071476431426640@o2239.ingest.sentry.io/4504725335834624
+VITE_SEGMENT_WRITE_KEY=BGIumuDUo6a53DN2ojoHqRjIQyQ7L4U0
diff --git a/...le-analytics-4/frontend/public/index.html → apps/google-analytics-4/frontend/index.html b/...le-analytics-4/frontend/public/index.html → apps/google-analytics-4/frontend/index.html
@@ -7,6 +7,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>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

diff --git a/apps/google-analytics-4/frontend/package-lock.json b/apps/google-analytics-4/frontend/package-lock.json
diff --git a/apps/google-analytics-4/frontend/package.json b/apps/google-analytics-4/frontend/package.json
@@ -20,16 +20,15 @@
     "react": "17.0.2",
     "react-chartjs-2": "^5.2.0",
     "react-dom": "17.0.2",
-    "react-scripts": "5.0.1",
     "zod": "3.23.8"
   },
   "scripts": {
-    "start": "cross-env BROWSER=none react-scripts start",
-    "build": "REACT_APP_RELEASE=$(git rev-parse --short HEAD) react-scripts build",
-    "test": "react-scripts test",
-    "test:ci": "CI=true react-scripts test --runInBand",
+    "start": "cross-env BROWSER=none vite",
+    "build": "VITE_RELEASE=$(git rev-parse --short HEAD) vite build",
+    "test": "vitest --watch",
+    "test:ci": "vitest",
     "lint": "eslint --max-warnings=0 .",
-    "eject": "react-scripts eject",
+    "eject": "vite eject",
     "create-app-definition": "contentful-app-scripts create-app-definition",
     "deploy": "contentful-app-scripts upload --ci --bundle-dir ./build --organization-id ${DEFINITIONS_ORG_ID} --definition-id 5DlxOS0KvGS1Wk362xgvbN --token ${CONTENTFUL_CMA_TOKEN}",
     "deploy:test": "contentful-app-scripts upload --ci --bundle-dir ./build --organization-id ${DEV_TESTING_ORG_ID} --definition-id 42yub8HtSmIclUlVBHpHHP --token ${TEST_CMA_TOKEN}"
@@ -58,9 +57,12 @@
     "@types/node": "18.11.11",
     "@types/react": "18.0.9",
     "@types/react-dom": "18.0.3",
+    "@vitejs/plugin-react": "^4.3.4",
     "cross-env": "7.0.3",
     "msw": "0.49.3",
-    "typescript": "4.9.3"
+    "typescript": "4.9.3",
+    "vite": "^6.0.3",
+    "vitest": "^2.1.8"
   },
   "homepage": "."
 }
diff --git a/apps/google-analytics-4/frontend/src/config.ts b/apps/google-analytics-4/frontend/src/config.ts
@@ -13,15 +13,15 @@ function getEnvironmentVariable(
 }
 
 const backendApiUrl =
-  getEnvironmentVariable('REACT_APP_ENV', 'prod') === 'test'
-    ? getEnvironmentVariable('REACT_APP_BACKEND_API_URL_TEST')
-    : getEnvironmentVariable('REACT_APP_BACKEND_API_URL');
+  getEnvironmentVariable('VITE_ENV', 'prod') === 'test'
+    ? getEnvironmentVariable('VITE_BACKEND_API_URL_TEST')
+    : getEnvironmentVariable('VITE_BACKEND_API_URL');
 
 export const config = {
   backendApiUrl,
-  version: getEnvironmentVariable('REACT_APP_VERSION', 'no-version-set'),
-  release: getEnvironmentVariable('REACT_APP_RELEASE', 'no-release-hash-set'),
-  sentryDSN: getEnvironmentVariable('REACT_APP_SENTRY_DSN'),
-  segmentWriteKey: getEnvironmentVariable('REACT_APP_SEGMENT_WRITE_KEY'),
+  version: getEnvironmentVariable('VITE_VERSION', 'no-version-set'),
+  release: getEnvironmentVariable('VITE_RELEASE', 'no-release-hash-set'),
+  sentryDSN: getEnvironmentVariable('VITE_SENTRY_DSN'),
+  segmentWriteKey: getEnvironmentVariable('VITE_SEGMENT_WRITE_KEY'),
   environment: getEnvironmentVariable('NODE_ENV'),
 };
diff --git a/apps/google-analytics-4/frontend/tsconfig.json b/apps/google-analytics-4/frontend/tsconfig.json
@@ -1,10 +1,24 @@
 {
-  "extends": "@tsconfig/create-react-app/tsconfig.json",
   "compilerOptions": {
     "baseUrl": "src",
     "sourceMap": true,
     "inlineSources": true,
-    "sourceRoot": "/src"
+    "jsx": "react-jsx",
+    "sourceRoot": "/src",
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
   },
   "include": ["src", "test"],
   "exclude": ["node_modules"]

diff --git a/apps/google-analytics-4/frontend/vite.config.ts b/apps/google-analytics-4/frontend/vite.config.ts
@@ -0,0 +1,30 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig(() => ({
+  server: {
+    port: 3000,
+  },
+  base: '',
+  build: {
+    outDir: 'build',
+  },
+  plugins: [react()],
+  resolve: {
+    alias: {
+      apis: '/src/apis',
+      clients: '/src/clients',
+      components: '/src/components',
+      helpers: '/src/helpers',
+      hooks: '/src/hooks',
+      locations: '/src/locations',
+      providers: '/src/providers',
+      utils: '/src/utils',
+      config: '/src/config',
+    },
+  },
+
+  test: {
+    globals: true,
+  },
+}));