Upgrade to Node V20 and use Vite on the Client #29
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- 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)
…n cli package version
👍 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 🤮
…an yarn - update node for nodenv tool
… the correct server EP, so we're getting error on requesting from server
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Upgrade
client,server,shared, andintegration(sorta) packages and support and run Node v20. Local development and build is faster 🚀 and the overall app's runtime (Node) is more secure - no longer deprecated!! 🔒The following changelog documents major things done to these packages to make the entire app run in Node v20 context.
Changelog
Frontend - 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 nerd 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 for production in the pipeline.
Changes:
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:
-- script for deploy, so that we can very quickly test just our frontend changes in the deployed Dev environment - takes less than 20seconds to see them live.
-- type: module required for Vite to function corectly.
-- jsonwebtoken wasnt working with Node v20, so jose was employed instead
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)
-- 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.
Backend - Node v20 🔥
Many of Server's packages broke when updating to Node v20 runtime, so bulk of these changes had to do with updating the packages to their latest versions. Most importantly were upgrading Apollo + GraphQL-supporting packages to their latest versions, which is absolutely great considering we want the server to be as updated + secure as possible. Other packages such as concurrently and tsx are there to support running the server locally in the Node v20 context. Finally, the tsconfig update essentially allows for the Server to read the new module syntax which shared/ directory compiles.