Pointing the Frontend at Railway

Your React app currently points at http://localhost:3000. In production it needs to point at your Railway API. The standard approach is an environment variable that Vite swaps at build time.

Vite environment variables

Vite exposes environment variables to your app if their name starts with VITE_:

# .env.development (used by npm run dev)
VITE_API_URL=http://localhost:3000

# .env.production (used by npm run build)
VITE_API_URL=https://your-app.railway.app

Read the variable in your API client:

src/api/apiClient.ts

import axios from 'axios'

const apiClient = axios.create({
  baseURL: import.meta.env.VITE_API_URL,
})

export default apiClient

import.meta.env.VITE_API_URL is replaced with the actual string at build time — not at runtime. When you run npm run build, Vite bundles the production value directly into the output files.

Finding your Railway URL

In the Railway dashboard, open your backend service. The URL is shown under Settings → Networking → Public Domain. It looks like https://bulletin-api-production-xxxx.up.railway.app.

Committing .env files safely

.gitignore

.env.local
.env.*.local

Vite’s .env.development and .env.production files don’t contain secrets (only a public URL), so they can be committed. Never commit .env.local or any file containing API keys, database credentials, or JWT secrets.

CORS on the deployed backend

When the frontend is deployed to GitHub Pages and the backend is on Railway, they’re on different domains — CORS applies. Check your Express CORS config:

// src/index.ts (backend) — update if needed
app.use(cors({
  origin: [
    'http://localhost:5173',                     // Vite dev server
    'https://your-github-username.github.io',    // GitHub Pages
  ],
}))

Add the GitHub Pages origin to the allowed list. Redeploy to Railway after the change.

Testing the production config locally

You can run Vite in production mode without deploying:

npm run build && npm run preview

npm run preview serves the built output locally on port 4173. It uses .env.production values — a quick way to confirm the production URL is wired correctly before you push.

Exercise

Open src/api/apiClient.ts in your Bulletin frontend project.

1. Create .env.development with VITE_API_URL=http://localhost:3000.
2. Create .env.production with VITE_API_URL=https://your-app.railway.app (use your actual URL).
3. Update apiClient.ts to use import.meta.env.VITE_API_URL as the baseURL.
4. Run npm run dev and confirm the app still works against local backend.
5. Update your backend CORS config to include your GitHub Pages domain and push it to Railway.

Recap

• VITE_ prefix exposes env vars to the browser bundle via import.meta.env.VITE_*.
• .env.development is used by npm run dev; .env.production is used by npm run build.
• Values are baked in at build time — not read at runtime.
• Update backend CORS to include the GitHub Pages domain before deploying.