DEV Community: Khuzaima Khalid

Episode 3: Setting Up a Managed PostgreSQL Database on Azure & Connecting Your Express API

Khuzaima Khalid — Sun, 09 Aug 2026 15:45:24 +0000

In Episode 1, we hosted an Express API on Azure App Service, and in Episode 2, we deployed a React frontend to Azure Static Web Apps. Now, we will connect our full-stack application to a managed, production-ready relational database: Azure Database for PostgreSQL Flexible Server.

In this guide, we will provision a PostgreSQL instance, configure its firewall rules, secure connection credentials using environment variables, and query the database directly from our Express backend.

Prerequisites
Before getting started, make sure you have:

The Express project from Episode 1 running locally and on Azure.

PostgreSQL client tool or extension installed (such as pgAdmin, DBeaver, or the PostgreSQL extension in VS Code).

An active Azure Account (or Azure for Students).

Visual Studio Code installed.

Step 1: Create an Azure Database for PostgreSQL Flexible Server

Search for Azure Database for PostgreSQL flexible servers in the top search bar and click Create.

Configure the Basics tab:

Subscription: Select your subscription.

Resource Group: Choose the same resource group used in Episode 1 (e.g., rg-express-azure).

Server name: Choose a unique server name (e.g., pg-express-db-server).

Region: Select the same region as your App Service.

Workload type: Select Development or Hobby to stay cost-effective.

Authentication method: Select PostgreSQL authentication only.

Admin username: Set an admin username (e.g., pgadmin).

Password: Enter a strong password and save it securely.

Move to the Networking tab:

Connectivity method: Select Public access (allowed IP addresses).

Check Allow public access from any Azure service within Azure to this server (this allows your Azure App Service to connect).

Click + Add current client IP address so you can connect locally from your development machine.

Click Review + create, then click Create. Wait 2–3 minutes for deployment to complete.

Step 2: Install PostgreSQL Client in Express

Open your local Express project in VS Code and install the official PostgreSQL node driver (pg) along with dotenv to manage secrets locally:

npm install pg dotenv

Step 3: Configure Local Environment Variables

Create a .env file in the root of your Express project (ensure .env is added to your .gitignore file):

PORT=5000
DB_HOST=pg-express-db-server.postgres.database.azure.com
DB_USER=pgadmin
DB_PASSWORD=YourStrongPassword123!
DB_NAME=postgres
DB_PORT=5432

Step 4: Create Database Connection Module

Create a file named db.js in your Express project root:

const { Pool } = require('pg');
require('dotenv').config();

const pool = new Pool({
  host: process.env.DB_HOST,
  user: process.env.DB_USER,
  password: process.env.DB_PASSWORD,
  database: process.env.DB_NAME,
  port: process.env.DB_PORT || 5432,
  ssl: {
    rejectUnauthorized: false // Required for Azure PostgreSQL SSL connections
  }
});

pool.on('connect', () => {
  console.log('Connected to Azure PostgreSQL database successfully.');
});

module.exports = pool;

Step 5: Update Your Express API Routes

Update your index.js or server.js file to verify the connection and query data:

const express = require('express');
const cors = require('cors');
const pool = require('./db');
require('dotenv').config();

const app = express();
const PORT = process.env.PORT || 5000;

app.use(cors());
app.use(express.json());

// Root endpoint testing DB connection time
app.get('/', async (req, res) => {
  try {
    const result = await pool.query('SELECT NOW()');
    res.json({
      message: 'Express API is running and connected to Azure PostgreSQL!',
      serverTime: result.rows[0].now
    });
  } catch (err) {
    console.error('Database connection error:', err.message);
    res.status(500).json({ error: 'Database connection failed' });
  }
});

app.listen(PORT, () => {
  console.log(`Server listening on port ${PORT}`);
});

Test it locally by running node index.js and visiting http://localhost:5000.

Step 6: Configure Environment Variables in Azure App Service

Never commit passwords or database host credentials to GitHub. To pass credentials securely to your live Azure deployment:

Go to the Azure Portal and open your App Service resource from Episode 1.

In the left menu, under Settings, select Environment variables (or Configuration).

Under App settings, click + Add to add each variable:

DB_HOST = pg-express-db-server.postgres.database.azure.com

DB_USER = pgadmin

DB_PASSWORD = YourStrongPassword123!

DB_NAME = postgres

DB_PORT = 5432

Click Apply at the bottom, then click Confirm. Your App Service will restart automatically with the new environment variables active.

Step 7: Push Changes and Verify Deployment

Push your updated code to GitHub:

git add .
git commit -m "Add PostgreSQL connection logic"
git push origin main

Once your CI/CD pipeline or deployment finishes, visit your live Azure App Service URL in the browser (https://.azurewebsites.net/). You should see the success response along with the real-time timestamp generated directly by your Azure PostgreSQL database!

Common Issues & Troubleshooting

error: no pg_hba.conf entry for host...: Azure PostgreSQL requires SSL connections by default. Ensure ssl: { rejectUnauthorized: false } is included in your pg Pool configuration.

Connection Timeout / ECONNREFUSED:

Check the Networking firewall rules on your PostgreSQL server in Azure. Make sure "Allow public access from any Azure service within Azure" is checked.

Credentials Exposed:

Ensure .env is listed inside your .gitignore file so database keys are never pushed to GitHub.

📚 Helpful Resources & Documentation

1. https://learn.microsoft.com/azure/postgresql/single-server/overview?wt.mc_id=studentamb_512515
2. https://code.visualstudio.com/docs/nodejs/nodejs-tutorial?wt.mc_id=studentamb_512515
3. https://learn.microsoft.com/azure/app-service/overview-security?wt.mc_id=studentamb_512515
4. https://azure.microsoft.com/free/students/?wt.mc_id=studentamb_512515

Episode 2: How to Deploy a React SPA to Azure Static Web Apps for Free

Khuzaima Khalid — Fri, 07 Aug 2026 11:21:46 +0000

Now that our Express API from Episode 1 is deployed and running in the cloud, the next step is hosting the frontend. If you build React applications with Vite or Create React App, deploying them to a traditional web server can be overkill and unnecessarily expensive.

In this guide, we will deploy a React single-page application (SPA) to Azure Static Web Apps. It comes with a generous free tier, global content delivery network (CDN) distribution, automatic SSL certificates, and direct integration with your API.

Prerequisites
Before starting, make sure you have:

Node.js and npm installed.

A GitHub account with a repository for your React project.

An active Azure Account. You can grab free student credits via Azure for Students:

https://azure.microsoft.com/free/students/?wt.mc_id=studentamb_512515

Visual Studio Code installed. Download it directly from VS Code Docs:

https://code.visualstudio.com/docs?wt.mc_id=studentamb_512515

Step 1: Create Your React Application

If you already have a React app ready, push it to a GitHub repository and skip to Step 2. Otherwise, let's create a fast React app using Vite:

npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install

Open src/App.jsx and replace its content to connect to our Episode 1 Express backend:

import { useEffect, useState } from 'react';
import './App.css';

function App() {
  const [apiData, setApiData] = useState(null);

  useEffect(() => {
    // Replace with your live Azure App Service URL from Episode 1
    fetch('https://<your-app-name>.azurewebsites.net/')
      .then((res) => res.json())
      .then((data) => setApiData(data))
      .catch((err) => console.error('API Error:', err));
  }, []);

  return (
    <div style={{ textAlign: 'center', marginTop: '50px', fontFamily: 'sans-serif' }}>
      <h1>React + Azure Static Web Apps</h1>
      <p>Status from Express Backend:</p>
      {apiData ? (
        <pre style={{ background: '#f4f4f4', padding: '15px', display: 'inline-block', borderRadius: '5px' }}>
          {JSON.stringify(apiData, null, 2)}
        </pre>
      ) : (
        <p>Loading backend status...</p>
      )}
    </div>
  );
}

export default App;

Push this project to a new GitHub repository on your profile.

Step 2: Create the Azure Static Web App Resource

Sign in to the Azure Portal:

https://portal.azure.com/?wt.mc_id=studentamb_512515

Search for Static Web Apps in the top search bar and click Create.

Fill in the basic configuration:

Subscription: Select your active subscription.

Resource Group: Select existing or create new (e.g., rg-react-azure).

Name: my-react-static-app

Plan type: Select Free: For hobby or personal projects.

Region: Pick a region closest to your users (e.g., East US or West Europe).

Step 3: Link GitHub and Deployment Details

Under Deployment Details, select GitHub as the source.

Click Sign in with GitHub and authorize Azure.

Select your GitHub Organization, Repository, and Branch (usually main).

Under Build Details, select the preset for your framework:

Build Presets: Select Vite (or React if using Create React App).

App location: /

Api location: Leave blank for now.

Output location: dist (for Vite) or build (for CRA).

Click Review + Create, then click Create.

Step 4: Automated GitHub Actions CI/CD Pipeline

Once Azure provisions the resource, it automatically generates a GitHub Actions workflow file inside your repository at .github/workflows/.

Go to your GitHub repository and click the Actions tab.

You will see a workflow running titled Azure Static Web Apps CI/CD.

Wait about 1–2 minutes for the workflow to complete.

Once finished, open your Static Web App resource in the Azure Portal, locate the URL, and open it in your browser.

Your React app is now globally distributed on Azure with HTTPS enabled out of the box.

Common Issues & Troubleshooting

Blank Screen / 404 on Refresh: If using React Router, single-page routing might break on refresh. Add a staticwebapp.config.json file to your public/ folder with fallback routes:

{
  "navigationFallback": {
    "rewrite": "/index.html"
  }
}

Failed Build Step: Ensure your package.json includes the standard "build": "vite build" script and that your output directory (dist or build) matches what you specified in Step 3.

📚 Helpful Resources & Documentation

Official Azure Static Web Apps Documentation:

https://learn.microsoft.com/azure/static-web-apps/?wt.mc_id=studentamb_512515

Get Started with Azure Free for Students:

https://azure.microsoft.com/free/students/?wt.mc_id=studentamb_512515

Configure Static Web Apps Routing:

https://learn.microsoft.com/azure/static-web-apps/configuration?wt.mc_id=studentamb_512515

In the next episode, we'll look at how to set up a managed PostgreSQL database on Azure and connect it safely to our Node.js backend using environment variables.

Episode 1: Deploying Your First Node.js & Express API to Azure App Service

Khuzaima Khalid — Wed, 05 Aug 2026 11:57:41 +0000

When I built my first Express API, running it on localhost:5000 felt great until I wanted to share it with someone else. Sending local endpoints to teammates or setting up temporary tunnels like ngrok gets annoying fast.
If you build backends with Node.js and Express, pushing your API to the cloud is a fundamental skill. In this guide, we will take a simple Express API and deploy it to Azure App Service so you have a live, HTTPS-enabled production URL.

Prerequisites

Before diving into the setup, make sure you have the following ready:

Node.js installed on your local machine.
An active Azure Account. If you don't have one, grab the Azure for Students plan which gives you free credits without needing a credit card:

https://azure.microsoft.com/free/students/?wt.mc_id=studentamb_512515

Visual Studio Code with the Azure App Service extension installed. You can download the editor directly from VS Code Docs:

https://code.visualstudio.com/docs?wt.mc_id=studentamb_512515

Step 1: Set Up Your Express Server
If you already have a Node.js project, you can skip to Step 2. Otherwise, let's create a minimal Express server.

Initialize a new directory and install Express:

Bash
mkdir express-azure-demo
cd express-azure-demo
npm init -y
npm install express dotenv

Create a file named server.js in the root folder:
JavaScript

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

// Azure dynamically assigns a PORT environment variable
const PORT = process.env.PORT || 5000;

app.use(express.json());

app.get('/', (req, res) => {
    res.json({
        message: 'Express API is running smoothly on Azure App Service!',
        status: 'Success',
        timestamp: new Date()
    });
});

app.get('/api/health', (req, res) => {
    res.status(200).json({ status: 'UP' });
});

app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});

Important Rule for Azure: package.json

Azure needs to know how to start your application once it deploys the code. Open your package.json and ensure your scripts section includes a start command:

JSON
"scripts": {
"start": "node server.js"
}

Step 2: Create the App Service Resource

There are multiple ways to deploy—using the Azure CLI, Git integration, or VS Code. Using VS Code is the straightest path for a quick deployment:

Open your project folder in Visual Studio Code.
Click on the Azure icon in the left sidebar.
Sign in to your Azure account if prompted.
Under the App Service section, click the + (Plus) button to create a new Web App.
Enter a unique name for your API (e.g., my-express-api-2026).
Select your runtime stack: Node.js (LTS version).
Select the Free (F1) pricing tier for testing. Azure will spend about a minute provisioning your server environment.

Step 3: Deploy the Code

Once the resource creation finishes, deploying your code takes just a few clicks:

In VS Code, open the Command Palette (Ctrl+Shift+P on Windows/Linux or Cmd+Shift+P on macOS).
Type and select Azure App Service: Deploy to Web App...
Select your project folder (express-azure-demo).
Select the Web App resource you created in Step 2.
A popup will ask if you want to overwrite previous deployments. Click Deploy. VS Code will package your files, upload them to Azure, run npm install inside the cloud environment, and execute npm start.

Step 4: Verify Your API Live
Once the deployment output window displays "Deployment successful," copy your app's public URL:

https://.azurewebsites.net
Open your browser or Postman and hit the URL. You should get back the JSON response:
JSON
{
"message": "Express API is running smoothly on Azure App Service!",
"status": "Success",
"timestamp": "2026-08-05T16:35:23.000Z"
}

Common Issues & Troubleshooting

• 502 Bad Gateway / Application Error: Check your port setup. Make sure your code relies on process.env.PORT instead of hardcoding 5000 or 3000. Azure handles internal routing dynamically using its own port mapping.
• Missing Dependencies: Ensure node_modules is listed in your .gitignore file so VS Code doesn't try to upload local modules. Let Azure run npm install on its own server.

📚 Helpful Resources & Documentation

• Official Azure App Service Documentation:
https://learn.microsoft.com/azure/app-service/?wt.mc_id=studentamb_512515

• Get Started with Azure Free for Students:
https://azure.microsoft.com/free/students/?wt.mc_id=studentamb_512515
• Visual Studio Code Node.js Tutorial Guide:
https://code.visualstudio.com/docs/nodejs/nodejs-tutorial?wt.mc_id=studentamb_512515

In the next episode, we'll look at how to take a React frontend, host it for free on Azure Static Web Apps, and connect it directly to this Express backend.