Changelog - ehuang47/playground GitHub Wiki

2024 October

  • Created github repo online, completely empty. Followed instructions for creating access token to push local repo to remote
  • Before setting up nx workspace, update node to after 17.0 so react preset doesn't throw errors involving structuredClone support
    • Options: nvm, brew update, or sudo npm i -g n followed by sudo n latest
  • Globally install nx: npm i -g nx
    • Locally created matching repo name via npx create-nx-workspace@latest projectName --preset=react-monorepo, optioanl --dry-run
    • Rename apps as needed. Deleted preset and generated new apps with nx g @nx/react:app apps/client/appName, including react router
  • Install express with npm i @nx/express --legacy-peer-deps and created express app nx g @nx/express:application apps/server/projectName
    • Rearranged folders: nx g move --project projectName path/to/new/projectName
  • Update prettier.rc, eslint.config, etc.
  • Changed react app vite.config.ts build outDir to local folder for caching, ./build/projectName
  • Create local libs for shared logic with nx g @nx/react:library libs/client/libName --unitTestRunner=vitest --bundler=none --style=none
    • Use style=none because it doesnt let me pick an option and for some reason would default to a broken styled components + tailwind
  • Installed chakra: npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion --legacy-peer-deps
  • Fix peer dependency issues with npm install eslint@^8.57.1, since [email protected] only supports up to [email protected]
  • Deleted all instances of jest in test files and configs. Made sure vitest types are specified in the tsconfig.spec.jsons for projects/libs
  • Make sure nx.json generators have the line "unitTestRunner": "vitest".
  • Testing other nx commands:
nx graph
nx graph --affected
# testing
nx test projectName
nx lint projectName
nx e2e projectName
nx run-many -t lint
nx run-many -t test
nx affected -t test
# build
npx nx run-many -t build
# deploy
nx affected -t deploy
# view nx cloud
nx connect
nx login
  • Update each lib and application's project.json tags to enforce @nx/enforce-module-boundaries dependency constraints
  • In eslint.config.js, remove any .js and .jsx extensions, and add them to the disabled list
  • Install nx cloud github app to get it to connect to my repo: https://github.com/apps/nx-cloud
    • Fix nx cloud auth errors due to not having access token. Create it on NX cloud version control integrations. Add it as a repository secret in the github actions settings. Update the ci.yml to reference that secret as an environment variable.
    • nx login is just to locally access nx cloud. it creates a personal token and tries to save it somewhere on device.
    • Tried lots of things to get CI builds to work. If it fails, switch to:
run: rm -rf node_modules package-lock.json
run: npm install --legacy-peer-deps
run: npx nx reset
run: npx nx affected -t lint test build e2e-ci --base=main --head=HEAD --verbose