Deploying PERN Stack Applications to Production

Introduction

In the previous article, we learned:

• Context API

• Redux Toolkit

• Global state management

• Authentication state

• Redux store

• Actions and reducers

Now it is time to move toward one of the most important stages of development:

Deployment

Deployment means making your application live on the internet so users can access it globally.

A deployed PERN stack application usually includes:

• React frontend hosting

• Node.js backend hosting

• PostgreSQL cloud database

• Domain configuration

• Environment variables

• Production optimization

In this article, we will learn:

• What deployment is

• Frontend deployment

• Backend deployment

• PostgreSQL cloud hosting

• Environment variables

• Production build process

• Domain connection

• Deployment best practices

---

What is Deployment?

Deployment means:

Publishing your application to a live server

Instead of running only on:

localhost

your app becomes accessible globally.

Example:

https://yourapp.com

---

Development vs Production

Development	Production
Local computer	Live internet server
Testing environment	Real users
Debugging enabled	Optimized performance

---

Architecture of a Deployed PERN App

React Frontend
      ↓
Hosting Platform
      ↓
Express Backend API
      ↓
Cloud PostgreSQL Database

---

Popular Hosting Platforms

Purpose	Platform
Frontend	Vercel, Netlify
Backend	Render, Railway
Database	Neon, Supabase

---

Frontend Deployment with Vercel

Vercel is one of the easiest platforms for React deployment.

---

Why Vercel is Popular

Vercel provides:

• Fast deployment

• Free hosting

• Automatic SSL

• GitHub integration

---

Creating Production Build

Inside React project:

npm run build

---

What Does build Do?

npm run build

creates an optimized production version of React application.

---

Build Folder

After build:

client/build

contains optimized frontend files.

---

Deploying React to Vercel

Steps

1. Push project to GitHub

2. Create Vercel account

3. Import GitHub repository

4. Click Deploy

---

GitHub Integration

GitHub automatically updates deployment whenever code changes.

---

Backend Deployment with Render

Render is commonly used for Express backend hosting.

---

Why Render is Good for Beginners

Render provides:

• Free backend hosting

• PostgreSQL support

• Easy deployment

• SSL certificates

---

Preparing Backend for Deployment

Install dotenv:

npm install dotenv

---

Using Environment Variables

Create:

.env

Example:

PORT=5000
DATABASE_URL=your_database_url
JWT_SECRET=mysecret

---

Accessing Environment Variables

require('dotenv').config();

const port = process.env.PORT;

---

Why Environment Variables are Important

Environment variables protect:

• Database credentials

• API keys

• JWT secrets

Never expose secrets publicly.

---

Dynamic Port Setup

Wrong:

app.listen(5000)

Correct:

const PORT = process.env.PORT || 5000;

app.listen(PORT);

---

Production Backend Example

require('dotenv').config();

const express = require('express');

const app = express();

const PORT = process.env.PORT || 5000;

app.listen(PORT, () => {

    console.log(
        `Server running on ${PORT}`
    );
});

---

Cloud PostgreSQL Databases

Instead of local PostgreSQL, production apps use cloud databases.

Popular options:

• Neon

• Supabase

• ElephantSQL

---

What is Neon?

Neon provides serverless PostgreSQL hosting.

---

Why Cloud Databases are Important

Cloud databases provide:

• Backups

• Scalability

• Remote access

• Reliability

---

Connecting Cloud Database

Example:

const pool = new Pool({

    connectionString:
    process.env.DATABASE_URL,

    ssl: {
        rejectUnauthorized: false
    }
});

---

Why SSL is Required

Production databases usually require:

SSL Encryption

for secure communication.

---

Handling CORS in Production

Frontend and backend are hosted on different domains.

Example:

Frontend:
https://myapp.vercel.app

Backend:
https://myapi.onrender.com

---

CORS Configuration

app.use(cors({

    origin:
    'https://myapp.vercel.app'
}));

---

Production API URL

During development:

http://localhost:5000

Production:

https://myapi.onrender.com

---

Using Environment Variables in React

Create:

.env

inside client folder.

Example:

REACT_APP_API_URL=https://myapi.onrender.com

---

Accessing React Environment Variables

process.env.REACT_APP_API_URL

---

Example API Request

fetch(

    `${process.env.REACT_APP_API_URL}/students`
);

---

Why Production Builds are Optimized

Production build:

• Removes unnecessary files

• Compresses JavaScript

• Improves performance

---

What is Minification?

Minification means:

Removing unnecessary spaces and characters

to reduce file size.

---

Domain Names

Instead of:

myapp.vercel.app

you can use custom domains:

myapp.com

---

Popular Domain Providers

Provider	Purpose
Namecheap	Domain purchase
GoDaddy	Domain hosting
Google Domains	Domain management

---

Connecting Domain

Typical process:

1. Buy domain

2. Add DNS records

3. Connect with hosting platform

---

What is DNS?

DNS stands for:

Domain Name System

It connects domain names with servers.

---

HTTPS and SSL

Production apps should always use:

HTTPS

---

Why HTTPS is Important

HTTPS provides:

• Encryption

• Security

• Safe authentication

• Secure payments

---

Deployment Workflow

Write Code
    ↓
Push to GitHub
    ↓
Hosting Platform Deploys
    ↓
Users Access Application

---

Continuous Deployment

Modern platforms automatically redeploy when:

• New commits are pushed

• GitHub updates

This is called:

Continuous Deployment

---

Logging in Production

Production apps should log:

• Errors

• Requests

• Server crashes

Useful tools:

• Morgan

• Winston

---

Installing Morgan

npm install morgan

---

Example Morgan Setup

const morgan = require('morgan');

app.use(morgan('dev'));

---

Common Deployment Errors

CORS Errors

Fix using:

cors()

properly.

---

Environment Variables Not Working

Restart server after changing:

.env

---

Database Connection Failure

Check:

• DATABASE_URL

• SSL configuration

• Network access

---

Build Errors

Always run:

npm run build

before deployment testing.

---

Best Practices

Use Separate Development and Production Databases

Never test directly on production database.

---

Protect Environment Variables

Never upload:

.env

to GitHub.

---

Optimize Images

Compressed images improve loading speed.

---

Monitor Backend Logs

Check logs regularly for:

• Errors

• Failed requests

• Crashes

---

Real-World Deployment Architecture

Large applications use:

• CDN networks

• Load balancers

• Docker containers

• Kubernetes clusters

• CI/CD pipelines

---

What is CI/CD?

CI/CD stands for:

Continuous Integration / Continuous Deployment

It automates:

• Testing

• Building

• Deployment

---

Real-World Platforms Using Similar Architecture

Modern platforms like:

• Netflix

• Amazon

• Facebook

• Swiggy

• Zomato

use scalable cloud deployment systems.

---

Conclusion

You have now learned how to deploy PERN stack applications to production.

You learned:

• Frontend deployment

• Backend hosting

• Cloud databases

• Environment variables

• Production builds

• HTTPS

• Domains

• CI/CD basics

Now your PERN stack applications are ready to be used by real users on the internet.