**Tags:** "Hello World" Examples · React # React Router SSR Hello World A minimal server-side rendered application built with [React Router v7](https://reactrouter.com) on [Zerops](https://zerops.io), connecting to a PostgreSQL database. Includes ready-made environment configurations for every stage of the development lifecycle - from AI agent workspaces through local development to highly-available production. ### Available Environments - [AI Agent](https://app.zerops.io/recipes/react-router-ssr-hello-world.md?environment=ai-agent) - [Remote (CDE)](https://app.zerops.io/recipes/react-router-ssr-hello-world.md?environment=remote-cde) - [Local](https://app.zerops.io/recipes/react-router-ssr-hello-world.md?environment=local) - [Stage](https://app.zerops.io/recipes/react-router-ssr-hello-world.md?environment=stage) - **Small Production** ← current - [Highly-available Production](https://app.zerops.io/recipes/react-router-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/react-router-ssr-hello-world-app](https://github.com/zerops-recipe-apps/react-router-ssr-hello-world-app) - **db** (postgresql@18) :5432, :6432 - Containers: 1 × Shared Core, 0.38 GB RAM, 1 GB Disk **Total Resources:** 4 containers, 1.12 GB RAM, 3 GB Disk ### One-Click Deploy (Import YAML) Use this YAML with `zcli project import` to deploy this environment: ```yaml # React Router v7 SSR hello world - small production environment. # Balanced production setup with auto-scaling and a minimum # of two containers for basic availability. project: name: react-router-ssr-hello-world-small-prod services: # app: production setup with horizontal scale-floor. # buildFromGit pulls source + zerops.yaml from the public repo # and runs the 'prod' setup. - hostname: app type: nodejs@22 zeropsSetup: prod buildFromGit: https://github.com/zerops-recipe-apps/react-router-ssr-hello-world-app enableSubdomainAccess: true # minContainers: 2 ensures the project balancer always has at # least two containers to route to - one container going down # for any reason does not cause downtime. minContainers: 2 # Zerops vertically autoscales RAM (and CPU when DEDICATED) # within these bounds. minRam is the guaranteed floor; # minFreeRamGB is headroom reserved above the current usage # so the container does not OOM on SSR traffic spikes. verticalAutoscaling: minRam: 0.25 minFreeRamGB: 0.125 # PostgreSQL for application data. Priority 10 starts data # services before app containers, preventing connection errors # on first boot. - hostname: db type: postgresql@18 # NON_HA: single-node database suitable for moderate traffic. # Upgrade to HA mode for workloads requiring data redundancy. mode: NON_HA priority: 10 ``` --- ## 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/react-router-ssr-hello-world.md?environment=small-production&guideFlow=template) or [Integrate Flow](https://app.zerops.io/recipes/react-router-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/react-router-ssr-hello-world-app](https://github.com/zerops-recipe-apps/react-router-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 ``. Zerops GUI: Locating the Service Name ### 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. Zerops GUI: Triggers 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. Zerops GUI: Autoscaling configuration 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: Zerops GUI: Public access and custom domain ```text Type Name Content TTL A example.com Auto AAAA example.com 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 --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 .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 # React Router v7 SSR hello world recipe for Zerops. # Two setups: 'prod' for production/stage deployments, # 'dev' for SSH-based interactive development. zerops: - setup: prod build: base: nodejs@22 # Alpine lacks the glibc Rollup binary needed by Vite/React Router. # Ubuntu provides the glibc variant. Runtime deps (pg, # react-router-serve) are pure JS - they run fine on the # Alpine runtime container below. os: ubuntu buildCommands: # npm ci installs exact locked versions for reproducible builds. - npm ci - npm run build deployFiles: # React Router v7 is NOT self-contained - the server bundle # requires node_modules at runtime (unlike Nitro-based # frameworks that bundle all deps into a single output dir). - build - node_modules - package.json # Migration script runs in initCommands, not buildCommands, # so it must be deployed alongside the application code. - migrate.js cache: # Cache node_modules between builds so npm ci only fetches # changed packages, not the entire dependency tree. - node_modules deploy: # Readiness check: Zerops starts a new runtime container, # waits for this HTTP check to pass, then routes traffic from # the project balancer - zero-downtime deployment by default. readinessCheck: httpGet: port: 3000 path: / run: base: nodejs@22 initCommands: # Migrations run here (not buildCommands) so schema changes # deploy atomically with the application code. If the deploy # fails after migration, the old code still matches the old # schema. zsc execOnce ensures exactly one container runs the # migration per version even when minContainers > 1. - zsc execOnce ${appVersionId} -- node migrate.js ports: - port: 3000 httpSupport: true envVariables: NODE_ENV: production # DB_NAME is the PostgreSQL database name, which matches # the service hostname in Zerops by convention. DB_NAME: db # ${db_hostname} references the generated env var for the # 'db' service - resolved by Zerops at deploy time using # the {hostname}_{key} pattern. DB_HOST: ${db_hostname} DB_PORT: ${db_port} DB_USER: ${db_user} DB_PASS: ${db_password} start: npx react-router-serve build/server/index.js - setup: dev build: base: nodejs@22 # Ubuntu for richer SSH toolset - curl, vim, git all available # without extra prepareCommands. os: ubuntu buildCommands: # npm install (not ci) - dev environment may have uncommitted # or absent lock file during initial setup. - npm install # Deploy full source code so the developer can edit files, # run the dev server, and iterate without rebuilding the image. deployFiles: ./ cache: - node_modules run: base: nodejs@22 os: ubuntu initCommands: # Same migration as prod - database is ready when you SSH in. - zsc execOnce ${appVersionId} -- node migrate.js ports: - port: 3000 httpSupport: true envVariables: NODE_ENV: development # PORT=3000 so `npm run dev` binds to the expected port. PORT: "3000" DB_NAME: db DB_HOST: ${db_hostname} DB_PORT: ${db_port} DB_USER: ${db_user} DB_PASS: ${db_password} # Container stays idle - developer connects via SSH and drives # the dev server manually: `npm run dev` 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/react-router-ssr-hello-world.md?environment=ai-agent) - [Remote (CDE)](https://app.zerops.io/recipes/react-router-ssr-hello-world.md?environment=remote-cde) - [Local](https://app.zerops.io/recipes/react-router-ssr-hello-world.md?environment=local) - [Stage](https://app.zerops.io/recipes/react-router-ssr-hello-world.md?environment=stage) - [Highly-available Production](https://app.zerops.io/recipes/react-router-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 - [React Router Static Hello World](https://app.zerops.io/recipes/react-router-static-hello-world.md) - [React (Vite) Static Hello World](https://app.zerops.io/recipes/react-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)