Beginner's Guide: Setting up a local MERN Stack development environment on Windows, Linux, and macOS

Sandeep Singh -
0


Are you ready to dive into the world of MERN stack development? If you're new to web development, don't worry! The MERN stack is one of the most popular and powerful tech stacks used by developers for building full-stack web applications. In this beginner's tutorial, we'll guide you through the steps of setting up your local environment on Windows, Linux, and macOS, so you can start building apps using MongoDB, Express.js, React, and Node.js.

What is the MERN Stack?

The MERN stack consists of the following technologies:

  1. MongoDB - A NoSQL database that stores data in flexible, JSON-like documents.
  2. Express.js - A lightweight web framework for Node.js to build backend APIs.
  3. React - A powerful JavaScript library for building user interfaces, primarily used for frontend development.
  4. Node.js - A runtime environment that allows JavaScript to be run on the server side.

Step 1: Install Prerequisites

Before setting up the MERN stack, you need to install a few key tools. The following tools are needed for all operating systems:

  • Node.js (Includes npm - Node Package Manager)
  • MongoDB
  • Git (Optional but recommended)

A. Installing Node.js

Node.js is the heart of the MERN stack and is essential for both frontend and backend development. Here's how to install it on your system:

On Windows:

  1. Go to Node.js official website and download the Windows installer.
  2. Run the installer and follow the setup instructions. Ensure you check the option to install npm (Node Package Manager) during the installation process.
  3. After installation, open Command Prompt and verify installation by typing:
    4. node -v npm -v

On macOS:

  1. You can install Node.js using Homebrew, a package manager for macOS. First, make sure Homebrew is installed by running:
    2. /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
  2. Once Homebrew is installed, run the following command to install Node.js:
    3. brew install node
  3. Verify the installation by typing:
    4. node -v npm -v

On Linux:

  1. Open your terminal and update your package index:
    2. sudo apt update
  2. Install Node.js by running:
    3. sudo apt install nodejs npm
  3. Verify the installation:
    4. node -v npm -v

B. Installing MongoDB

MongoDB is a NoSQL database used in MERN stack applications to store and retrieve data.

On Windows:

  1. Go to the MongoDB download page and download the latest stable release for Windows.
  2. Run the installer and follow the prompts. Choose the "Complete" installation type.
  3. Once installed, open Command Prompt and start MongoDB by running:
    4. mongod MongoDB will now run in the background.

On macOS:

  1. Open your terminal and install MongoDB using Homebrew:
    2. brew tap mongodb/brew brew install mongodb-community
  2. After installation, start MongoDB with the following command:
    3. brew services start mongodb/brew/mongodb-community

On Linux:

  1. Install MongoDB by running:
    2. sudo apt install -y mongodb
  2. Start MongoDB using the following command:
    3. sudo systemctl start mongodb
  3. Enable MongoDB to start automatically on boot:
    4. sudo systemctl enable mongodb

Step 2: Install Git (Optional but Recommended)

Git is a version control system that allows you to manage your codebase. While not strictly necessary, it’s highly recommended for collaborative projects and version control.

On Windows:

  1. Go to the Git download page and download the installer.
  2. Follow the setup instructions and make sure to select the option to add Git to your system’s PATH during the installation process.

On macOS and Linux:

Git is typically pre-installed on these systems. To check if Git is already installed, run:

git --version

If it’s not installed, you can install it using Homebrew on macOS:

brew install git

And on Linux:

sudo apt install git

Step 3: Install the MERN Stack Dependencies

Now that you have the necessary tools installed, let's install the libraries and frameworks for the MERN stack.

A. Installing Express.js (Backend)

Express.js is a minimal and flexible Node.js web application framework that is crucial for backend development.

  1. 1. Open your terminal or command prompt and create a new directory for your project:
    2. mkdir mern-project cd mern-project
  2. Initialize a new Node.js project:
    3. npm init -y This will create a package.json file that will manage your project dependencies.
  3. Install Express.js:
    4. npm install express

B. Installing React (Frontend)

React is a powerful library for building user interfaces.

  1. Create a new React application inside your project directory:
    2. npx create-react-app client
  2. This will automatically install React and create a directory named client with a default React app structure.

C. Install MongoDB Driver

MongoDB is essential for data storage, and you need to connect it to your Node.js server. Install the MongoDB driver with the following command:

npm install mongodb

Step 4: Create a Simple Backend API

  1. Inside the mern-project directory, create an index.js file. This will be the entry point for your backend server. // index.js const express = require('express'); const app = express(); const port = 5000; app.get('/', (req, res) => { res.send('Hello from the backend!'); }); app.listen(port, () => { console.log(`Server running on http://localhost:${port}`); });
  2. Run the server: node index.js
  3. Open your browser and go to http://localhost:5000. You should see "Hello from the backend!" displayed.

Step 5: Create a Simple React Frontend

  1. Go to the client directory: cd client
  2. Open the src/App.js file and replace the content with: import React from 'react'; function App() { return (

    Hello from React!

    ); } export default App;
  3. Start the React development server: npm start
  4. Open your browser and go to http://localhost:3000. You should see "Hello from React!" displayed.

Step 6: Connecting the Frontend and Backend

To make your MERN app fully functional, you'll need to connect the frontend (React) with the backend (Express). This involves making API calls from React to Express.

  1. In client/src/App.js, replace the content with: import React, { useEffect, useState } from 'react'; function App() { const [message, setMessage] = useState(''); useEffect(() => { fetch('http://localhost:5000') .then((response) => response.text()) .then((data) => setMessage(data)); }, []); return (

    {message}

    ); } export default App;
  2. Restart both the React and Express servers:
    • In the React client folder: npm start
    • In the main mern-project folder: node index.js

Now, when you refresh the React app, it will fetch the message from the Express backend.

Conclusion

Congratulations! You've just set up a local MERN stack environment on your system. You now have the tools to build powerful web applications with MongoDB, Express.js, React, and Node.js.

Happy coding, and good luck building your MERN applications! Feel free to explore more advanced topics like authentication, state management, and deployment as you progress.

Tags:

Post a Comment

Previous Post Next Post