This is the frontend application for the Health Publication platform, built using React with TypeScript support. The project consumes backend APIs and serves both the admin and public user interfaces. It supports CI/CD deployments to environments including dev, test, uat, preprod, and prod.
The application is integrated with Azure B2C for authentication and uses Redux for state management. Cypress is used for E2E testing.
All environments are configured using public/env-config.js and .env files as needed.
devtestuatpreprodprod
Environment-specific variables are injected during the build process using a script (see env-config.template.js).
Deployment is managed via GitHub Actions, and changes to main or tagged releases automatically trigger deployments to the appropriate environment on AWS S3 or CloudFront.
-
Build
- Installs dependencies and builds the static site with Vite.
-
Test
- Runs Jest unit tests and Cypress E2E tests.
-
Deploy
- Pushes the build artifacts to S3.
- Invalidate CloudFront cache.
Ensure you have the following installed:
- Clone the Repository
git clone <repository-url>
cd <repository-folder>- Create the
env-config.jsFile
Assume the AWS role for the desired environment, then run:
make env ENV=<env>This command generates an env-config.js file in the public/ directory.
The file will be automatically populated with environment variables retrieved from the ECS task definition.
- Install Dependencies
npm install- Run the Development Server
npm run devApp will be available at: http://localhost:5173
Note
We have identified an issue where the application does not render correctly in Google Chrome on macOS.
Please use an alternative browser such as Safari, Firefox, or Microsoft Edge.
To run all tests:
npm run testTo run a specific test file:
npm test [file].github/– GitHub Actions and workflowssrc/– Main frontend source codepublic/– Static assets and environment config loadercypress/– Cypress E2E test config and specsdocs/– Project-level documentation
src/components/– React components (atoms, molecules, organisms)src/pages/– Route-based page componentssrc/redux/– Feature-based state slicessrc/services/– API client and authentication logicsrc/utils/– Shared utility functionssrc/hooks/– Custom React hookssrc/layouts/– Page layoutssrc/context/– Context providerssrc/types/– TypeScript types and interfaces
public/env-config.js– Injects runtime environment variables
npm run testnpx cypress openE2E test specs are located in:
automation_tests/e2e/
npm run buildOutputs static files to the dist/ directory. These files are then deployed via CI to S3 + CloudFront.
npm run lintnpm run formatESLint has been temporarily disabled during migration from the duplicate-feature branch. To re-enable linting, add the following to package.json:
"lint-staged": {
"*.{js,jsx,ts,tsx,css,html}": [
"prettier --write .",
"eslint . --fix"
]
}Pre-commit hooks are enforced using husky and lint-staged.
Azure B2C is used for authentication. Configuration lives in:
src/msalInstance.tsxsrc/authConfig.tsx
Protected routes are managed via ProtectedRoute.tsx.
- Ensure the
env-config.jsfile is properly configured before starting the app. - Check for dependency issues if errors occur during startup.
- Use the same AWS session credentials during build and test workflows.
- Postman collections for backend APIs are available for reference.
# Build & serve locally
npm run preview
# Run Jest tests with coverage
npm run test:coverage
# Run specific Cypress test
npx cypress run --spec "automation_tests/e2e/HPUB-472_Empty_Basket_Guest.cy.ts"- Verify contents of
public/env-config.js - Check GitHub Actions for CI pipeline logs
- Validate CloudFront cache invalidation
This project uses Vite with hot module reloading and supports both Babel and SWC-based plugins:
- If you have any security concerns pls report it privately via level2b@ukhsa.gov.uk or level3b@ukhsa.gov.uk.