Pandemic Preparedness Tool

The Pandemic Preparedness Toolkit (PPT) is a five-year project (2023 – 2028), funded by Wellcome, which aims to co-create a sustainable, online Toolkit that will build capacity for infectious disease surveillance in National Statistical Offices (NSOs). The UK Office for National Statistics (ONS) is collaborating with NSOs and Delivery Partners within Argentina, Malawi, and Nepal to co-develop the Toolkit.

This is an Astro.js project bootstrapped with npm create astro@latest. Storybook is used to develop and test UI components in isolation.

Requirements and initial setup

This project has the following dependencies:

• aws cli
• nvm

If you want to deploy assets you will also need an IAM user account for the project AWS account.

To install dependencies and configure the project for first use, follow the instructions below:

1. Open a terminal in the project root directory
2. Install dependencies using brew

brew install awscli nvm

3. Install the node version defined in the .nvmrc file using nvm

nvm install

4. Set the node version we want to use, if not already done by the installation

nvm use $(cat .nvmrc)

5. If you haven't already done so, create access keys linked to your aws account

6. Using the aws cli, configure your aws profile using the access keys associated with your account.

aws configure

7. Install dependencies using npm

npm i --include-dev

The project is now ready for development or to use for deployments.

Development server

To run the Astro.js development server:

npm run dev

Open http://localhost:4321 with your browser to see the result.

To deploy your local app to a shared location:

npm run deploy-app-dev

Once this has built and deployed successfully, the Astro.js application will be available at an address defined by the AWS Cloudfront distribution.

Storybook

To run Storybook development server:

npm run storybook

Open http://localhost:6006 with your browser to see the result.

To deploy your local storybook to a shared location:

npm run deploy-storybook-dev

Once this has built and deployed successfully, Storybook will be available at an address defined by the AWS Cloudfront distribution.

Linting and code formatting

This project uses ESLint for code static analysis and linting.

To run ESLint locally:

npm run lint

CI/CD workflows

This project uses GitHub Actions workflows for Continuous Integration and Continuous Deployment (CI/CD). Workflow statuses can be monitored in the GitHub Actions tab of the project repository. Any failing workflows will highlight issues with code and stop either merges to the main branch or errors or bugs being deployed.

Pull request and push integration

The main-pr-push-app.yml workflow is configured to audit dependencies, run linting, run tests and automatically build code changes related to the project application code on every push or pull request targeting the main branch.

The main-pr-push-iac.yml workflow is configured to validate and check the format of code changes related to the project Infrastructure as Code (IaC) on every push or pull request targeting the main branch.

Push deployment

The main-push-cd.yml workflow is configured to build and deploy the Astro application and Storybook on every push that targets the main branch. Once deployed successfully, the Astro application and Storybook will be available at an address defined by the AWS Cloudfront distribution.

Styling

The styling of the project is laid out such that:

• Inverted Triangle CSS (ITCSS) principles are followed
• Global and element styles are loaded on every page
• Component-level styles are loaded and scoped to their respective components

Linting and code formatting

This project makes use of Prettier and ESLint to apply linting and code-formatting rules respectively. Prettier automatically formats the codebase to ensure uniform style, while ESLint enforces coding standards specified by rules in eslint.config.js.

To run all the linting and code formatting (Prettier and ESLint together):

npm run lint

To run Prettier locally:

npm run lint:prettier

To run ESLint locally:

npm run lint:eslint

If using VSCode, you may wish to use the following .vscode/setting.json configuration to aid linting and formatting.

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.organizeImports": "explicit"
  },
  "prettier.documentSelectors": ["**/*.astro"],
  "[astro]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

This will do the following:

• Automatically formats your code using the default formatter on save
• Sets Prettier as the default code formatter
• Automatically organizes imports on save
• Ensures Prettier target files with the .astro extension
• Sets Prettier as the default formatter for .astro files

Testing

Vitest is used as the testing suite for this project. Vitest is a suitable choice since Astro.js already uses vite under the hood for its build process.

To write tests for a component (e.g., Component.tsx), create a corresponding test file named Component.test.tsx or Component.spec.tsx in the same directory. Vitest will automatically detect and run these test files.

To run all the tests using vitest:

npm run test