# Vyriy Preset MFE

Microfrontend starter for Vyriy and OpenMFE-oriented development.

Published: 2026-06-04
Tags: vyriy, preset, mfe, cli
Source: https://vyriy.dev/examples/vyriy-preset-mfe/

---

# 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

```bash
npm create vyriy@latest
```

Choose the `mfe` preset.

## Setup

```bash
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:

```bash
yarn start
```

Start individual workspaces:

```bash
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:

```bash
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

```bash
yarn build
```

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

## Validation

```bash
yarn check
```

Focused validation commands:

```bash
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:

- [Calm Development Environment: Node.js, Corepack, Yarn and Static Preview](https://vyriy.dev/blog/calm-development-setup/) - how to keep the local development environment predictable and easy to reproduce.
- [Calm App Structure for the Vyriy Ecosystem](https://vyriy.dev/blog/vyriy-calm-app-structure/) - a practical project structure for Vyriy applications: shared configs, small packages, thin workspaces, Storybook docs, tests, and deployable entry points.
- [One Handler, Many Runtimes](https://vyriy.dev/examples/one-handler-many-runtimes/) - how @vyriy/handler, @vyriy/router, and @vyriy/server compose a calm Lambda-compatible API that can run locally, in Docker, Fargate-style HTTP runtimes, and AWS Lambda.
- [Calm Component Structure](https://vyriy.dev/blog/calm-component-structure/) - how to organize component code, tests, stories, and public exports.
- [Storybook as Project Documentation](https://vyriy.dev/blog/storybook-as-project-documentation/) - how to use Storybook as living project documentation and a component playground.