Step-by-Step Guide: How to Set Up the MERN Stack for Your Web App

on

I would be happy to assist you in setting up a MERN stack for your web development needs. 
MERN is a popular and powerful combination of technologies for building full-stack web applications using JavaScript. It consists of MongoDB (a NoSQL database), Express (a Node.js framework), React (a JavaScript library for building user interfaces), and Node.js (a JavaScript runtime).

To set up the MERN stack, you will need to have the following tools installed on your machine:



Here are the steps to set up the MERN stack:

Step 1: Setting up the Node.js environment
Open your terminal or command prompt and create a new directory using the following command:
 > mkdir my-mern-app

Change the directory to the newly created directory using the following command:
 > cd my-mern-app

To start a new Node.js project, you can use the command to initialize it:
 > npm init -y
Running this command will create a new Node.js project and generate a package.json file with default settings.

Step 2: Installing Express

Install the Express framework by typing the following command in your terminal:
 > npm install express
In your project directory, generate a new file called server.js.

Add the following code to server.js:


This code sets up a basic Express server that listens on port 5000 and responds with "Hello World!" when you visit the root URL.

Run the server using the following command:
 > node server.js

This should start the server and output "Server running on port 5000" in your terminal.
Visit http://localhost:5000 in your web browser to see the "Hello World!" message.

Step 3: Installing and setting up MongoDB

  • Download and install MongoDB from the official website.
  • Create a new folder on your machine to store the MongoDB data. For example, you can create a folder named data in your project directory.
Open a new terminal or command prompt window and start the MongoDB server by typing the following command:
This should start the MongoDB server and output some logs in your terminal.
 > mongod --dbpath=./data

In a new terminal or command prompt window, open the MongoDB shell by typing the following command:
This should start the MongoDB shell and show a prompt.
 > mongo

Create a new database using the following command:
This will create a new database named my_mern_app.
 > use my_mern_app

Step 4: Installing React and setting up the client-side

Open a new terminal or command prompt window and navigate to your project directory and use the following command to install the create-react-app tool:
 > npx create-react-app client

Once the installation is complete, navigate to the client directory using the following command:
 > cd client

Start the client-side server using the following command:
 > npm start

This should start the React development server and open a new tab in your default web browser.
That's it! You have successfully set up the MERN stack

Check out these other blogs from Interntuts for the MERN introduction and brief.

Comments

Post a Comment