# Vyriy Preset SSR

Calm cloud-ready SSR application preset.

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

---

# Vyriy Preset - SSR

Calm cloud-ready SSR application preset.

This repository is a small TypeScript workspace for server-rendered React output. The API workspace fetches content through a service adapter, renders shared React components on the server, and returns complete HTML.

## Create this example

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

Choose the `ssr` preset.

## Structure

```text
packages/
  components/  Shared SSR-friendly React components.
  services/    Replaceable service adapters, including CMS access.
workspaces/
  api/         Server entry point that renders the page response.
```

Documentation is rendered through Storybook MDX wrappers. The root `doc.mdx` displays this README, while package and workspace docs display their own README files.

## Application Flow

1. `workspaces/api/index.tsx` starts the server.
2. The request handler calls `cms.getContent()` from `@p/services/cms`.
3. The returned body is rendered with `Page` from `@p/components`.
4. The response is wrapped into a complete HTML document and returned as `text/html`.

## Requirements

- Node.js `>=24.0.0`
- Yarn `4.16.0`

Install dependencies:

```bash
yarn install
```

## Commands

Start the SSR API:

```bash
yarn start
```

Build the API bundle and Storybook documentation:

```bash
yarn build
```

Run validation:

```bash
yarn check
```

Run individual checks:

```bash
yarn lint
yarn test
```

Open Storybook documentation:

```bash
yarn storybook
```

## Packages

- `@p/components` exports shared React components for server-rendered surfaces.
- `@p/services` exports service adapters that keep integration details outside UI and workspace code.
- `@w/api` is the SSR server workspace and deployable application entry point.

## Development Notes

Keep public behavior documented where it is introduced. When adding shared components or services, update the matching package README, public re-exports, and focused tests. Prefer SSR-safe code paths and avoid browser globals during render.

## 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.
- [Storybook as Project Documentation](https://vyriy.dev/blog/storybook-as-project-documentation/) - how to use Storybook as living project documentation and a component playground.