P5.4: Backend Deployment

Your local Express server is ready! Now we must deploy it to the cloud so that users around the world can access your API.

In this final phase lesson, we will secure our configurations using environment variables, handle cross-origin constraints, and deploy our server.

1. Environment Variables (.env)

You must never commit secret credentials (like database passwords, API keys) directly into your git repository. Instead, store them in a local .env file and read them using dotenv.

Step 1: Install dotenv

npm install dotenv

Step 2: Create a .env file (Add to .gitignore!)

PORT=5000
MONGODB_URI=mongodb+srv://admin:my-secret-password@cluster.mongodb.net/db

Step 3: Load env variables in your server code

require('dotenv').config();

const port = process.env.PORT || 5000;
const dbUri = process.env.MONGODB_URI;

2. Managing CORS (Cross-Origin Resource Sharing)

By default, web browsers block frontend code (e.g. running on http://localhost:3000) from requesting resources from a backend API running on a different domain (e.g. http://localhost:5000). This is a security constraint called CORS.

To allow your frontend to query your backend API, install and configure the cors middleware:

npm install cors

const express = require('express');
const cors = require('cors');
const app = express();

// Enable CORS for all incoming requests
app.use(cors());

// Or limit to your frontend domain:
app.use(cors({
  origin: 'https://nextsem.online'
}));

3. Deployment Platforms

You can host Express backend APIs on several popular cloud hosting platforms:

• Render (Recommended): Free tier, easy Git integration, auto-builds.
• Railway: Quick deployments, great database support.
• Fly.io: Fast global container-based server hosting.

Step-by-Step Render Deployment Guide:

1. Push your backend code repository to GitHub (ensure .env is not pushed).
2. Create an account on Render.com.
3. Select New -> Web Service -> Link your GitHub repository.
4. Set the Start Command to node server.js or npm start.
5. Go to the Environment settings tab and enter your production MONGODB_URI and PORT values.
6. Click Deploy Web Service. Render will build and host your API live!

4. Full-Stack Data Flow

Once deployed, your frontend uses JavaScript fetch to request data from your live backend URL, completing the full-stack loop:

┌──────────────────┐               Request (fetch API)               ┌──────────────────┐
│  React Frontend  │ ══════════════════════════════════════════════► │  Express Server  │
│  (Next.js App)   │ ◄────────────────────────────────────────────── │  (Render Cloud)  │
└──────────────────┘               Response (JSON data)              └──────────────────┘