Floor Plan Micro Frontend - QA

This is a React micro frontend for space. It uses Nx and webpack module federation.

The scaffolding for this project was based on the platform-floorplan-mfe, so see that repo for additional ideas on configuration, components, etc.

Project contents

• Space MFE (micro frontend): ./apps/mfe
• Space BFF (backend for frontend): ./apps/bff
• Shell (for demo/dev purposes only): ./apps/shell
• Libs (for various supporting functionality): ./libs

Getting Started

1. Add NPM_TOKEN to your env for @runeffective packages (see .yarnrc).
2. Run yarn install to install the project dependencies.
3. Run yarn start to start the MFE, BFF, and shell app.

Useful Nx commands

Run nx serve spaceBff to start the BFF server only.

Run nx serve floorplanMfeQa to start the MFE server only.

Run nx g @nrwl/react:lib my-lib to generate a library.

Run nx g @nrwl/react:component my-component --project=components to generate a new component in the components library.

Running tests

Run yarn test to run all tests.

Run yarn test:coverage to run tests and publish results to coveralls. It generates a single lcov.info file from all the lcov.info files in the coverage directory.

Run nx test floorplanMfeQa --coverage --coverageReporters=text to run specific project tests and generate coverage. Use this more for dev tests with coverage.

GraphQL Code Generation

The project uses code generation to generate the Apollo client GraphQL hooks.

Generating Apollo GraphQL hooks

Add the query or mutation definition to the operations.graphql file in the data-access project.

Run nx run data-access:generate to generate the code for associated hooks. The hooks will be placed in the generated.ts file.

Localization

To localize text we are using the react-i18next library. Please ensure you do not use static text directly in the UI. To add a localized string add a key value pair to the appropriate locale file e.g. for the English common namespace file libs/localization/src/lib/i18n/locales/en/en-common.json. Values in the json file are hierarchical and are referenced through dot notation e.g.

{
  "nav": {
    "selectFloor": "Select Floor"
  }
}

"Select Floor" is referenced using the translation hook with the following pattern t('[namespace key]:[dot notation key in the file]) e.g. t('common:nav.selectFloor').

See the react-18next documentation for details on pluralization and interpolation.

Namespacing

It is best practice to namespace localizations. To add a new file navigate to (or create) the language code directory under libs/localization/src/lib/i18n/locales/. Our convention for the name is [language code]-namespace.json.

Testing

If you need the translations in text use contextRender, which will setup the en translations.