React Router v7 app with SSR

Introduction

React Router v7 has evolved into a comprehensive full-stack web framework that prioritizes user interface development while leveraging web standards to create fast, responsive, and resilient applications. This guide walks you through deploying a React Router v7 application on ZaneOps.

Live demo

You can find a production version of this application at: https://guestbook.fredkiss.dev

Prerequisites

• A working ZaneOps instance. If you need help with installation, refer to our ZaneOps setup guide.

Deployment Process

Project Overview

We’ll be working with a fully-featured guestbook application built with React Router v7. You can clone or fork the repository:

git clone https://github.com/zane-ops/guestbook.git

This application showcases several key features:

• Authentication: login/register with username+password with sessions stored in Redis
• Data persistence: Message storage in PostgreSQL with Drizzle ORM
• Modern architecture: Full server-side rendering with progressive enhancement (works even with JavaScript disabled)

Creating a ZaneOps Project

Log in to your ZaneOps dashboard and create a new project named guestbook:

Configuring Database and Caching Services

Setting up Redis with Valkey

First, we’ll create a Redis-compatible service using Valkey, an open-source Redis alternative:

1. Create a Docker service with the valkey/valkey image:
2. Deploy the service:
3. Verify the deployment status on the service details page:

Setting up PostgreSQL

Next, let’s configure a PostgreSQL database service:

1. Create a Docker service using the official postgres image:

2. Configure the necessary environment variables by navigating to the service details page and selecting the environment variables tab:

3. Click Add from .env and enter these database credentials:

    POSTGRES_DB="guestbook"
    POSTGRES_USER="guestbook"
    POSTGRES_PASSWORD="guestbook"

   

4. Configure data persistence by adding a volume in the settings tab set it’s container path to /var/lib/postgresql/data :

5. Review your configuration and deploy the service:

Deploying the Main Application

Now let’s deploy the guestbook application itself:

1. Create a new Git service using the repository url https://github.com/zane-ops/guestbook:

2. Configure the authentication environment variables:

   SESSION_DOMAIN="guestbook.127-0-0-1.sslip.io"
   SESSION_SECRET="yoursupersecretvalue"
   SESSION_SECURE="false"

   

   Note

   For production environments, always set SESSION_SECURE to true to enforce HTTPS for session authentication.

3. Configure database and cache connection strings using service network aliases:

   First, locate the Redis network alias on the Redis service details page > settings > Networking section:

   Add the Redis connection string as an environment variable:

   REDIS_URL="redis://<redis_network_alias>:6379"

   

   Next, locate the PostgreSQL network alias on the PostgreSQL service details page > settings > Networking section:

   Add the PostgreSQL connection string as an environment variable:

   DATABASE_URL="postgresql://guestbook:guestbook@<postgres_network_alias>:5432/guestbook"

   

4. Configure public access by adding a domain: Navigate to the service details page > settings > Networking section > URLS and create a URL entry with:

   • Domain: guestbook.127-0-0-1.sslip.io
   • Forwarded port: 3000 (the application’s listening port)

   

5. Implement a health check to ensure reliable deployments: Navigate to service details page > settings > Deploy section > Healthcheck and configure:

   • Type: Path
   • Value: /api/health
   • Listening port: 3000

   

6. Review all configuration changes and deploy the service:

7. Monitor the deployment logs to ensure everything is working correctly:

8. Once deployed successfully, your application will be available at http://guestbook.127-0-0-1.sslip.io

Setting Up Continuous Deployment

Automate your deployment workflow with GitHub Actions to update your application whenever changes are pushed to your repository:

1. Get your ZaneOps deployment webhook URL: Navigate to main app service details page > settings > Deploy section > deploy webhook url

2. Store your secrets in GitHub: Navigate to GitHub repository > settings > secrets and variables > actions and add:

   • DEPLOY_WEBHOOK_URL: Your ZaneOps webhook URL

3. Create a GitHub Actions workflow file in your repository:

   .github/workflows/ci.yaml

   name: Deploy
   on:
     push:
       branches: [main] # customize as needed
   jobs:
     build-push-app:
       name: Build and Deploy Guestbook
       runs-on: ubuntu-latest
       steps:
           - name: Checkout
             uses: actions/checkout@v4
           - name: Deploy to ZaneOps
             run: curl -f -o /dev/null -X PUT "${{ secrets.DEPLOY_WEBHOOK_URL }}"

4. With this workflow in place, changes pushed to your main branch will automatically trigger a new build and deployment