A Beginner's Guide to Running a MERN Stack Application Locally

Running a MERN (MongoDB, Express.js, React.js, Node.js) stack application locally is a crucial step in the development process. This guide aims to walk beginners through the steps required to set up and run a MERN application on their local machine. By following these steps, you’ll have a fully functional MERN application running locally, ready for development or testing.

1. Install Required Software:
Before getting started, ensure that you have the following software installed on your machine:

Node.js: Visit the official Node.js website (https://nodejs.org) and download the latest version for your operating system. Follow the installation instructions provided.
Note: In this tutorial, I am using a MongoDB online URI.

2. Set Up MongoDB Atlas:

• MongoDB Atlas is a cloud-based database service that allows you to set up, manage, and scale MongoDB databases easily.
• Sign up for a free account on the MongoDB Atlas website (https://www.mongodb.com/cloud/atlas).
• Create a new cluster, choosing the free tier option.
• Once your cluster is created, click on the “Connect” button and choose “Connect Your Application”.
• Copy the connection string provided, which includes your MongoDB username, password, and cluster address.

Paste the connection string into .env file with following name MONGODB_CONNECT_STRING.

**3. Create a New React Project:

• Open a terminal window and navigate to the directory where you want to create your MERN project.
• Run the following command to create a new React App using Create React App:

npx create-react-app my-react-app

• Once the project is created, navigate into the project directory:

cd my-react-app

4. Set Up Express.js Backend:

• In your project directory, create a new directory named server to hold your Express.js backend code:

mkdir server

• Navigate into the server directory:

cd server

• Initialize a new Node.js project by running:

npm init -y

• Install Express.js and Mongoose (MongoDB object modeling tool) as dependencies:

npm install express mongoose

• Create a new file named server.js and write your index.js backend code in this file. Use the MongoDB Atlas connection string to connect to your database.

5. Connect React Frontend with Express Backend:

• In the client directory of your React project, update the package.json file to include a proxy to your Express backend. Add the following line:

"proxy": "http://localhost:5000"

• This configuration allows your React frontend to communicate with the Express backend.

**6. Start the Development Servers:”

• Open two terminal windows, one for the client and one for the server.
• In the first terminal, navigate to the client directory of your React project and start the React development server:

cd my-react-app/client
npm start

• In the second terminal, navigate to the server directory and start the Express.js server:

cd my-react-app/server
node index.js

7. Test Your Application:

• Open a web browser and navigate to http://localhost:3000 to view your React frontend.
• Test the functionality of your application to ensure that the frontend and backend are communicating correctly.

Congratulations! You’ve successfully set up and run a MERN stack application locally on your machine, utilizing MongoDB Atlas as the cloud-based database solution. This guide has provided you with the essential steps to get started with MERN development. From here, you can further customize and expand your application based on your project requirements.

Happy coding!