Welcome to the UKHSA Data Dashboard Frontend. This project is built with Next.js, utilizing the GOV.UK Frontend and adhering to the GOV.UK Design System (GDS) principles to deliver a robust and accessible data visualization platform.
Before you begin, ensure you have the following installed:
- Node.js version 20.17.0 or later
-
Environment Variables:
Create a.env.localfile at the root of your project directory. Use the example below as a reference for the required environment variables:TZ="Europe/London" API_KEY=123 API_URL=http://localhost:3005 FEEDBACK_API_URL=http://localhost:3005 GOOGLE_TAG_MANAGER_ID=GTM-W39KF5J2 -
Development Server:
Start the Next.js development server by running the following command in your terminal:npm run dev
Access the application by navigating to http://localhost:3000 in your browser.
The frontend interacts with a Node.js Express-based mock server during development. This server runs on http://localhost:3005 and uses the /mock-server/handlers directory for loading mock data. This setup allows for isolated local development ahead of backend integrations.
Our project uses a GitHub Actions workflow for CI/CD. The workflow, located at .github/workflows/build-test-deploy, automates the build, test, code quality checks, and deployment processes. Deployments are made to AWS Elastic Container Service (ECS) on port 3000. The workflow also initiates deployment updates in our infrastructure repository.
For styling, the project primarily uses GOV.UK Frontend components and styles, supplemented with Tailwind CSS for additional customization. Conditional styles within components are managed using the clsx package.
For a detailed list of our deployment environments and their configurations, refer to our environments documentation on Confluence.