**Tags:** "Hello World" Examples · Qwik

# Qwik City SSR Hello World 

A minimal [Qwik City](https://qwik.dev) SSR application running on [Zerops](https://zerops.io)
with Node.js, connecting to a PostgreSQL database. Ships with six ready-made
environment configurations — from AI agent workspaces to highly-available
production — covering the full development lifecycle.

### Available Environments

- [AI Agent](https://app.zerops.io/recipes/qwik-city-ssr-hello-world.md?environment=ai-agent)
- [Remote (CDE)](https://app.zerops.io/recipes/qwik-city-ssr-hello-world.md?environment=remote-cde)
- [Local](https://app.zerops.io/recipes/qwik-city-ssr-hello-world.md?environment=local)
- [Stage](https://app.zerops.io/recipes/qwik-city-ssr-hello-world.md?environment=stage)
- **Small Production** ← current
- [Highly-available Production](https://app.zerops.io/recipes/qwik-city-ssr-hello-world.md?environment=highly-available-production)

### Services in this Environment

**Services:**

- **core** (core@1)
  - Containers: 1 × Shared Core, 0.00 GB RAM, 0 GB Disk
- **app** (nodejs@22) :3000
  - Containers: 2 × Shared Core, 0.38 GB RAM, 1 GB Disk
  - Repository: [zerops-recipe-apps/qwik-city-ssr-hello-world-app](https://github.com/zerops-recipe-apps/qwik-city-ssr-hello-world-app)
- **db** (postgresql@16) :5432, :6432
  - Containers: 1 × Shared Core, 0.75 GB RAM, 1 GB Disk

**Total Resources:** 4 containers, 1.50 GB RAM, 3 GB Disk

### One-Click Deploy (Import YAML)

Use this YAML with `zcli project import` to deploy this environment:

```yaml
# Qwik City SSR Hello World — Small Production environment.
# Production-ready setup with two containers for availability and
# vertical autoscaling for SSR workloads. Suitable for moderate traffic.
#
# Deploy: zcli project project-import import.yaml
project:
  name: qwik-city-ssr-hello-world-small-prod

services:
  - hostname: app
    type: nodejs@22
    zeropsSetup: prod
    # buildFromGit: Zerops pulls source code and zerops.yaml from this
    # public repository and triggers the first build automatically.
    buildFromGit: https://github.com/zerops-recipe-apps/qwik-city-ssr-hello-world-app
    enableSubdomainAccess: true
    # minContainers: 2 — always runs at least 2 containers; one can
    # restart or deploy without dropping availability.
    minContainers: 2
    # verticalAutoscaling: Zerops auto-scales RAM within these bounds.
    # minFreeRamGB reserves headroom for V8 GC cycles and SSR rendering
    # spikes — without it, the container hits minRam and OOM-kills.
    verticalAutoscaling:
      minRam: 0.25
      minFreeRamGB: 0.125

  # PostgreSQL for app data. Priority 10 starts data services before
  # app containers, preventing connection errors on first boot.
  - hostname: db
    type: postgresql@16
    mode: NON_HA
    priority: 10
    verticalAutoscaling:
      minRam: 0.5
      minFreeRamGB: 0.25

```

---

## Next Steps

After deploying one of the environments and getting to know Zerops, you have two paths to choose from:

1. **Template Flow** — Clone our GitHub repositories and use the whole recipe as a template
2. **Integrate Flow** — If you already have an existing application on a similar stack, integrate the recipe setup with your application

Select a flow: [Template Flow](https://app.zerops.io/recipes/qwik-city-ssr-hello-world.md?environment=small-production&guideFlow=template) or [Integrate Flow](https://app.zerops.io/recipes/qwik-city-ssr-hello-world.md?environment=small-production&guideFlow=integrate)

Both flows are shown below:

## How to take over the Small Production environment

### 📦 Clone the template repositories

Fork or clone the following repositories to your local machine or GitHub account:

- [zerops-recipe-apps/qwik-city-ssr-hello-world-app](https://github.com/zerops-recipe-apps/qwik-city-ssr-hello-world-app)

### 1. Find your service name

Many commands and configurations need the exact name of your service. You can find it in the Zerops Dashboard.

- Open your project in the Zerops Dashboard.
- In the project overview, find the service you want to manage.
- Use this exact name whenever a command or pipeline configuration asks for `<service-name>`.

<img src="https://storage-prg1.zerops.io/4gfos-storage/copy1_cd2a6044c8.jpg" style="display: block; margin: 0 auto;" alt="Zerops GUI: Locating the Service Name" width="500" />

### 2. Configure deployment pipeline

Go to Service Settings > Pipelines & CI/CD Settings in the Zerops Dashboard and connect your repository.

For production, use a trigger on new tags. This keeps deployments intentional and tied to a specific version. You can also add a regex filter, such as `^v[0-9]+\.[0-9]+\.[0-9]+$`, if you want to allow only semantic version tags.

<img src="https://storage-prg1.zerops.io/4gfos-storage/triggerborder_b865860a89.jpg" style="display: block; margin: 0 auto;" alt="Zerops GUI: Triggers" width="500" />

Alternatively, add `zcli push` to your existing CI/CD pipeline if you want full control over when deployments happen.

Learn more about pipeline triggers: https://docs.zerops.io/features/pipeline

### 3. Deploy to production

Create and push a new Git tag to deploy a specific version of your app:

```bash
git tag -a v1.0.0 -m "Release version 1.0.0"
git push origin v1.0.0
```

> [!TIP]
> Open the pipeline detail in the Zerops Dashboard to check the build progress and verify that all steps finish successfully.

### 4. Configure autoscaling

Review the autoscaling settings for your runtime services and databases in Service Settings > Automatic Scaling Configuration in the Zerops Dashboard.

<img src="https://storage-prg1.zerops.io/4gfos-storage/scaling_ac0880aef5.png" style="display: block; margin: 0 auto;" alt="Zerops GUI: Autoscaling configuration" width="500" />

The most important settings are:

```yaml
verticalAutoscaling:
  minRam: 1
  minFreeRamGB: 0.5
  minFreeRamPercent: 20
```

> [!CAUTION]
> Pay attention to `minFreeRamGB`. This value tells Zerops when to scale RAM vertically. Adjust it based on your app’s real memory needs. RAM scales up immediately, while CPU scales after two consecutive measurements below the threshold.

> [!TIP]
> Run a quick stress test with a tool like hey before real users arrive. This helps you see how your app behaves under load and tune the autoscaling settings.

### 5. Set up your domain

To send real traffic to your app, configure public HTTP access in Service Settings > Public Access & Internal Ports in the Zerops Dashboard.

Add your custom domain and point your DNS records to the Zerops IPs shown in the dashboard:

<img src="https://storage-prg1.zerops.io/4gfos-storage/subdomain_8cafd801e8.jpg" style="display: block; margin: 0 auto;" alt="Zerops GUI: Public access and custom domain" width="500" />

```text
Type   Name          Content          TTL
A      example.com   <zerops-ipv4>    Auto
AAAA   example.com   <project-ipv6>   Auto
```

For wildcard domains, add a CNAME record for SSL validation.

Check the public access documentation: https://docs.zerops.io/features/access

> [!TIP]
> When changing DNS records for production, start with a low TTL value. Make sure SSL certificates are active before you disable the fallback Zerops subdomain.

Once everything works, you can disable the Zerops subdomain so all traffic goes through your custom domain.

---

### 🎉 You are good to go!

Your application is live in production and the core setup is complete.

The following sections are optional. They cover extra production features such as log forwarding, backups, and diagnostic access. You can stop here and come back later when you need them.

---

### 6. Set up log forwarding (Optional)

To send logs to an external service, go to Project Settings > Log Forwarding & Logs Overview in the Zerops Dashboard.

You can forward logs to services like Better Stack, Papertrail, or your own self-hosted solution.

Learn more about log forwarding: https://docs.zerops.io/references/logging

### 7. Configure database backups (Optional)

Manage automated encrypted backups in Service Settings > Backups in the Zerops Dashboard.

By default, backups run daily between 00:00 and 01:00 UTC.

Before a major deployment, create a manual protected backup:

```bash
zcli backup create <db-service> --tags pre-deploy,protected
```

Read the backup documentation for more options: https://docs.zerops.io/features/backup

### 8. Set up diagnostic access (Optional)

Use zCLI and VPN access when you need to inspect or maintain services directly.

For runtime services:

```bash
zcli vpn up
ssh <service-name>.zerops
```

For databases, connect through the VPN to reach the project’s private network, or set up secure direct IP access for your database admin tools.

Check the VPN documentation: https://docs.zerops.io/references/cli/commands#vpn-up

## How to integrate app with Zerops

### 1. Adding `zerops.yaml`

The main application configuration file you place at the root of your
repository. It tells Zerops how to build, deploy, and run your application.

```yaml
zerops:
  # prod: optimized SSR build for staging and production deployments.
  # dev: full source deployed for interactive SSH development.
  - setup: prod
    build:
      base: nodejs@22
      # Ubuntu build environment: Vite/Rollup requires glibc binaries
      # unavailable on Alpine's musl libc during the build phase.
      os: ubuntu
      buildCommands:
        # npm ci: reproducible install from lock file (not npm install)
        - npm ci
        # Two-pass build: client assets → dist/, server bundle → server/
        - npm run build
      deployFiles:
        # Qwik City requires node_modules at runtime - not self-contained.
        # The server build externalizes deps; they must ship with the artifact.
        - dist
        - server
        - node_modules
        - package.json
        - migrate.js
      cache:
        - node_modules

    # readinessCheck: new runtime containers must pass before the
    # project balancer routes traffic to them (zero-downtime deploy).
    deploy:
      readinessCheck:
        httpGet:
          port: 3000
          path: /

    run:
      base: nodejs@22
      # initCommands run on every container start, before the app starts.
      # Migrations run here (not in buildCommands) so schema changes and
      # code deploy atomically — no mismatch if deploy rolls back.
      initCommands:
        # zsc execOnce: exactly one container executes across all replicas;
        # others wait. Prevents race conditions with multiple containers.
        - zsc execOnce ${appVersionId} -- node migrate.js
      ports:
        - port: 3000
          httpSupport: true
      envVariables:
        NODE_ENV: production
        DB_NAME: db
        # Referencing pattern: ${hostname_key} resolves to the generated
        # credential for the service with that hostname (e.g., hostname: db).
        DB_HOST: ${db_hostname}
        DB_PORT: ${db_port}
        DB_USER: ${db_user}
        DB_PASS: ${db_password}
      start: node server/entry.express.js

  - setup: dev
    build:
      base: nodejs@22
      # Ubuntu for dev: richer toolset for SSH-based development workflows.
      os: ubuntu
      buildCommands:
        # npm install (not npm ci): flexible for in-progress lock files
        - npm install
      # Deploy full source so the developer has everything via SSH.
      deployFiles: ./
      cache:
        - node_modules

    run:
      base: nodejs@22
      os: ubuntu
      initCommands:
        # Migration still runs in dev — database is ready when SSH opens.
        - zsc execOnce ${appVersionId} -- node migrate.js
      ports:
        - port: 3000
          httpSupport: true
      envVariables:
        NODE_ENV: development
        DB_NAME: db
        DB_HOST: ${db_hostname}
        DB_PORT: ${db_port}
        DB_USER: ${db_user}
        DB_PASS: ${db_password}
      # zsc noop: container stays idle; developer starts the dev server
      # manually via SSH (npm run dev → vite --mode ssr on port 3000).
      start: zsc noop --silent
```

### 🎯 What's next?

**Deploy other environments** — Ready to scale? Deploy additional environments for different stages of your workflow:

- [AI Agent](https://app.zerops.io/recipes/qwik-city-ssr-hello-world.md?environment=ai-agent)
- [Remote (CDE)](https://app.zerops.io/recipes/qwik-city-ssr-hello-world.md?environment=remote-cde)
- [Local](https://app.zerops.io/recipes/qwik-city-ssr-hello-world.md?environment=local)
- [Stage](https://app.zerops.io/recipes/qwik-city-ssr-hello-world.md?environment=stage)
- [Highly-available Production](https://app.zerops.io/recipes/qwik-city-ssr-hello-world.md?environment=highly-available-production)

## Knowledge Base

### Platform Reference

- [Routing & Domains](https://docs.zerops.io/features/access)
- [Scaling](https://docs.zerops.io/features/scaling)
- [Environment Variables](https://docs.zerops.io/features/env-variables)
- [CLI (zcli)](https://docs.zerops.io/references/cli)

### Service Type Reference

**Node.js**

- [Build & Deploy](https://docs.zerops.io/nodejs/how-to/build-pipeline)
- [Customize Runtime](https://docs.zerops.io/nodejs/how-to/customize-runtime)

**PostgreSQL**

- [Connect](https://docs.zerops.io/postgresql/how-to/connect)
- [Backup & Restore](https://docs.zerops.io/postgresql/how-to/backup)
- [Manage](https://docs.zerops.io/postgresql/how-to/manage)
- [Scale](https://docs.zerops.io/postgresql/how-to/scale)

---

## Related Recipes

- [Qwik City Static Hello World](https://app.zerops.io/recipes/qwik-city-static-hello-world.md)
- [Bun Hello World](https://app.zerops.io/recipes/bun-hello-world.md)
- [Go Hello World](https://app.zerops.io/recipes/go-hello-world.md)
- [Zerops showcase](https://app.zerops.io/recipes/zerops-showcase.md)

