Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Pewiz/ulagos360/llms.txt

Use this file to discover all available pages before exploring further.

Shipping ULagos 360° to production involves two independent pieces: a static frontend (a Vite-compiled SPA that produces a dist/ folder you can host anywhere) and a Socket.IO backend running on Railway. This page covers the frontend deployment process and the steps needed to connect it correctly to the backend. The backend repository is managed separately; you only need access to its CORS configuration.

​
Architecture Overview

┌─────────────────────────────┐          ┌──────────────────────────────────────┐
│   Static Frontend (SPA)     │          │   Socket.IO Backend (Railway)        │
│                             │  WSS /   │                                      │
│   Vercel / Netlify / CDN    │◄────────►│   ulagos360-backend-production       │
│   dist/ (HTML + JS + CSS)   │  HTTPS   │   .up.railway.app                    │
└─────────────────────────────┘          └──────────────────────────────────────┘
The frontend is a pure client-side React app. There is no server-side rendering, no API routes, and no build-time secrets — npm run build produces static assets that any CDN or static host can serve.

​
Steps

1

Build the production bundle

Run the Vite production build from the project root:
npm run build
Vite compiles and minifies the React app into the dist/ directory. The output is self-contained: dist/index.html plus hashed JS and CSS chunks. You do not need Node.js on the server to serve these files.Optionally, verify the build locally before deploying:
npm run preview
This serves dist/ at http://localhost:4173 so you can confirm everything loads correctly.
2

Deploy dist/ to a static host

Push the dist/ folder to your preferred static hosting platform. Both Vercel and Netlify support Vite projects with zero configuration — see the platform-specific instructions in the Vercel vs Netlify section below.Because ULagos 360° is a single-page app, configure your host to redirect all 404 requests back to index.html so that client-side routing works correctly.
3

Update the backend URL in source

The Socket.IO server URL is hardcoded in src/hooks/useSocketConnection.js. Open that file and locate the io(...) call inside the setupSocket function:
src/hooks/useSocketConnection.js
socketRef.current = io(
  "https://ulagos360-backend-production.up.railway.app",
  {
    transports: ["polling", "websocket"],
    upgrade: true,
    timeout: 30000,
    reconnection: true,
    reconnectionDelay: 2000,
    reconnectionAttempts: 5,
    // ...
  }
);
Replace the URL string with the address of your own backend if you are running a private instance, then rebuild with npm run build.
There is no .env file or VITE_ environment variable wiring for the backend URL out of the box. The URL lives directly in source. If you want to externalise it, add const BACKEND_URL = import.meta.env.VITE_BACKEND_URL and set the variable in your host’s environment settings — then rebuild.
4

Configure CORS on the Railway backend

The Socket.IO backend must explicitly list your deployed frontend domain in its CORS configuration. Without this, browser preflight requests will be rejected and no WebSocket connection can be established.In the backend repository, locate the Socket.IO server initialisation (typically index.js or server.js) and add your frontend domain to the cors.origin array — for example:
const io = new Server(httpServer, {
  cors: {
    origin: [
      "https://your-frontend.vercel.app",
      "https://your-custom-domain.com",
    ],
    methods: ["GET", "POST"],
  },
});
Redeploy the backend on Railway after making this change.

​
Vercel vs Netlify

Vercel detects Vite projects automatically when you import the repository.Steps:
  1. Go to vercel.com/new and import the ulagos360 repository.
  2. Vercel sets the Framework Preset to Vite, the Build Command to npm run build, and the Output Directory to dist — no changes needed.
  3. Click Deploy.
SPA fallback — add a vercel.json at the project root to redirect all routes to index.html:
vercel.json
{
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}
Custom backend URL — the backend URL is hardcoded directly in src/hooks/useSocketConnection.js. To point to a different backend, edit that string in source and redeploy. Optionally, you can refactor the file to read from import.meta.env.VITE_BACKEND_URL and then set that variable in Project Settings → Environment Variables.

​
CORS Warning

If you deploy the frontend to a new domain and forget to add that domain to the Socket.IO backend’s CORS origin list, the browser will block every connection attempt with a CORS error. The app will load visually but will show a persistent “disconnected” state and no real-time updates will work. Always update CORS before pointing real tutors at the new URL.

​
Environment Considerations

SettingLocationHow to change
Backend Socket.IO URLsrc/hooks/useSocketConnection.js — hardcoded string in io(...)Edit the string directly, or refactor to use import.meta.env.VITE_BACKEND_URL
Socket.IO transport orderSame file — transports: ["polling", "websocket"]Swap to ["websocket"] only if your host and backend both support sticky sessions
Reconnection attemptsSame file — reconnectionAttempts: 5Increase for unstable network environments
localStorage key for spacessrc/stores/spacesStore.js — Zustand persist middlewareChange the name option in the persist config if you need to avoid collisions with other apps on the same origin

Build docs developers (and LLMs) love

Get started for freeTalk to us