---
url: /templates/react.md
description: Start a static React app for deployment with DockIY.
---

# React template

The [DockIY React template](https://codeberg.org/chris-paganon/dockiy-react)
deploys a static React application to separate staging and production
environments.

Try the [deployed demo](https://react.dockiy.com).

## Stack

* [React](https://react.dev/)
* [TypeScript](https://www.typescriptlang.org/docs/)
* [Vite](https://vite.dev/guide/)
* [Tailwind CSS](https://tailwindcss.com/docs)
* [Caddy](https://caddyserver.com/docs/)
* [Docker Compose](https://docs.docker.com/compose/) and [Traefik](https://doc.traefik.io/traefik/)

The production image copies the generated `dist` directory into an
unprivileged Caddy image. It does not contain the source or build tools.

## Requirements

Install these tools on your computer:

* [Node.js 24+](https://nodejs.org/en/download/)
* [pnpm 11+](https://pnpm.io/installation)
* [Git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git)
* [Docker Engine](https://docs.docker.com/engine/install/) and [Docker Compose](https://docs.docker.com/compose/install/)
* the [DockIY CLI](/guide/installation) for deployment

## Develop locally

Create a project with `dockiy app init react my-app`, or clone the template.
Then run:

```bash
pnpm install --frozen-lockfile
pnpm dev
```

Vite runs at `localhost:5173`. Edit files under `src/` and place static assets under `public/`.

Verify a production build before deploying:

```bash
pnpm build
pnpm preview
```

## Configure deployment

The DockIY base stack must already be running. In `dockiy.yml` at the project
root, edit `name` and the `host` values under `environments.staging` and
`environments.production`:

```yaml
name: my-app

environments:
  staging:
    host: staging.example.com
    compose_file: docker-compose.yml
  production:
    host: example.com
    compose_file: docker-compose.yml
```

Set the VPS connection in the global DockIY config. For a checkout-specific
override, create an uncommitted `dockiy.config.yml` in the project root. See
the [configuration reference](/config/) for the config file locations and
precedence.

The template's `docker-compose.yml` and files under `scripts/` are already
wired for deployment. Edit them only when changing the container or deployment
behavior.

## Deploy

Commit the application, then follow [Deploying applications](/guide/deploying-apps)
for the deployment, status, version, and rollback commands:

```bash
git add .
git commit -m "feat: configure application"
dockiy app deploy staging
dockiy app deploy production --version v1.0.0
```