Setting Up Your First PERN Stack Development Environment

Introduction

In the previous article, we learned about the basics of the PERN stack and understood how PostgreSQL, Express.js, React.js, and Node.js work together to build modern web applications.

Now it is time to take the next step — setting up your complete PERN stack development environment. Before building any project, developers need to install the required tools and configure their system properly.

In this article, we will learn:

• Required software for PERN stack development

• Installing Node.js

• Installing PostgreSQL

• Installing VS Code

• Setting up React

• Creating backend and frontend folders

• Running your first PERN project

---

Requirements for PERN Stack Development

Before starting, make sure your system has:

• Internet connection

• Minimum 4GB RAM

• Windows, Linux, or macOS

• Basic understanding of JavaScript

---

Step 1: Install Node.js

What is Node.js?

Node.js allows JavaScript to run outside the browser. It is required for both backend development and managing packages.

It also installs npm (Node Package Manager) automatically.

---

How to Install Node.js

For Windows

1. Visit the official website:

   • https://nodejs.org

2. Download the LTS Version

3. Run the installer

4. Keep clicking Next

5. Finish installation

---

Verify Installation

Open Command Prompt and type:

node -v

Example output:

v22.0.0

Now check npm:

npm -v

If both commands work, Node.js is installed successfully.

---

Step 2: Install Visual Studio Code

What is VS Code?

Visual Studio Code is one of the most popular code editors for web development.

---

Install VS Code

1. Visit:

   • https://code.visualstudio.com

2. Download for your operating system

3. Install normally

---

Recommended Extensions

Install these extensions from VS Code marketplace:

• ES7+ React Snippets

• Prettier

• PostgreSQL

• Thunder Client

• Material Icon Theme

These extensions improve productivity and make development easier.

---

Step 3: Install PostgreSQL

What is PostgreSQL?

PostgreSQL is the database used in the PERN stack.

It stores application data such as:

• User accounts

• Test scores

• Products

• Orders

• Messages

---

Install PostgreSQL

1. Visit:

   • https://www.postgresql.org/download/

2. Download PostgreSQL

3. Run installer

4. During installation:

   • Set password carefully

   • Remember the port number (default: 5432)

5. Install pgAdmin along with PostgreSQL

---

Verify PostgreSQL Installation

Open pgAdmin and connect using your password.

Create a test database to ensure everything works correctly.

---

Step 4: Create Project Folder

Create a folder for your PERN project.

Example:

PERN_Project

Inside it create two folders:

client
server

Folder Structure

PERN_Project
│
├── client
└── server

• client → React frontend

• server → Express backend

---

Step 5: Setup React Frontend

Now open terminal inside the project folder.

Run:

npx create-react-app client

This command creates a React application.

---

Start React Application

Move inside client folder:

cd client

Run the project:

npm start

Your browser will open:

http://localhost:3000

Congratulations! Your React frontend is working.

---

Step 6: Setup Express Backend

Now open another terminal.

Move to server folder:

cd server

Initialize Node.js project:

npm init -y

---

Install Required Packages

npm install express cors pg nodemon

Package Explanation

Package	Purpose
express	Backend framework
cors	Connect frontend and backend
pg	PostgreSQL driver
nodemon	Auto restart server

---

Step 7: Create Basic Express Server

Inside server folder create:

index.js

Add this code:

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

const app = express();

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

app.get('/', (req, res) => {
    res.send('PERN Backend Running');
});

app.listen(5000, () => {
    console.log('Server started on port 5000');
});

---

Run Backend Server

Run command:

node index.js

Or using nodemon:

npx nodemon index.js

Output:

Server started on port 5000

---

Step 8: Test Backend in Browser

Open:

http://localhost:5000

You should see:

PERN Backend Running

This means your backend is working successfully.

---

Understanding the Full Workflow

Now your PERN setup is ready.

Current Architecture

React Frontend  →  Express Backend  →  PostgreSQL Database

• React handles UI

• Express handles APIs

• PostgreSQL stores data

---

Common Beginner Mistakes

1. Node Command Not Working

Solution:

• Restart system

• Reinstall Node.js

---

2. Port Already in Use

Solution:

• Change port number

• Close running applications

---

3. PostgreSQL Password Forgotten

Solution:

• Reinstall PostgreSQL or reset password

---

4. React App Not Starting

Solution:
Run:

npm install

Then:

npm start

---

Benefits of Proper Environment Setup

A properly configured environment helps you:

• Develop faster

• Avoid errors

• Manage projects efficiently

• Deploy applications smoothly

---

Conclusion

You have successfully set up your first PERN stack development environment. Now your system is ready for building full-stack web applications.

In the next article, we will learn how to:

• Connect PostgreSQL with Node.js

• Create databases and tables

• Perform CRUD operations

• Build your first API

This is where real backend development begins.