How to setup and run the MERN stack project in VS Code
What is MERN Stack:
The MongoDB, Express.js, React.js, and Node.js stacks make up the MERN stack, which is a web development framework. There are various phases involved in setting up a MERN (MongoDB, Express.js, React.js, and Node.js) stack project. Here is an easy-to-follow instruction sheet to assist with getting you started:
How to setup MERN Stack Application:
1st step: Installing the necessary software.
- Installing Node.js is as simple as going to the official Node.js website, downloading the installer for your operating system, and then following the installation guidelines.
- Install MongoDB by going to the official MongoDB website, downloading the community server version, and then carrying out the installation steps.
2nd step: Set up the backend part of the project.
- Open your folder in vs code or open the vs code and run the terminal.
- In vs code terminal, write this command mkdir mern-stack-app to create a new directory for your project.
- Go to the project directory by typing cd mern-stack-app.
- Write this command npm init -y to launch a new Node.js project.
- Installing the necessary packages: npm install express mongoose cors npm install nodemon --save-dev
3rd step: Construct to the Backend Server
- In the project directory, add or create a new file with the name server.js.
- Import the required modules and configure the server's:
import express from "express";
import cors from "cors";
import mongoose from "mongoose";
const app = express();
const port = process.env.PORT || 8080;
app.use(cors());
app.use(express.json());
4th step: Connection the MongoDB database to create a directory config. In config folder to create db.js and add the following code in db.js:
import mongoose from "mongoose";
import colors from 'colors'
//Replace your MONGO_URL
const MONGO_URL = 'mongodb+srv://<username>:<password>@cluster0.ly9wzoi.mongodb.net/'
const connectDB = async () => {
try {
const conn = await mongoose.connect(process.env.MONGO_URL);
console.log(
`Conneted To Mongodb Databse ${conn.connection.host}`.bgMagenta.white
);
} catch (error) {
console.log(`Error in Mongodb ${error}`.bgRed.white);
}
};
export default connectDB;
import connectDB from "./config/db.js";
connectDB();
5th step: Construct Routes and Controllers
- Make two new directories in your project directory which are routes and controllers.
- Make a Route.js file in the routes directory.
- Make a Controller.js file in the controllers directory.
The code below should be added to Route.js to create the routes:
import express from "express";
// router object
const router = express.Router();
// Define your routes and corresponding controllers here
// router.get("/test", testController);
export default router;
The code below should be added to Controller.js to create the controllers:
// Define your controller functions here
6th Step: Include the routes and controllers by adding the following code to server.js:
import Route from "./routes/Route.js";
app.use("/test", Route);
7th Step: Get started the Frontend (Client)
- Launch the vs code terminal.
- Go to your project directory and type cd mern-stack-app.
- Write the command mkdir client to create a new directory in the project directory called "client."
- Write cd client to get to the client directory.
- Create a new React JS project with the command npx create-react-app . .
To run the MERN stack project:
- To start the backend server, execute npm run server from the root project directory.
- To start the React development server, execute npm start in the client directory.
