CRRU Website

1. Introduction
2. Overview
3. Installation
4. Development

Introduction

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.

Overview

The app is made up of the following parts:

• src/ contains the main code
  • src/pages contains the app routes and pages
  • src/layout contains single-use React components (e.g. header and footer)
  • src/components contains common React components
  • src/scss contains global SCSS styles
  • src/helpers contains common helpers, utility functions, and constants
    • src/helpers/rendering contains Contentful rich text rendering handling
  • src/data contains static JSON data
• public/ contains static assets (e.g. fonts and icons)
• redirects.json contains permanent redirects for the previous website
• terraform/ contains the Terraform code for the website infrastructure

Installation

1. Clone the repository
2. Ensure you are using Node version >= 22 (nvm install 22 / nvm use 22)
3. Install the dependencies by running npm ci
4. 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.
NEXT_PUBLIC_GOOGLE_ANALYTICS_ID	Google Analytics tracking ID.
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.

Development

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.