Error Ticket: 502 Error in Vite/React Deployment on Railway

Date: July 2, 2025

Problem Description

After a successful deployment of a Vite/React application on Railway, the application returns an HTTP 502 (Bad Gateway) error when attempting to access the public URL. This indicates that the Railway proxy cannot communicate correctly with the application's server.

Application Details

• Framework: React

• Build Tool: Vite

• Deployment Platform: Railway

Relevant Configuration

1. vite.config.js:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
  server: {
    port: 8080, // Port for development
  },
  preview: {
    port: 8080, // Port for the preview server (production)
  },
})

2. package.json scripts:

{
  "name": "ozmapfrontend",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview" // Script used for preview/production
  },
  // ... other dependencies
}

3. Railway Network Configuration:

• Port configured in Railway:4173 (according to the provided screenshot).

• Start Command in Railway: Currently empty or not specified for vite preview.

Observations and Initial Diagnosis

1. The vite.config.js configuration explicitly sets both the development server (server.port) and the preview server (preview.port) to listen on port 8080.

2. The preview script in package.json executes vite preview, meaning the Vite preview server will attempt to listen on port 8080.

3. The network configuration in Railway for the OZmapFrontend service is set to listen on port 4173.

Most probable cause of the 502 error: There is a port mismatch. The Vite application is attempting to start its preview server on port 8080, while Railway is configured to route traffic to port 4173. This causes Railway to not find a service listening on the expected port, thus returning a 502 error.

Proposed Solutions

1. Adjust the Port in Railway:

   • Change the "Port" in the "Networking" section of Railway for the OZmapFrontend service from 4173 to 8080.

   • Optional (if preferring to keep 4173): Modify vite.config.js so that preview.port is 4173. However, the first option is more direct given the current vite.config.js.

2. Configure the Start Command in Railway:

   • In the "Deploy" section of Railway, in the "Custom Start Command" field, add:

     vite preview --host 0.0.0.0 --port 8080
     
     

     This ensures Vite listens on all network interfaces (necessary in container environments) and explicitly on port 8080.

3. Re-deploy the Service:

   • After making the changes, force a new deployment of the service in Railway.

4. Monitor Logs:

   • During and after deployment, check the service logs in Railway to confirm that Vite starts correctly and that the server is listening on port 8080.