Vyriy

Vyriy Preset - MFE

Profile-card microfrontend starter for Vyriy and OpenMFE-oriented development.

The repository is split into reusable packages and runnable workspaces. Packages own typed component, API, event, query, and environment behavior. Workspaces compose those packages into the local API server, static asset origin, and browser custom element build.

Create this example

npm create vyriy@latest

Choose the mfe preset.

Setup

yarn install

Project Structure

  • packages/api builds demo HTML, prerendered custom element markup, JSON-LD, and the OpenMFE manifest.
  • packages/components provides the React profile-card component set.
  • packages/env reads required runtime environment values.
  • packages/event dispatches typed profile-card selection and analytics events.
  • packages/query parses API query strings into profile-card props.
  • workspaces/api serves the demo, prerender, semantic, and manifest endpoints.
  • workspaces/static serves CDN assets such as the avatar, manifest icon, and screenshots with @vyriy/static.
  • workspaces/ui registers the vyriy-profile-card custom element and builds browser assets.

Start

Start the API, static asset server, and UI dev server together:

yarn start

Start individual workspaces:

yarn start:api
yarn start:static
yarn start:ui

Local URLs

Default ports and origins are defined in workspaces/env.sh:

  • API: http://localhost:3000
  • Static/CDN assets: http://localhost:3001
  • UI dev server: http://localhost:3002

Default runtime values:

  • TAG=vyriy-profile-card
  • MODE=open

Useful API URLs:

  • Demo HTML: http://localhost:3000/
  • Prerendered custom element: http://localhost:3000/prerender?name=Developer&title=Senior%20IT%20Professional&avatarUrl=http://localhost:3001/avatar.svg
  • Semantic JSON-LD: http://localhost:3000/semantic?name=Developer&title=Senior%20IT%20Professional&avatarUrl=http://localhost:3001/avatar.svg
  • Manifest: http://localhost:3000/manifest.yml

/prerender and /semantic require name and accept optional title, description, avatarUrl, and comma-separated tags.

Static Assets

Static files are served with @vyriy/static. The package exposes the vs command, so a globally installed copy can serve any static directory with a small command:

vs -p 3001 workspaces/static/public

In this project, yarn start:static runs the same static server through npx vs and the CDN_PORT value from workspaces/env.sh.

Build

yarn build

The build writes server output to dist/api and browser/static CDN output to dist/cdn.

Validation

yarn check

Focused validation commands:

yarn lint
yarn test
yarn build

Project Guidance

These articles describe the development approach behind this preset and provide practical guidance for evolving a project on top of it: