Next Web

Website front-end for www.nice.org.uk using NextJS

Project structure

The repository is set up as a monorepo. That is, there are various sub folders providing different parts of the project e.g. the web app and functional tests:

Folder	Purpose
web	NextJS web app
web-host	PM2 hosting for the NextJS web app

Stack

The common components of the stack are:

• VS Code IDE
  • With recommended extensions (VS Code will prompt you to install these automatically)
• TypeScript for static type checking
• Prettier for code formatting
• ESLint for JavaScript/TypeScript linting
• stylelint for SCSS linting
• Jest for JS unit testing
  • With React Testing Library

There are also more specific stacks detailed in the readme for each sub folder.

Linting

We use Prettier for code formatting, ESLint for JavaScript/TypeScript linting and stylelint for SCSS linting. All 3 are installed as dev dependencies and configured at the root level of this monorepo.

VSCode is also configured with the necessary extensions (via extensions.json) and settings (via settings.json) to do in-IDE linting and formatting. There's no further setup needed beyond installing the recommended extensions when you open the project. Just save source files and they'll be reformatted automatically.

Using VSCode should work for in-IDE linting but if it doesn't you can run the lint commands manually. Run npm run lint in the root to run Prettier, ESLint, stylelint and TS type checking against all source files. This includes source files for the NextJS web app, Jest tests and WDIO functional tests.

If you prefer using an IDE to command line, open the VSCode command palette (Ctrl + Shift + P) and choose Tasks: Run Task then Lint all the things.

Alternatively, run individual commands like npm run prettier, npm run lint:ts, npm run lint:scss or npm run ts:check for more granular control, although you shouldn't normally need to do this - IDE support and the single npm run lint command are usually enough.

Tests

We use Jest for JS unit testing with React Testing Library for testing React components.

vscode-jest is added as recommended extension (via extensions.json). This gives you the ability in-IDE to run and debug tests.

Use the command line instead if you neeed more granular control:

1. Run npm test to run the Jest tests (note: this doesn't run the WDIO functional tests)
   1. Or, run npm run test:watch to run the tests and watch for changes to files, to re-run the tests
   2. Or, run npm run test:coverage to run the tests and output a coverage folder with an lcov report.

Running tests in watch mode via npm run test:watch is most useful when developing locally.