shinesolutions · psmithshine · Jul 1, 2024 · Jul 2, 2024 · Jul 2, 2024 · Jul 2, 2024
diff --git a/.gitignore b/.gitignore
@@ -1 +1,9 @@
-node_modules
+node_modules
+
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/.node-version b/.node-version
@@ -1 +1 @@
-14.18.1
+20.10.0
diff --git a/packages/client/codegen.yml b/packages/client/codegen.yml
@@ -0,0 +1,9 @@
+schema: ../server/src/schema.graphql
+generates:
+  ./src/shared/__generated__/:
+    preset: "client"
+    documents: ["src/**/*.{ts,tsx}"]
+    config:
+      strictScalars: true
+      scalars:
+        ID: string
diff --git a/packages/client/env/localhost-4000.json b/packages/client/env/localhost-4000.json
@@ -1,4 +1,4 @@
 {
-  "serverUri": "http://localhost:4000",
+  "serverUri": "http://localhost:2000",
   "integrationAuthToken": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c"
 }
diff --git a/packages/client/public/index.html → packages/client/index.html b/packages/client/public/index.html → packages/client/index.html
@@ -2,33 +2,25 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="./favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
       content="Web site created using create-react-app"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="apple-touch-icon" href="./logo192.png" />
     <!--
       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="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
+    <link rel="manifest" href="./manifest.json" />
     <title>React App</title>
   </head>
   <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/packages/client/package.json b/packages/client/package.json
@@ -2,33 +2,37 @@
   "name": "client",
   "version": "0.1.0",
   "private": true,
+  "type": "module",
+  "engines": {
+    "node": ">=20.0.0 <21.0.0",
+    "npm": "please-use-yarn",
+    "yarn": ">= 1.22.17"
+  },
   "dependencies": {
-    "@apollo/client": "^3.4.16",
+    "@apollo/client": "^3.8.8",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.0.4",
     "@testing-library/user-event": "^7.1.2",
     "@types/jest": "^24.0.0",
     "@types/lodash": "^4.14.162",
     "@types/node": "^12.0.0",
-    "@types/react": "^17.0.33",
+    "@types/react": "^18.2.19",
     "@types/react-dom": "^17.0.10",
-    "apollo": "^2.33.7",
-    "graphql": "^15.3.0",
+    "graphql": "16.6.0",
     "jest-environment-jsdom-sixteen": "^1.0.3",
     "json-typescript": "^1.1.2",
     "lodash": "^4.17.20",
     "msw": "^0.21.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-scripts": "4.0.3",
     "shared": "*",
     "typescript": "^4.4.4"
   },
   "scripts": {
     "start": "./scripts/start.sh",
     "build": "./scripts/build.sh",
     "test": "./scripts/test.sh",
-    "codegen": "./scripts/codegen.sh"
+    "codegen": "graphql-codegen --config codegen.yml"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -45,5 +49,18 @@
       "last 1 safari version"
     ]
   },
-  "devDependencies": {}
+  "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@graphql-codegen/cli": "^5.0.0",
+    "@graphql-codegen/client-preset": "4.3.2",
+    "@graphql-codegen/typescript": "^4.0.1",
+    "@vitejs/plugin-react": "^4.2.1",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "graphql-constraint-directive": "^5.1.1",
+    "ts-jest": "^29.0.5",
+    "vite": "^5.0.10",
+    "vite-plugin-node-polyfills": "^0.17.0",
+    "vite-plugin-svgr": "^4.2.0",
+    "vite-tsconfig-paths": "^4.2.2"
+  }
 }
diff --git a/packages/client/scripts/build.sh b/packages/client/scripts/build.sh
@@ -1,3 +1,3 @@
 set -o errexit
 yarn codegen
-react-scripts build
+vite build
diff --git a/packages/client/scripts/start.sh b/packages/client/scripts/start.sh
@@ -1,3 +1,4 @@
 set -o errexit
+yarn install
 yarn codegen
-react-scripts start
+vite
diff --git a/packages/client/src/App.tsx b/packages/client/src/App.tsx
@@ -1,18 +1,17 @@
 import "./App.css";
 import { gql, useQuery } from "@apollo/client";
-import { AppQuery, AppQueryVariables } from "./__generated__/AppQuery";
-import { Language } from "./__generated__/globalTypes";
+import { Language } from "./shared/__generated__/graphql";
 
 function App() {
-  const { data, loading, error } = useQuery<AppQuery, AppQueryVariables>(
-    gql`
+  const { data, loading, error } = useQuery(
+    gql(`
       query AppQuery($language: Language!) {
         personalizedGreeting(language: $language)
       }
-    `,
+    `),
     {
       variables: {
-        language: Language.ENGLISH,
+        language: Language.English,
       },
     }
   );

diff --git a/packages/client/src/react-app-env.d.ts b/packages/client/src/react-app-env.d.ts
diff --git a/packages/client/src/vite-env.d.ts b/packages/client/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/packages/client/tsconfig.json b/packages/client/tsconfig.json
@@ -4,24 +4,25 @@
     "src"
   ],
   "compilerOptions": {
-    "target": "es5",
+    "target": "ESNext",
     "lib": [
       "dom",
       "dom.iterable",
       "esnext"
     ],
+    "types": ["vite/client", "vite-plugin-svgr/client"],
+    "allowJs": false,
     "skipLibCheck": true,
-    "allowSyntheticDefaultImports": true,
-    "module": "esnext",
-    "noEmit": true,
-    "jsx": "react-jsx",
-    "allowJs": true,
     "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
     "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "strict": true,
-    "noFallthroughCasesInSwitch": true
+    "noEmit": true,
+    "noFallthroughCasesInSwitch": true,
+    "jsx": "react-jsx",
   }
 }
diff --git a/packages/client/vite.config.ts b/packages/client/vite.config.ts
@@ -0,0 +1,28 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react-swc";
+import viteTsconfigPaths from "vite-tsconfig-paths";
+import svgr from "vite-plugin-svgr";
+import { nodePolyfills } from "vite-plugin-node-polyfills";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  base: "/",
+  plugins: [
+    react(),
+    viteTsconfigPaths(),
+    svgr({
+      include: "**/*.svg?react",
+    }),
+    nodePolyfills({
+      globals: {
+        process: "build",
+      },
+    }),
+  ],
+  build: {
+    outDir: "./build",
+  },
+  server: {
+    port: 3000,
+  },
+});
diff --git a/packages/integration/package.json b/packages/integration/package.json
@@ -17,11 +17,14 @@
     "serve-handler": "^6.1.3",
     "server": "*",
     "stubby": "^5.0.0",
-    "ts-node": "^9.0.0",
-    "typescript": "^4.0.3"
+    "tsx": "^4.6.2",
+    "typescript": "4.9.5"
   },
   "scripts": {
-    "start": "ts-node ./scripts/start",
+    "start": "tsx ./scripts/start",
     "startStubby": "stubby --data ./src/stubbyData.yml"
+  },
+  "devDependencies": {
+    "ts-node": "^10.9.2"
   }
 }
diff --git a/packages/integration/scripts/start.ts b/packages/integration/scripts/start.ts
@@ -12,14 +12,15 @@ import {
 } from "../src";
 
 (async function () {
-  const stubbyServer = await startStubby({
-    targetPort: ephemeralPort,
-  });
+  // const stubbyServer = await startStubby({
+  //   targetPort: ephemeralPort,
+  // });
+  const ep = {hostname: "127.0.0.1", port: 0}; //hardcoded, as the above doesnt work
 
   const graphQlServerEndpoint = (
     await startGraphQlServer({
       targetPort: ephemeralPort,
-      stubbyEndpoint: stubbyServer.endpoint,
+      stubbyEndpoint: ep,
     })
   ).endpoint;
 

diff --git a/packages/integration/src/startGraphQlServer.ts b/packages/integration/src/startGraphQlServer.ts
@@ -1,8 +1,9 @@
-import { startApolloServer } from "../../server";
+import { startLocalApolloServer } from "../../server";
 import { TargetPort } from "./TargetPort";
 import { RunningServer } from "./RunningServer";
-import { getRunningServer } from "./getRunningServer";
 import { Endpoint } from "./Endpoint";
+import { getRunningServer } from "./getRunningServer";
+// import { getRunningServer } from "./getRunningServer";
 
 /**
  * Starts an instance of the GraphQL server that can be used for integration
@@ -18,23 +19,26 @@ export async function startGraphQlServer({
   const name = "GraphQL Server";
   console.log(`${name}: Starting...`);
 
-  const { server } = await startApolloServer(
+  const server = await startLocalApolloServer(
     {
       messageServerUrl: `http://${stubbyEndpoint.hostname}:${stubbyEndpoint.port}`,
     },
     { host: "127.0.0.1", port: targetPort }
   );
 
-  const runningServer = getRunningServer(server);
-  const { stop, endpoint } = runningServer;
+  // const runningServer = getRunningServer(server);
+  const { url: endpoint } = server;
 
   // Shut down the server if somebody kills the process
-  process.on("SIGINT", async () => {
-    await stop();
-    console.log(`${name}: Stopped`);
-  });
+  // process.on("SIGINT", async () => {
+  //   await stop();
+  //   console.log(`${name}: Stopped`);
+  // });
 
-  console.log(`${name}: Ready at ${endpoint.hostname}:${endpoint.port}`);
+  console.log(`${name}: Ready at ${endpoint}`);
 
-  return runningServer;
+  return {
+    endpoint: { hostname: stubbyEndpoint.hostname, port: stubbyEndpoint.port },
+    stop: async () => console.log("non-working function!"),
+  };
 }
diff --git a/packages/integration/src/startStubby.ts b/packages/integration/src/startStubby.ts
@@ -13,7 +13,7 @@ import { getEndpoint } from "./getEndpoint";
  */
 
 export async function startStubby({
-  targetPort,
+  targetPort, // 0
 }: {
   targetPort: TargetPort;
 }): Promise<RunningServer> {
@@ -37,12 +37,11 @@ export async function startStubby({
           fs.readFileSync(path.join(__dirname, "stubbyData.yml"), "utf8")
         ) as StubbyData,
       },
-      (err) => (err ? reject(err) : resolve())
+      (err) => (err ? reject(`${err}`) : resolve("nay error"))
     )
   );
 
-  const stop = promisify(stubby.stop).bind(stubby);
-
+  const stop = promisify(stubby.stop).bind(stubby);  
   process.on("SIGINT", async () => {
     await stop();
 

diff --git a/packages/integration/tsconfig.json b/packages/integration/tsconfig.json
@@ -6,13 +6,16 @@
     // tests if we transpile to es5. Because we're running Node 6+, it's safe
     // to target es2016. For more info, see
     // https://github.com/apollographql/apollo-server/issues/1388.
-    "target": "es2016",
+    "target": "ESNext",
+    "esModuleInterop": true,
 
-    "module": "commonjs",
+    "module": "CommonJS",
+    "moduleResolution": "node",
 
     // Typescript is only used for type-checking in the integration
     // environment, not code generation. Jest executes the code at runtime.
-    "noEmit": true
+    "noEmit": true,
+    "noUnusedLocals": false
   },
 
   "include": ["src"]