# Vyriy Preset SPA

Calm cloud-ready single page application built as a Yarn workspace monorepo.

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

---

# Vyriy Preset - SPA

Calm cloud-ready single page application built as a Yarn workspace monorepo.

## Create this example

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

Choose the `spa` preset.

## Workspaces

### `@w/spa`

Client-side React application in `workspaces/spa`.

- Entry point: `workspaces/spa/index.tsx`
- Webpack config: `workspaces/spa/webpack.config.ts`
- Production output: `dist/spa/index.js`
- Documentation: `workspaces/spa/README.md`

### `@p/components`

Shared React component package in `packages/components`.

- Public entry point: `packages/components/index.ts`
- Current public exports: `Page`, `PageProps`, `PageType`
- Documentation: `packages/components/README.md`

## Requirements

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

## Development

Start the SPA development server:

```bash
yarn start:spa
```

Start Storybook:

```bash
yarn storybook
```

Run all start scripts:

```bash
yarn start
```

## Build

Build the SPA:

```bash
yarn build:spa
```

Build Storybook:

```bash
yarn build:storybook
```

Run all build scripts:

```bash
yarn build
```

## Validation

Run the full project check:

```bash
yarn check
```

Run individual validation steps:

```bash
yarn lint
yarn test
```

Run focused Jest checks:

```bash
yarn jest packages/components --runInBand --coverage=false
yarn jest workspaces/spa --runInBand --coverage=false
```

## Formatting And Fixes

Apply configured format, ESLint, and Stylelint fixes:

```bash
yarn fix
```

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