Setting Up Your MERN Stack Development Environment (PART 2)

Setting Up Your MERN Stack Development Environment

In our first post, we introduced the MERN stack and discussed why it’s a powerful framework for building full-stack web applications. Now, let’s dive into setting up your development environment so you’re ready to start building!

1. Installing Node.js and npm

Node.js is the backbone of your MERN stack, as it allows JavaScript to run on the server side. When you install Node.js, it includes npm (Node Package Manager), which you’ll use to manage libraries and dependencies for both the backend and frontend.

• Download Node.js: Visit nodejs.org and download the latest stable version. Follow the installation instructions.
• Verify Installation: Open your terminal and type:

  node -v
  npm -v

You should see the version numbers if the installation was successful.

2. Setting Up MongoDB

MongoDB is where your data will be stored. You have two options for setting up MongoDB: install it locally, or use MongoDB Atlas (a cloud database).

• Option A: Local MongoDB Installation: Download MongoDB Community Edition from mongodb.com and follow the setup instructions. Run the MongoDB service by typing:

  mongod

This starts MongoDB on your local machine.

• Option B: MongoDB Atlas: Sign up at mongodb.com/cloud/atlas and create a new cluster. Atlas provides a URI connection string, which you’ll use later to connect your backend to MongoDB.

3. Creating the Project Structure

In this series, we’ll organize the project into two main directories: backend for the server (Express/Node) and frontend for the client (React). Let’s start setting up the structure.

1. Create a Folder for Your Project:

   mkdir mern-project
   cd mern-project

1. Set Up the Backend:

   • Create a backend folder:

    mkdir backend
    cd backend
   

• Initialize npm and install dependencies:
  

   npm init -y
   npm install express mongoose dotenv
  

  • Express: The backend framework for creating server routes.
  • Mongoose: A MongoDB object modeling tool for managing schemas.
  • dotenv: Allows us to use environment variables (e.g., MongoDB URI).

• Create the main entry file for the server:
  

   touch index.js
  

1. Set Up the Frontend:

   • In the mern-project directory, create a frontend folder:

    cd ..
    npx create-react-app frontend
   

   This will scaffold a basic React app inside the frontend folder. Verify it works by running:
   

    cd frontend
    npm start
   

• Your React app should open in the browser at http://localhost:3000.

4. Writing a Simple Express Server

With the backend and frontend directories in place, let’s get our server running. Go to the backend folder and edit index.js:

// backend/index.js
const express = require("express");
const mongoose = require("mongoose");
const dotenv = require("dotenv");

dotenv.config();

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

app.get("/", (req, res) => {
  res.send("Hello from the MERN backend!");
});

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

Now add a .env file in the backend folder with any environment variables (e.g., MONGO_URI if using MongoDB Atlas). Run the server with:

node index.js

5. Connecting MongoDB to Express with Mongoose

In your index.js, add a connection to MongoDB using Mongoose.

mongoose.connect(process.env.MONGO_URI, { useNewUrlParser: true, useUnifiedTopology: true })
  .then(() => console.log("Connected to MongoDB"))
  .catch(err => console.log(err));

Replace process.env.MONGO_URI with your actual MongoDB URI if you’re not using a .env file.

Next Steps

Now that we have our environment set up, we’re ready to start building a REST API with Express, which will let our frontend React app interact with MongoDB. Stay tuned for Post 3, where we’ll cover MongoDB basics and build CRUD functionality on the backend!