Deploying a React Frontend to Railway: A Complete Guide (To-Do App)

 If you've already deployed your Java Spring Boot backend to Railway, congratulations — the hardest part is done! 🎉

Now it’s time to deploy your React frontend. Compared to the backend, this will be a breeze. In this guide, I’ll walk you through the entire process of pushing your frontend to GitHub and deploying it to Railway — step-by-step.

---

🧱 Project Structure Recap

Your project likely looks something like this:

Your API is already live at something like:

https://todo-production-40cc.up.railway.app/api/todos

Let’s now put the frontend online.

✅ Step 1: Update API Route in React

Open your /frontend/src/App.js file and update the API URL:

const API_URL = "https://todo-production-40cc.up.railway.app/api/todos";

Replace the old "http://localhost:8080" value to point to your deployed backend.

✅ Step 2: Prepare React App for Deployment

Inside your frontend folder:

Remove the .git folder

Push the changes to github using the following commands:

git rm --cached frontend

git add frontend 

git commit -m "Fix: add frontend as regular folder"

git push origin main 

✅ Step 3: Deploy Frontend on Railway

1. Go to Railway

2. Click “New Project”

3. Choose “Deploy from GitHub Repo”

4. Select your todo repository

5. When prompted for project settings:

   • Root directory: frontend

   • Install command: npm install

   • Build command: npm run build

   • Start command: npx serve -s build

   • (Optional): Predeploy command: npm install -g serve

6. Click Deploy 🚀

---

✅ Step 4: Fix the Port (IMPORTANT)

By default, serve runs on port 8080, but Railway expects port 3000 unless you say otherwise.

Fix:

1. Go to your project > Settings 

2. Generate the domain.

3. Use: PORT = 8080 when asked.

4. Save. Railway will redeploy.

 You should see your React To-Do app, fully functional and connected to your backend!

You may check out my live todo web app at:

https://optimistic-creativity-production-e88d.up.railway.app/