Running a React App with Node.js, npm, and MongoDB

This Dev Note outlines a common full-stack JavaScript workflow using React for the frontend, Node.js and npm for development and package management, and MongoDB for data storage.

The goal here is not to exhaust every option in the JavaScript ecosystem. It is to provide a practical mental model and a straightforward local workflow for running a React application backed by a Node-based API and a MongoDB database.

Frontend

React application running in the browser

Backend

Node.js server, often using Express

Database

MongoDB for storing application data

What Each Piece Does

React handles the user interface
Node.js runs JavaScript on the server
npm installs and manages project packages
MongoDB stores structured application data as documents

A common setup is for React to run as the frontend while Node.js provides an API that talks to MongoDB.

Browser / React App
        ↓
   HTTP Requests
        ↓
 Node.js / Express API
        ↓
      MongoDB

A Common Project Structure

A typical local setup often has separate frontend and backend folders:

project-root/
  client/   → React frontend
  server/   → Node / Express backend

This keeps UI code and backend/API logic separate while still allowing them to work together in one application.

Step 1 — Make Sure Node.js and npm Are Installed

To check whether Node.js and npm are available, open a terminal and run:

node --version
npm --version

If both commands return version numbers, the basic tooling is installed.

Installing Node.js normally installs npm as well.

Step 2 — Install Project Dependencies

The frontend and backend usually each have their own package.json file and their own dependencies.

Frontend

cd client
npm install

Backend

cd ../server
npm install

This installs the packages required by each part of the application.

Step 3 — Start MongoDB

MongoDB must be running before the backend can successfully connect to the database. How this is done depends on the local environment.

Examples might include:

running MongoDB as a local service
starting it manually in a terminal
running it through Docker

The important point is that the backend will typically need a connection string, such as:

mongodb://localhost:27017/appdb

In development, this is often stored in an environment file such as .env.

Step 4 — Start the Backend Server

Once dependencies are installed and MongoDB is available, start the backend:

cd server
npm start

Some projects use a dev script instead:

npm run dev

If the backend uses Express, it will usually start listening on a port such as 3001, 4000, or another configured port.

Step 5 — Start the React Frontend

In a separate terminal, start the React app:

cd client
npm start

or, depending on the tooling:

npm run dev

This launches the frontend development server, often on a port such as 3000 or 5173.

How the Frontend and Backend Work Together

The React frontend usually makes HTTP requests to the backend API. The backend performs business logic, talks to MongoDB, and returns data.

A common example is:

React component
    ↓ fetch('/api/items')
Backend route
    ↓ query database
MongoDB returns documents
    ↓
Backend sends JSON response
    ↓
React updates the UI

This is one of the key differences between a static frontend and a full-stack app. The frontend is no longer just serving files; it is talking to an application server.

Typical Local Development Workflow

Start MongoDB
Start the backend server
Start the React frontend
Open the frontend in the browser
Use the app while the frontend makes requests to the backend

This means a local development workflow often involves multiple running processes, not just a single server.

Common Mistakes

Backend not running

The React frontend may load normally while API requests fail because the Node backend has not been started.

MongoDB not running

The backend may start but fail when it tries to connect to the database.

Wrong connection string

A typo in the MongoDB URL or database name can prevent the backend from connecting.

Port confusion

The React frontend and Node backend usually run on different ports in development. It is important to know which service is running where.

Missing environment variables

If the backend expects values in a .env file, the application may fail even when the code itself is fine.

Where MongoDB Fits Especially Well

MongoDB is often a reasonable fit when application data is naturally document-shaped or when the project benefits from flexible schemas during early development.

It is commonly paired with JavaScript-based stacks because JSON-like document handling fits naturally with frontend and backend JavaScript workflows.

A Brief Note on Mobile Apps

A similar backend pattern can also support a mobile application. For example, a React Native app can communicate with the same kind of Node.js API and MongoDB-backed server used by a web application.

The mobile client changes, but the backend architecture can remain largely the same.

A Simple Summary

React → user interface
Node.js / Express → backend API
MongoDB → stored data
npm → package and script management

Together, these pieces form a very common full-stack JavaScript workflow for building interactive applications.

A useful next Dev Note could go deeper into Express routes, MongoDB connection setup, or the differences between static frontend workflows and API-backed application workflows.