refactor: migrate create-react-app to vite

pactflow · Oct 10, 2024 · 10aa667 · 10aa667
1 parent 279c21d
commit 10aa667
Show file tree

Hide file tree

Showing 16 changed files with 11,890 additions and 29,942 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,6 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    ["@babel/preset-react", { "runtime": "automatic" }]
+  ]
+}
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -8,7 +8,7 @@ env:
   PACT_BROKER_BASE_URL: ${{ secrets.PACT_BROKER_BASE_URL }}
   PACT_PROVIDER: pactflow-example-provider
   PACT_BROKER_TOKEN: ${{ secrets.PACTFLOW_TOKEN_FOR_CI_CD_WORKSHOP }}
-  REACT_APP_API_BASE_URL: http://localhost:3001
+  VITE_APP_API_BASE_URL: http://localhost:3001
   GIT_COMMIT: ${{ github.sha }}
   GIT_REF: ${{ github.ref }}
 

diff --git a/Makefile b/Makefile
@@ -40,7 +40,7 @@ ci: test publish_pacts can_i_deploy $(DEPLOY_TARGET)
 # Use this for quick feedback when playing around with your workflows.
 fake_ci: .env
 	@CI=true \
-	REACT_APP_API_BASE_URL=http://localhost:8080 \
+	VITE_APP_API_BASE_URL=http://localhost:8080 \
 	make ci
 
 publish_pacts: .env

diff --git a/README.md b/README.md
@@ -33,7 +33,7 @@ Open a separate terminal for the consumer.
 Before starting the consumer, create a `.env` file in the root of the project and set the URL to point to your running provider:
 
 ```bash
-REACT_APP_API_BASE_URL=http://localhost:8080
+VITE_APP_API_BASE_URL=http://localhost:8080
 ```
 
 Then run:

diff --git a/public/index.html → index.html b/public/index.html → index.html
@@ -23,5 +23,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.jsx"></script>
 </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,21 +3,22 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "axios": "^0.27.2",
+    "@vitejs/plugin-react": "^4.3.2",
+    "axios": "^1.7.7",
     "prop-types": "15.8.1",
-    "react": "^18.2.0",
-    "react-dom": "18.2.0",
-    "react-router": "^6.4.2",
-    "react-router-dom": "^6.4.2",
-    "react-scripts": "5.0.1",
-    "spectre.css": "^0.5.9"
+    "react": "^18.3.1",
+    "react-dom": "18.3.1",
+    "react-router": "^6.26.2",
+    "react-router-dom": "^6.26.2",
+    "spectre.css": "^0.5.9",
+    "vite": "^5.4.8"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "cross-env CI=true react-scripts test",
-    "eject": "react-scripts eject",
-    "test:pact": "cross-env CI=true react-scripts test --testTimeout 30000 pact.spec.js"
+    "start": "vite",
+    "build": "vite build",
+    "test": "jest",
+    "preview": "vite preview",
+    "test:pact": "cross-env CI=true vite test --testTimeout 30000 pact.spec.js"
   },
   "eslintConfig": {
     "extends": [
@@ -38,12 +39,14 @@
     ]
   },
   "devDependencies": {
-    "@babel/preset-react": "^7.18.6",
-    "@pact-foundation/pact": "^10.1.4",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
+    "@babel/preset-env": "^7.25.8",
+    "@babel/preset-react": "^7.25.7",
+    "@pact-foundation/pact": "^13.1.4",
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.5.2",
     "cross-env": "^7.0.3",
-    "dotenv": "^16.0.3"
+    "dotenv": "^16.4.5",
+    "jest": "^29.7.0"
   }
 }
diff --git a/src/App.js → src/App.jsx b/src/App.js → src/App.jsx
diff --git a/src/ErrorBoundary.js → src/ErrorBoundary.jsx b/src/ErrorBoundary.js → src/ErrorBoundary.jsx
diff --git a/src/Heading.js → src/Heading.jsx b/src/Heading.js → src/Heading.jsx
diff --git a/src/Layout.js → src/Layout.jsx b/src/Layout.js → src/Layout.jsx
diff --git a/src/ProductPage.js → src/ProductPage.jsx b/src/ProductPage.js → src/ProductPage.jsx
diff --git a/src/api.js → src/api.jsx b/src/api.js → src/api.jsx
@@ -1,13 +1,10 @@
-const axios = require('axios').default;
-const adapter = require('axios/lib/adapters/http');
+import axios from 'axios';
 import { Product } from './product';
 
-axios.defaults.adapter = adapter;
-
 export class API {
   constructor(url) {
     if (url === undefined || url === '') {
-      url = process.env.REACT_APP_API_BASE_URL;
+      url = process.env.VITE_APP_API_BASE_URL;
     }
     if (url.endsWith('/')) {
       url = url.substr(0, url.length - 1);
@@ -48,5 +45,5 @@ export class API {
 }
 
 export default new API(
-  process.env.REACT_APP_API_BASE_URL || 'http://localhost:3001'
+  process.env.VITE_APP_API_BASE_URL || 'http://localhost:3001'
 );
diff --git a/src/index.js → src/index.jsx b/src/index.js → src/index.jsx
diff --git a/src/product.js → src/product.jsx b/src/product.js → src/product.jsx
diff --git a/vite.config.js b/vite.config.js
@@ -0,0 +1,16 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig(() => {
+  return {
+    build: {
+      outDir: 'build',
+      commonjsOptions: { transformMixedEsModules: true }
+    },
+    plugins: [react()],
+    define: {
+        'process.env': process.env
+      }
+  };
+});
+