✨ nx-front-poc

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

                               

⚡ Deployments

description	url
🚀 Backend app	https://rhf-mui-nx-sandbox-back.herokuapp.com
🚀 Frontend app	https://mui-rhf-sandbox.vercel.app
🚀 Storybook	https://mui-rhf-sandbox-storybook.vercel.app

⚡ 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 frontend-app,backend-app
# on windows
pnpm dev "frontend-app,backend-app"

# run all tests
pnpm test-all

# launch cypress tests in watch mode
pnpm nx e2e front-e2e-app --watch

# launch storybook in dev mode
pnpm storybook

⚡ Documentation

Seriously, read these please 🥲

🔶 Codebase structure (the monorepo wonderland)

🔶 Frontend architecture

🔶 Multi languages support

🔶 Forms handling

🔶 Tests

🔶 Storybook

🔶 Cypress

⚡ A quick peek at the nx graph

⚡ Projects

Project	Description
🚀 frontend-app app	Our frontend app, containing a signup form
🚀 front-e2e-app app	Our end to end testing code using cypress
🚀 front-storybook-app app	A next app used to serve storybook
🚀 backend-app app	Our backend app, relying on an in-memory dataset
🧩 front-api-lib lib	Our api types, extracted from the backend swagger
🧩 front-components-lib lib	Our generic components and the MUI theme shared by all our frontend apps
🧩 front-contexts-lib lib	Shared contexts
🧩 front-logic-lib lib	Shared logic code
🧩 front-storybook-lib lib	Library centralizing the configuration necessary to build and run storybook.
🧩 front-tests-lib lib	Tests related helpers and wrappers.
🧩 front-theme-lib lib	Our applications theme (Mui).
🧩 front-translations-lib lib	Translations locales and helpers for our UI.

⚡ cli

🔶 Running actions

Description	Command
▶️ Run an action on one project	pnpm nx run <action> <project>
▶️ Run an action on all projects	pnpm nx run-many --target=<action> --all
▶️ Run an action on a set of projects	pnpm nx run-many --target=<action> --projects=<project1>,<project2>
▶️ Run an action only on projects containing changes	pnpm 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
🕵️ Sonarcloud scan	Execute sonarcloud scanner on the targetted app of lib

🧿 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 nx test --project=<project> --watch
✅ Run all tests for a project (watchAll)	pnpm test-dev <project> or pnpm nx test --project=<project> --watchAll
✅ Run all tests in parallel	pnpm test-all or pnpm nx run-many --target=test --parallel --all

🔶 Creating applications or libraries

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