Source code for the crru.org.uk website – built in NextJS, TypeScript, Jest, React, and SCSS; with infrastructure managed with Terraform.
The website primarily uses Contentful as the main source of data.
The app is made up of the following parts:
src/contains the main codesrc/pagescontains the app routes and pagessrc/layoutcontains single-use React components (e.g. header and footer)src/componentscontains common React componentssrc/scsscontains global SCSS stylessrc/helperscontains common helpers, utility functions, and constantssrc/helpers/renderingcontains Contentful rich text rendering handling
src/datacontains static JSON data
public/contains static assets (e.g. fonts and icons)redirects.jsoncontains permanent redirects for the previous websiteterraform/contains the Terraform code for the website infrastructure
- Clone the repository
- Ensure you are using Node version >= 24 (
nvm install 24/nvm use 24) - Install the dependencies by running
npm ci - If using VS Code install the ESLint, Stylelint, and Prettier extensions
The following environment variables should be provided when running the server (an .env file in the root is supported – see .env.example for an example):
| Variable | Description |
|---|---|
NODE_ENV |
Environment the app is running on. |
NODE_CONTENTFUL_SPACE_ID |
Contentful space ID. |
NODE_CONTENTFUL_ENVIRONMENT |
Contentful environment. |
NODE_CONTENTFUL_DELIVERY_API_TOKEN |
Contentful Delivery API access token. |
NODE_CONTENTFUL_PREVIEW_API_TOKEN |
Contentful Preview API access token. |
NODE_CONTENTFUL_ENVIRONMENT |
Contentful environment. |
NEXT_PUBLIC_CLOUDFLARE_CHALLENGE_SITE_KEY |
Cloudflare Turnstile site key. |
NODE_CLOUDFLARE_CHALLENGE_SECRET_KEY |
Cloudflare Turnstile secret key. |
NODE_SMTP_HOST |
SMTP host for sending emails. |
NODE_SMTP_PORT |
SMTP port for sending emails. |
NODE_SMTP_USERNAME |
SMTP username for sending emails. |
NODE_SMTP_PASSWORD |
SMTP password for sending emails. |
NODE_SIGHTING_EMAIL |
Email address to send sightings to. |
Below are the NPM commands that can be used for development:
| Command | Description |
|---|---|
start |
Starts the app (requires build to be run) on port 3000. |
build |
Builds the app for production. |
dev |
Runs the app in development mode on port 3000. |
test |
Runs test:linting, test:types, and test:jest sequentially. |
test:linting |
Runs ESLint, Prettier, and Stylelint tests. |
test:types |
Runs TypeScript tests. |
test:jest |
Runs unit and integration tests and generates a coverage report. |
test:jest:watch |
Same as test:jest but runs it in watch mode. |