Skip to content

Web Frontend — beginner tutorial

Released in FCC v1.2.1. You are new to FCC and want a gentle introduction to Web Frontend. This tutorial walks you through the simplest possible end-to-end use of the subsystem with no prerequisites beyond pip install -e ..

What this subsystem does

The Web Frontend subsystem provides the FCC WebSocket bridge that connects the EventBus to browser clients, enabling the React frontend (or any custom dashboard) to receive real-time events.

The implementation lives at src/fcc/protocols/ws_bridge.py. It ships with FCC core (no separate install needed) and is exercised by:

Focus persona: RC — Research Crafter

We anchor this beginner-track tutorial on RC because that's the persona most relevant to a beginner use of the Web Frontend subsystem.

from fcc._resources import get_personas_dir
from fcc.personas.registry import PersonaRegistry

registry = PersonaRegistry.from_yaml_directory(get_personas_dir())
persona = registry.get("RC")
print(persona.name)
print(persona.role_title)
print(persona.riscear.role)

Step 1 — Construct the subsystem

The simplest possible use is just constructing the relevant class with default arguments. See the focus notebook for the exact import.

Step 2 — Run one operation

Each subsystem has one "headline" operation: bridge events for web-frontend, query a NanoCube for distiller, score a FAIR compliance result for open-science, transform an event into a D3 payload for skyparlour. Notebook 28 walks you through it step by step.

Step 3 — Inspect the result

Print the result and read the field names. Each subsystem ships frozen dataclasses with self-documenting field names.

What you learned

  • The web-frontend subsystem ships with FCC core
  • Default mock mode produces deterministic results for testing
  • The notebook is the canonical executable example

Verification

Run the focused test suite for this subsystem:

pytest tests/test_ws_bridge.py -v

All tests should pass on a clean v1.2.1 install. If they don't, check that you have the optional deps from the [full] extras group:

pip install -e ".[full]"

Next steps