✨ mui-rhf-sandbox

Here is a little POC to help our team move forward with our stack! ✨

⚡ Getting started

# using fnm to set node version - https://github.com/Schniz/fnm
fnm use

# Installing dependencies
pnpm i

# starting backend and frontend in parallel
pnpm dev front,back
# on windows 
pnpm dev "front,back"

# run all tests
pnpm test-all

# launch cypress tests in watch mode
pnpm exec nx run front-e2e:e2e --watch

# launch storybook in dev mode
pnpm exec nx run storybook:dev

⚡ Documentation

Seriously, read these please 🥲

🔶 nx

🔶 Frontend architecture

🔶 Forms handling

🔶 Tests

🔶 Storybook

🔶 Cypress

⚡ Projects

Project	Description
🚀 front app	Our frontend app, containing a signup form
🚀 front-e2e app	Our end to end testing code using cypress
🚀 back app	Our backend app, relying on an in-memory dataset
🧩 front-api lib	Our api types, extracted from the backend swagger
🧩 front-components lib	Our generic components and the MUI theme shared by all our frontend apps
🧩 front-translations lib	Stub implementation for the translation of our UI.
🧩 storybook lib	Library centralizing the configuration necessary to build and run storybook.

⚡ cli

🔶 Running actions

Description	Command
▶️ Run an action on one project	pnpm exec nx run <project>:<action>
▶️ Run an action on all projects	pnpm exec nx run-many --target=<action> --all
▶️ Run an action on a set of projects	pnpm exec nx run-many --target=<action> --projects=<project1>,<project2>
▶️ Run an action only on projects containing changes	pnpm exec nx affected:<action>

🧿 Typical actions

Actions are defined by project in project.json files. Here are a few standard actions:

Action	Description
🛠️ build	Builds the app/lib. Use --prod flag for a production build
🚀 serve	Runs the app
⚠️ lint	Run the linter against project files
✔️ type-check	Uses tsc --noEmit to validate types against project files
✅ test	Runs tests
☑️ e2e	Runs end to end tests

🧿 Useful flags

flag	Description
⬛ --target=x	specifies which action to run
⬛ --skip-nx-cache	disables nx caching; the command will be ran fully
⬛ --verbose	prints additional error stack trace on failure
⬛ --projects=x,x	run-many: specifies which projects to run the action against
⬛ --parallel=x	run-many: allows x tasks to be ran in parallel

🔶 Running tests

Description	Command
✅ Run tests for a project (watch)	pnpm test-changes <project> or pnpm exec nx test --project=<project> --watch
✅ Run all tests for a project (watchAll)	pnpm test-dev <project> or pnpm exec nx test --project=<project> --watchAll
✅ Run all tests in parallel	pnpm test-all or pnpm exec nx run-many --target=test --parallel --all

🔶 Creating applications or libraries

Description	Command
🗃️ Create a new front app or lib	pnpm exec nx g @nrwl/react:app <appname> or pnpm exec nx g @nrwl/react:lib <appname>
🗃️ Create a new backend app or lib	pnpm exec nx g @nrwl/nest:app <appname> or pnpm exec nx g @nrwl/nest:lib <appname>
🗃️ Create a vanilla node lib	pnpm exec nx g @nrwl/node:lib <libname>