Vyriy

Vyriy Preset - Fullstack

Calm cloud-ready fullstack application with React and server side rendering.

This repository contains a small fullstack demo with shared React components, required environment readers, a server-rendered API page, a static asset origin, and a client-rendered UI bundle.

Create this example

npm create vyriy@latest

Choose the fullstack preset.

Setup

yarn install

The project uses Yarn workspaces and Node >=24.0.0.

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

yarn start:static uses the vs CLI from @vyriy/static to serve project static files from workspaces/static/public.

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

Override API_PORT, CDN_PORT, UI_PORT, API, CDN, or UI before running a script when local services need different addresses.

Workspaces

  • packages/components provides the shared profile-card React component set.
  • packages/env provides required environment readers for API, CDN, and UI.
  • workspaces/api serves the SSR demo page at GET /.
  • workspaces/static serves public static assets such as avatar.svg through vs from @vyriy/static.
  • workspaces/ui builds and serves the browser entry point.

Each package or workspace has its own README with focused usage notes.

Static Server

@vyriy/static provides the vs command for serving static files. The project uses it through npx in workspaces/static/bin/start.sh:

npx vs -p 3001 workspaces/static/public

It can also be installed globally when the same static server is useful outside the workspace scripts:

npm install --global @vyriy/static
vs -p 3001 workspaces/static/public

Storybook

Run Storybook docs and component stories:

yarn storybook

Storybook loads package and workspace doc.mdx files and shared component styles from packages/components/styles.scss.

Build

Build all production outputs:

yarn build

Focused builds are also available:

yarn build:api
yarn build:static
yarn build:ui
yarn build:storybook

The API bundle is emitted to dist/api; UI and static assets are emitted to dist/cdn.

Validation

yarn lint
yarn test
yarn build

Use yarn check to run linting, build, and tests in one command.

Project Guidance

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