DEV Community

Daksh kumawat
Daksh kumawat

Posted on

full stack deployment

I Deployed My First Full-Stack App and Everything Broke. Here's What I Learned

Building a full-stack app on your laptop is one thing. Putting it on the internet is another. During my internship at Valentius Kryptix, I deployed a task manager with a Django REST Framework backend and a React frontend, and almost every step produced an error I had never seen locally. Here is a short summary of what broke and what fixed it.

The backend runs on Render with a managed PostgreSQL database, and the frontend, built with React and Vite, runs on Vercel. Users register and log in with JWT authentication, and each user only sees their own tasks.

The bugs, in the order they hit me

CORS blocked everything. The frontend loaded, but every API call failed with a network error. Browsers refuse requests to a different origin unless the backend explicitly allows it, so I whitelisted the exact Vercel domain instead of allowing every origin.

The database was empty. Registration returned a server error because the new PostgreSQL database had no tables. Migrations had never run, and Render's free tier has no shell or release command, so I added the migrate step to the build command.

Refreshing a page gave a 404. React Router handles routes in the browser, so the server had no file at /tasks. A small rewrite rule in vercel.json that sends every path to index.html fixed it.

Secrets were hardcoded. Moving the secret key, database URL and API base URL into environment variables let the same code run locally and in production without committing anything sensitive to Git.

What I would tell anyone deploying for the first time

Most deployment failures are configuration problems, not code problems, so read the logs before changing any code. Then test the live site like a stranger would. I only noticed that my app had no sign-up page because I tried registering a brand-new account on the deployed version, something local testing had never forced me to do.

My quick checklist now: environment variables set in the dashboard, migrations applied, CORS lists the real frontend domain, a rewrite rule exists for client-side routing, and a fresh account can register, log in and complete every CRUD action on the live site.

Deploying early and in small steps makes every failure easier to trace. Debugging one broken piece is far less painful than debugging five at once, and each fix I made taught me something about how the frontend, the API and the database actually fit together in production.

Read the full article: 4 Important Things to Consider While Taking Full-Stack App Live

Top comments (0)