Merge pull request #30 from shinesolutions/upgrade-tgrs

Upgrade tgrs

Author: bent

.github/workflows/build.yml

@@ -8,27 +8,26 @@ on:
 
 jobs:
   build:
-    runs-on: ubuntu-18.04
+    runs-on: ubuntu-22.04
 
     steps:
       - uses: actions/checkout@v2
       # Install the Node version specified in the project `.node-version` file
-      - uses: nodenv/actions/node-version@v2.0.9
+      - uses: nodenv/actions/node-version@v3
         id: nodenv
-      - uses: actions/setup-node@v1
+      - uses: actions/setup-node@v4
         with:
           node-version: "${{ steps.nodenv.outputs.node-version }}"
-      # Yarn will also have been installed by actions/setup-node@v1
+      # # Yarn will also have been installed by actions/setup-node@v1
       - run: yarn install --immutable
       - run: yarn checkFormatting
       - run: yarn workspace shared build
       - run: yarn workspace server build
       - run: yarn workspace client build
-      - run: yarn workspace server test
-      - run: yarn workspace client test
-      # Fix version so that it doesn't advance over time unless we want it to
-      - uses: cypress-io/github-action@v2.11.7
+      # # Fix version so that it doesn't advance over time unless we want it to
+      - uses: cypress-io/github-action@v6
         with:
+          install: false
           start: yarn workspace integration start
           wait-on: "http://localhost:5000"
           command: yarn workspace tests start

.gitignore

@@ -1 +1,9 @@
-node_modules
+node_modules
+
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

.node-version

@@ -1 +1 @@
-14.18.1
+24.12.0

README.md

@@ -7,11 +7,11 @@ TGRS stands for [TypeScript](https://www.typescriptlang.org/),
 [serverless](https://en.wikipedia.org/wiki/Serverless_computing). This is a
 sample project that demonstrates the key technologies in this stack.
 
-> Note that this stack does not support server-side rendering (SSR) out-of-the-box. 
-> For SSR to work, you'd need to introduce an additional server layer, which would 
+> Note that this stack does not support server-side rendering (SSR) out-of-the-box.
+> For SSR to work, you'd need to introduce an additional server layer, which would
 > also add extra complexity to your project. If your SEO or performance
-> needs necessitate that you use SSR, I recommend you look at a framework like 
-> [Remix](https://remix.run) or [Next.js](https://nextjs.org). Using these 
+> needs necessitate that you use SSR, I recommend you look at a framework like
+> [Remix](https://remix.run) or [Next.js](https://nextjs.org). Using these
 > frameworks may also eliminate the need for you to use GraphQL at all.
 
 For a general overview of the stack and the decisions behind it, see
@@ -33,33 +33,42 @@ or check out [this presentation video](https://www.youtube.com/watch?v=-Idub5K7K
 
 ## Quick Start
 
-1.  Start the integration environment stub REST server:
+1.  The server will use the following port mapping to reach the mock integration server:
 
-        yarn workspace integration startStubby
+        {
+          "messageServerUrl": "http://localhost:8882"
+        }
+
+    In Step 2 the integration environment will read this file and use specified port (configured `8882`) for the mock server.
+
+2.  Start the integration environment mock REST server:
+
+        yarn workspace integration start
+
+3.  Set up a server environment file that configures the server to talk to the integration environment's mock REST server.
 
-2.  Set up a server environment file that configures the server to talk to the
-    integration environment's stub REST server:
+    Note: If you found that Step 2 produces an error, update `env.integration.json` to the port that was logged above, before running:
 
         ln -sf ./env.integration.json packages/server/env.json
 
-3.  Build the code that is shared by both the client and server:
+4.  Build the code that is shared by both the client and server:
 
         yarn workspace shared build
 
-4.  Start the GraphQl server inside an Express instance:
+5.  Start the GraphQl server inside an Express instance:
 
         yarn workspace server start
 
-5.  Set up a client environment file that configures the client to talk to the
+6.  Set up a client environment file that configures the client to talk to the
     GraphQL Express server:
 
         ln -sf ../env/localhost-4000.json packages/client/public/env.json
 
-6.  Start the client:
+7.  Start the client:
 
         yarn workspace client start
 
-7.  Go to http://localhost:3000
+8.  Go to http://localhost:3000
 
 ## Starting the GraphQL Server in a local Lambda
 
@@ -139,7 +148,7 @@ Note that the integration tests use a client production build,
     Note that if you've had to re-run steps 1, 2 or 3, you'll need to re-run
     this.
 
-5.  Run the tests:
+5.  Lastly, in another terminal, Run:
 
         yarn workspace tests start
 

package.json

@@ -2,6 +2,11 @@
   "name": "tgrs",
   "version": "0.0.0",
   "private": true,
+  "engines": {
+    "node": ">=24.0.0 <25.0.0",
+    "npm": "please-use-yarn",
+    "yarn": ">= 1.22.17"
+  },
   "workspaces": {
     "packages": [
       "packages/*"

packages/client/codegen.yml

@@ -0,0 +1,9 @@
+schema: ../server/src/schema.graphql
+generates:
+  ./src/__generated__/:
+    preset: "client"
+    documents: ["src/**/*.{ts,tsx}"]
+    config:
+      strictScalars: true
+      scalars:
+        ID: string

packages/client/public/index.html packages/client/index.htmlpackages/client/public/index.html renamed to 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.

packages/client/package.json

@@ -2,33 +2,34 @@
   "name": "client",
   "version": "0.1.0",
   "private": true,
+  "type": "module",
+  "engines": {
+    "node": ">=24.0.0 <25.0.0",
+    "npm": "please-use-yarn",
+    "yarn": ">= 1.22.17"
+  },
   "dependencies": {
-    "@apollo/client": "^3.4.16",
-    "@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",
+    "@apollo/client": "^4.0.11",
     "@types/lodash": "^4.14.162",
-    "@types/node": "^12.0.0",
-    "@types/react": "^17.0.33",
-    "@types/react-dom": "^17.0.10",
-    "apollo": "^2.33.7",
-    "graphql": "^15.3.0",
-    "jest-environment-jsdom-sixteen": "^1.0.3",
+    "@types/node": "^20.17.10",
+    "@types/react": "^18.2.19",
+    "@types/react-dom": "^18.2.19",
+    "graphql": "16.6.0",
     "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",
+    "msw": "^2.12.7",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "shared": "*",
-    "typescript": "^4.4.4"
+    "typescript": "^5.9.3"
   },
   "scripts": {
     "start": "./scripts/start.sh",
     "build": "./scripts/build.sh",
-    "test": "./scripts/test.sh",
-    "codegen": "./scripts/codegen.sh"
+    "codegen": "graphql-codegen --config codegen.yml",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:ui": "vitest --ui"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -45,5 +46,24 @@
       "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",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/user-event": "^14.5.2",
+    "@vitejs/plugin-react": "^4.2.1",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "@vitest/ui": "^2.1.8",
+    "graphql-constraint-directive": "^5.1.1",
+    "jsdom": "^25.0.1",
+    "vite": "^5.0.10",
+    "vite-plugin-node-polyfills": "^0.17.0",
+    "vite-plugin-svgr": "^4.2.0",
+    "vite-tsconfig-paths": "^6.0.3",
+    "vitest": "^4.0.16"
+  }
 }

packages/client/scripts/build.sh

@@ -1,3 +1,3 @@
 set -o errexit
 yarn codegen
-react-scripts build
+vite build