Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Upgrade tgrs #30

Open
wants to merge 30 commits into
base: master
Choose a base branch
from
Open

Upgrade tgrs #30

wants to merge 30 commits into from

Conversation

psmithshine
Copy link
Collaborator

@psmithshine psmithshine commented Jul 4, 2024

Upgrade client, server, shared, and integration packages and support and run Node v20. Local development and build is faster 🚀 and the overall app's runtime (Node) is no longer deprecated!! 🔒

Changelog

Server - Node v20 🔥

Upgrade Apollo + GraphQL packages to their latest versions to be compatible with Node v20. Other packages such as concurrently and tsx are there to support running the server locally in Node v20 context. Significant re-writes for the server were necessary as the API for Apollo has changed over the major version bumps and changes. The Datasources was re-written to better complement the setup for the Server. The tsconfig updates allows for the Server to read the new module syntax which shared package compiles, and brings it into the more modern Typescript era.

Client - Lets get Vite ⚡️

Now using ViteJS build tool as a replacement of react-scripts for compiling and running the app locally, as well as building it for production. The react team doesn't even recommend using their own react-scripts tool anymore, and the community much prefer Vite over react-scripts - so it was time! You will find that Vite is significantly quicker to run localhost and to build the app.

index.html uses the new Vite-friendly syntax, like ridding the %PUBLIC_URL% stuff for project-relative paths
adding a vite.config.ts, for a basic Vite build configuration to work with our React app
package.json had the following updates:

  • type: module for Vite to function
  • tsconfig.json had some of the most important changes, to deal with Node v20 updates + Vite.
  • a big part of these changes were supporting Vite's HMR (Hot Module Reloading) features, which require "ESNext" Module code (some latest ECMAScript standard, but not pegged to a specific version like ES2019, ES2020)
  • we also employ the same codegen CLI that the server uses, for consistency
  • another part of these changes + effort had to do with being able to deal with the Shared/ folder's Typescript compiled code -> requiring shared's tsconfig to also have updated compilerOptions -> specifically having module and target be ES6.

Integration 🔀 - A bit incomplete!

The integration package was difficult to get working, and for now "works".. It has been crippled as I could not work out how to get tests working with the Stubby function and relied on some hardcoding. Insight from @bent would be greatly appreciated!

- update tsconfig target and packages in shared
- update packages in server
- upgrade server packages necessary to support Node v20, and remove some deprecated packages
- adopt new Apollo Server API from Apollo v4.9 (jumped two major versions), for much of the setup of the local standalone server
- use latest tsconfig for Node v20
- use more sensical Datasources sertup (to also complement newer Apollo API)
👍 Node v20 Upgrades 👍
- update package versions to support latest node
- use same GraphQL codegen tooling as Server for consistent code generation across BE/FE, + with codegen.yaml file
⚡️ Vite Upgrades ⚡️
- new Vite build + dev server tool - the speed!! 🚀
- supporting Vite packages, vite config, index.html setup, index.html placement, tsconfig setup, start and build scripts updates
- remove react-scripts and any react scripts setup 🤮
… the correct server EP, so we're getting error on requesting from server
@psmithshine psmithshine marked this pull request as ready for review July 5, 2024 00:24
@bent
Copy link
Collaborator

bent commented Jul 8, 2024

I have pushed some commits to this branch to get the integration environment and tests running properly again, and get the auth directive in-place again. Note that I have removed the client and server tests because they weren't passing with your changes, and they're not really something I use on client sites anyway (I mostly rely on integration tests).

packages/client/env/localhost-4000.json Outdated Show resolved Hide resolved
packages/client/package.json Show resolved Hide resolved
packages/client/codegen.yml Outdated Show resolved Hide resolved
packages/client/src/App.tsx Show resolved Hide resolved
packages/integration/package.json Outdated Show resolved Hide resolved
- use the generated `graphql` function, rather than `gql`, so we get free typings from codegend code without needing to explicitly specify them
…n import paths accordingly

- remove codegen script
…ns/aws-lambda package`

- also remove associated comment from index.ts module
packages/integration/package.json Show resolved Hide resolved
packages/client/env/localhost-4000.json Outdated Show resolved Hide resolved
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants