Upgrading My Java Spring Boot + React ToDo App: Setting Up for Local Testing

 After organizing my codebase into a dedicated /dev folder to isolate local revisions from production, the next big task was getting the app fully functional for local development and testing. My project had been set up primarily for deployment on Railway, which meant environment variables, CORS configuration, and endpoint access were all geared toward production. So, I had to carefully backtrack and make the necessary changes to restore local development support.

---

Step 1: Reverting to Local Database and Backend

I ensured my application.properties (or application-dev.properties) pointed to the local MySQL/PostgreSQL instance rather than Railway's cloud database. This included adjusting:

1 2 3 4

spring.datasource.url=jdbc:mysql://localhost:3306/tododb spring.datasource.username=root spring.datasource.password= server.port=8080

Step 2: Fixing CORS for Localhost

Originally, the SecurityConfig was allowing only Railway’s frontend origin (https://optimistic-creativity-production-e88d.up.railway.app). That broke things when I started testing from http://localhost:3000.

To fix that, I updated the CorsConfigurationSource bean like this:

1 2 3 4

config.setAllowedOrigins(List.of( "http://localhost:3000", "https://optimistic-creativity-production-e88d.up.railway.app" ));

This way, both local development and deployed environments can access the backend APIs.

---

Step 3: Fixing the Login Flow in React

My Login.js component was originally making two fetch requests: one to /api/auth/login (which is correct), and a second one to /api/todos, which still pointing to the railway server based app.

I cleaned that up by keeping only the necessary login fetch:

1 2 3 4 5 6 7 8 9 10 11 12 13 14

const reslogin = await fetch("http://localhost:8080/api/auth/login", { method: "POST", headers: { Authorization: "Basic " + btoa(`${username}:${password}`), }, }); if (reslogin.ok) { const data = await reslogin.json(); setAuth(username, password, data.role); navigate("/", { replace: true }); } else { setError("Invalid credentials. Please try again."); }

This eliminated the unnecessary and failing fetch to /api/. I continued same process for the listing/editing/deleting/marking as complete of tasks.

---

Step 4: Testing with curl Locally

To verify my endpoints independently, I used curl from the command line:

1 2 3

curl -X POST -H "Content-Type: application/json" \ -d "{\"username\":\"user1\",\"password\":\"pass123\"}" \ http://localhost:8080/api/auth/signup

And tested a secure POST to the protected endpoint with:

1 2 3

curl -X POST -u user1:pass123 -H "Content-Type: application/json" \ -d "{\"title\":\"Write blog post\"}" \ http://localhost:8080/api/todos

Everything returned the expected response, confirming the backend was working fine locally.

---

Final Thoughts

Migrating back from production to local development isn't always as straightforward as flipping a switch—especially when security configurations, CORS policies, and environment-specific properties are involved. But with careful setup, testing, and cleanup, my fullstack Java Spring Boot + React ToDo app is now ready for efficient local testing.