https://github.com/axinom/mosaic-frontend-samples

Collection of scenarios demonstrating how client applications can interact with the services provided by Axinom Mosaic.
https://github.com/axinom/mosaic-frontend-samples

Last synced: 9 months ago
JSON representation

Collection of scenarios demonstrating how client applications can interact with the services provided by Axinom Mosaic.

• Host: GitHub
• URL: https://github.com/axinom/mosaic-frontend-samples
• Owner: Axinom
• License: mit
• Created: 2022-07-28T06:31:14.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2025-07-22T12:25:03.000Z (11 months ago)
• Last Synced: 2025-09-30T09:44:11.695Z (9 months ago)
• Language: TypeScript
• Homepage: https://portal.axinom.com
• Size: 3.18 MB
• Stars: 16
• Watchers: 6
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE
  • Security: SECURITY.md

Awesome Lists containing this project

README

          
# Mosaic Frontend Samples

This React application contains code examples that cover how to use Mosaic

services to achieve certain scenarios.

Each scenario is developed to be a concise example that showcases the use-case

(i.e. the scenario) and what code is responsible to achieve it. This will act as

developer documentation for frontend application developers who would be

interested to develop against Mosaic services.

## Project Structure

The scenarios are grouped into areas to be easily discoverable:

- user-authentication

  - SignInWithExternalIdp

  - ShowUserInfo

- user-profile-management

  - CreateProfile

  - SwitchActiveProfile

- catalog-consumption

  - GetSingleItem

- video-playback

  - PlayProtectedVideo

- etc.

The `scenario-registry.ts` found in the root of the project maintains an array

of all scenarios that will be loaded into the application, and this array is fed

into the `ScenarioHostApp` in the `index.tsx` file.

## ScenarioHost Features

The ScenarioHost exposes several commonly used features that maybe required by

each scenario.

Such as:

- activeProfile

  - Through this object, the individual scenario can access different Endpoint

    URLs of the Mosaic services, and different IDs (i.e. `tenant_id`,

    `environment_id`) that are configured by the user.

- logger

  - Through the logger each scenario can print some output to the Logger

    component that will provide meaningful feedback to the user.

- setVariable, getVariable

  - These methods will allow scenarios to share variables between different

    scenarios (i.e. user-access-token is set by scenario-A, and it is later

    accessed by scenario-B). The

    `./src/common/types/well-known-variable-keys.ts` file will list all

    well-known variables that can be shared between scenarios.

## Additional Notes

The `semantic-ui-react` library is used as the UI Component library when

developing the scenarios. In real-world applications, the appropriate UI

libraries shall be used.

# Running the Project

- Run `yarn` to install dependencies

- Copy `.env.template` into `.env`, and change the values if needed

- Run `yarn dev` to start running the project in watch mode

- Run `yarn util:start-proxy` to start a `localhost` proxy to the

  `Mosaic User Service` upstream

  - Ensure to set/update the URL for `User Auth Base URL` in your

    `Mosaic Frontend Samples` profile to use the proxy endpoint for requests

# Building for Production

- Run `yarn build` to generate the `build` folder

- Use the `Dockerfile` in the root to build a docker image

  - `docker build -t mosaic-fe-samples .`