From Localhost to Azure: Deploying My Full-Stack App to the Cloud

 

Over the past few weeks(months), I’ve been working on a full-stack web application called Farmsah, designed to help farmers manage their farms, track weather forecasts, and analyze agricultural insights. After completing most of the local development, I decided to take the next step: migrating the entire project to a production-ready environment on Microsoft Azure.

Here’s a breakdown of the full migration process — what worked, what didn’t, and what I learned along the way.

Background, this was all running on my laptop, redis server, postgres and node.js.

✅ 1. Project Overview

Tech Stack:

• Frontend: React with React Router, Leaflet for map functionality

• Backend: Node.js + Express

• Database: PostgreSQL

• Session Management: express-session with connect-redis

• Authentication: Session-based auth with route protection middleware

• Hosting Goal: Deploy backend and database to Azure, frontend to Vercel

2. Preparing the Database for Cloud Deployment

Local to Cloud Migration:

• I was using PostgreSQL locally during development. To migrate:

1. I created a Flexible Server on Azure Database for PostgreSQL.

a. I Chose the smallest size, it’s about $20 a month

2. Used pgAdmin and the Azure portal to manage user roles, access rules, and IP whitelisting.

3. Exported my local database using pg_dump and restored it using psql to the Azure-hosted instance

pg_dump -U <username> -h <host> -d <dbname> -f <output_file.sql>

a. pg_dump made sense as my database only held my user that I had been using for testing

Key Tables:

• users, farms, crops, weather_reports, and others.

• All foreign key relationships and constraints were preserved during the migration.

🔧 3. Updating Environment Variables and Configs

To ensure a smooth transition:

• Switched all .env variables to production values (e.g. Azure database host, port, user).

• Replaced localhost Redis and PostgreSQL credentials with their cloud equivalents.

• Updated CORS settings in the backend to allow requests from the Netlify-deployed frontend. Struggled to get my backend server to respend to my frontend and create a user in my auth routes. My frontend uses dynamic rendering, you only get access to the home routes once the backend sends you a session cookie. My backend wasn’t responding. Fixed this with some hefty configuration on the azure console

🧠 4. Redis Setup for Session Management

Azure doesn’t allow Redis with all configurations by default unless you use the Azure Cache for Redis service, which is not available under the free tier in most regions.

This was the easiest of all, spun up a server 250mb under my resource group. Put it under the same network, let it be accesible by my backend, this was essential as this supplied the cookies.

🚀 5. Backend Deployment on Azure

After testing everything locally with the new production environment variables:

1. Created a GitHub repo and connected it to Azure App Service for continuous deployment.

2. Pushed the Node.js backend to GitHub with a production-ready ecosystem.config.js and Procfile.

3. Configured the App Service to install dependencies and start the Express server on deployment.

4. Ensured all secrets (DB URL, Redis host, etc.) were added securely via Azure's Application Settings.

The CI/CD is the best part of all of this, github Actions? The best, I always saw it under the github student developer pack and wondered if I’ll ever need it. Yes, so any push to the main branch triggers a jest test, once these tests pass we have it deployed to my backend server. Critical because once I finished development I realised most of my backend logic was conveninet for localhost and pipeline breaking in the production state

🌐 6. Frontend Deployment to Vercel

Vercel was used for the frontend because of its simplicity and CI/CD support from GitHub:

• The React app was pushed to a separate GitHub repo.

• Environment variables (such as backend base URL) were set in Vercel’s build settings.

• After deployment, I updated DNS and CORS settings to reflect the Vercel domain.

• Side note, I saw options to integrate backends direcly into netlify and possible same domain? Would’ve made things easier but some reason I don’t like one platform having all power over me

🔐 7. Authentication and Session Testing

The most challenging part was ensuring sessions persisted and authenticated correctly:

• Protected routes under /user/* were enforced using middleware (isAuthenticated).

• I tested session validation using the /protected/user/home route to ensure the session cookie was transmitted securely.

• Faced 401 Unauthorized errors initially due to mismatches in frontend-backend domain cookies and missing CORS credentials, which were resolved by:

Biggest learning curve here, I think I’m moving to JWT Authentication for my next projects.

🌤 8. Weather API Integration

Using OpenWeatherMap, I set up:

• Real-time weather fetch from frontend (Leaflet map to lat/lon).

• Backend route to fetch and store 7-day forecasts into weather_reports.

• PostgreSQL CRON job to auto-update forecasts daily (to be implemented next).

💡 Lessons Learned

• Azure's platform is powerful but can be overwhelming with its granular service configuration.

• Environment variable consistency and CORS config are critical in full-stack deployments.

• Redis setup on Azure Free Tier can be limiting — alternative session strategies may be needed.

• Continuous deployment via GitHub on both frontend and backend saved significant time.

🧭 Next Steps

• Monitor performance and error logs with Azure Monitor

• Launch alpha testing with real users and integrate feedback loops.

• Polish up some features, I had to scale back some features because I noticed if I build to much locally, I’ll struggle moving to production, this is my first attempt at an actual deployed full stack app.

🎯 Final Thoughts

The cloud is revolutionary, I’ve spent hours on the GCP mostly on cloud security, but I’ve touched on deployments and CI/CD on the cloud and those skills translated here, gave me more confidence.

DevOps and DevSecOps seem to be an interesting career path with the rise of cloud, my love for the backend really showed here, I enjoyed fighting the CLI more than React? My deployed version is very much bare bones, just a skeleton as I figured deployment will be more difficult when it’s larger. Next steps would be a model in the backend that can handle the insights, I’m thinking whether to integrate a LLM API or create my own model. Any thoughts?

If you're a developer transitioning from local to cloud infrastructure, I'd be happy to chat or help out!

#AzureDeployment #FullStackDevelopment #PostgreSQL #Redis #React #NodeJS #DevJourney #CloudMigration #Farmsah