Website front-end for www.nice.org.uk using NextJS
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 |
| aws | AWS ECS hosting for the NextJS web app |
| api | Ocelot Api Cache |
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
There are also more specific stacks detailed in the readme for each sub folder.
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.
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 need more granular control:
- Run
npm testto run the Jest tests (note: this doesn't run the WDIO functional tests)- Or, run
npm run test:watchto run the tests and watch for changes to files, to re-run the tests - Or, run
npm run test:coverageto run the tests and output a coverage folder with an lcov report.
- Or, run
Running tests in watch mode via
npm run test:watchis most useful when developing locally.
We use an enterprise edition of JotForms, https://nice.jotform.com/myforms/ to host forms on the NICE Website. For further information, please see docs/jotforms-integration.md.
Ocelot has been added as an alternative to Storybloks own inbuilt caching. To set up Ocelot for Storyblok locally the following steps need to be taken:
- Ensure Redis is installed and running. Check that the redis endpoint URL is correct in the Ocelot section of appsettings.Development.json or appsettings.Production.json
- There are two endpoints for clearing the Ocelot Cache, for which postman is used to access, these can be obtained from a developer or tester.
- Amend the appsettings.Development.json or appsettings.Production.json so that the Ocelot.ClientSecret matches the client_secret in the Get Token postman request.
- In the ocelot.development.json and/or ocelot.production.js in GlobalConfiguration add a BaseUrl key and the value is the local ocelot endpoint
"GlobalConfiguration": {
"BaseUrl": "http://localhost:45127"
}
- Open next-web/api/NICE.NextWeb.API.sln in Visual Studio and Run. You should be presented with a web page that says 'Not found'.
- Ensure that in the Storyblok's .env file STORYBLOK_OCELOT_ENDPOINT correctly matches your local Ocelot endpoint URL and has a suffix of /storyblok. i.e.
STORYBLOK_OCELOT_ENDPOINT=http://localhost:45127/storyblok - Run Storyblok, it should now use Ocelot for it's caching.