DEV Community

Cover image for ECOMMERCE Website Using MERN Part-1 ( Project Setup )
Bikramjeet Sarmah
Bikramjeet Sarmah

Posted on • Updated on

ECOMMERCE Website Using MERN Part-1 ( Project Setup )

Step-1 Make a folder where u will be working on the project, I am naming it ECommerce

Step-2 Inside that make two folders backend & frontend

Step-3 Inside the backend folder make two files named app.js & server.js.

Step-4 Now inside the root directory open the terminal/command line and type npm init

This will ask you some questions like the project name etc, you can leave them default by pressing enter except for the entry point where u have to write backend/server.js.

This will generate a package.json file with its entry point to the server.js file in the backend folder.

Package.json

Step-5 Now we will be adding the following packages in our project

  • Express (For making the server)
  • Mongoose (The Database)
  • DotEnv (For Excessing _environment _variables)
  • Nodemon (For running the development server seamlessly)

by writing npm i express mongoose dotenv nodemon

This will generate a node_modules file with all the depedencies and packages.

Step-6 In package.json file replace the scripts
section with these

 scripts:{
   "dev": "nodemon backend/server.js",
   "start": "node backend/server.js"
 }, 
Enter fullscreen mode Exit fullscreen mode

This will help us to run dev command for starting the server

Step-7 In the app.js file we write the following code

const express = require("express");
const app = express();

app.use(express.json());

module.exports = app;

Enter fullscreen mode Exit fullscreen mode

Here we are importing express and making an express app and exporting it so that we can use it in server.js file.

Step-8

const app = require("./app");
const dotenv = require("dotenv");

dotenv.config({ path: "backend/config/config.env" });

app.listen(process.env.PORT, () => {
  console.log(`server working at PORT ${process.env.PORT}`);
});

Enter fullscreen mode Exit fullscreen mode

In this step we are importing the app which we exported from the app.js file & also importing dotenv which we installed in Step 5.

After that we are passing the path of the env file which we will be making in the config folder.

After that we are making the server by writing app.listen() which takes two parameters PORT & a callback funtion.
In the callback function we are just console loging that the server is working in the given PORT.

Here are the screenshots of the two files
App.js & Server.js

Step-9 Now we will be making a new file inside of config folder named config.env.
Folder Structure

Inside the .env file we will be writing PORT = 4000. This will give the PORT parameter which is needed in Step 8.
Config file

Step-10 The setup of the server is completed. We can test it by writing npm run dev in the terminal. If everything is okay we can see an console log that the Server is working at PORT 4000.

Terminal Output

Part-2 -> Setting up the Database.

Discussion (2)

Collapse
oto profile image
oto

Step by step to develop an e-commerce website?

awesome

Collapse
bikramjeetsarmah profile image
Bikramjeet Sarmah Author • Edited on

ya am gonna write every steps of making the site including authentication, error handaling etc

Thnx <3