csnx

Monorepo for Guardian UIs

Projects in the monorepo

Packages

The following packages live in libs/@guardian/* and are published to NPM:

• @guardian/ab-core
• @guardian/ab-react
• @guardian/atoms-rendering
• @guardian/browserslist-config
• @guardian/core-web-vitals
• @guardian/eslint-config
• @guardian/eslint-config-typescript
• @guardian/eslint-plugin-source-foundations
• @guardian/eslint-plugin-source-react-components
• @guardian/libs
• @guardian/prettier
• @guardian/source-foundations
• @guardian/source-react-components
• @guardian/source-react-components-development-kitchen
• @guardian/tsconfig

Development

1. Clone the repo
2. Run a task.

You'll be prompted to install any missing requirements if they are needed...

Running tasks

Tasks are defined in the Makefile.

• make atoms-rendering-nginx-setup runs nginx setup script in atoms-rendering
• make build-storybooks builds all storybooks
• make build builds all projects
• make changeset creates a new changeset
• make clean removes all build artifacts
• make e2e runs the e2e tests for all projects
• make fix attemps to fix lint errors across all projects
• make lint checks all projects for lint errors
• make storybooks runs storybook for all projects in single instance
• make test runs the unit tests for all projects
• make validate makes sure absolutely everything is working

Task caching

The repo is managed by Nx.

Nx remotely caches the output of build, lint, test, e2e, and build-storybook.

This means only one full iteration of these tasks runs for a given state of a project – ever – which makes them extremely fast to re-run.

For example, you're working on something, run the tests and they pass. Nx remotely caches the result. You push your changes to CI. When CI runs the tests, nothing has changed, so Nx fetches the (passing) cached results, the build goes green and you can merge.

When I pull your changes, my copy of the code is identical to what you pushed and merged, so I also get the cached results. If I then change the code, Nx re-runs the tests and, again, caches the results.

This happens per project. So if you change project-a but not project-b, Nx will get the cached results for project-b, but still run the tests for project-a. From then on, until project-a changes again, Nx will always use the cached results for both.

This includes between development and CI, between machines, pulls etc.

Skipping the cache

To force the tasks in the Makefile to skip the Nx cache, set SKIP_NX_CACHE=true, e.g.

SKIP_NX_CACHE=true make test

Troubleshooting

Unable to commit

If you get a command not found error or a message saying you're using the wrong version of Node when commiting using a GUI (VSCode, GitHub desktop etc), add a ~/.huskyrc file and load your Node version manager there.

For example, if you use fnm:

# ~/.huskyrc
eval "$(fnm env)"
fnm use

Or for asdf:

# ~/.huskyrc (installed with git)
. $HOME/.asdf/asdf.sh

# ~/.huskyrc (installed with brew on intel macs)
. /usr/local/opt/asdf/libexec/asdf.sh

# ~/.huskyrc (installed with brew on apple silicon)
. /opt/homebrew/opt/asdf/asdf.sh

Or for nvm:

# ~/.huskyrc
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" && nvm use

See https://typicode.github.io/husky/#/?id=command-not-found for more info.