MERN Stack E-Commerce Website #1

Environment Setup

• Install Node js (LTS version recommended) from official Node website.

• Check Node js installation

node -v 

or

node --version

• Check Node Package Manager (NPM) version.

npm -v 

or

npm --version

• make sure node version is atleast 14 and npm version is atleast 6
• we will create rest api using express and will use mongodb for database
• So, create account on MongoDB to use mongodb atlas online database (512MB free)
• Alternatively, we can use mongodb locally by downloading mongodb community server available in all cross platforms.
• Download and Install Visual studio Code as a code editor.

Project Setup

• Create a new folder (with any relevant name eg Ecommerce App or project)
• Open created folder in VS code
• Install necessary extensions for out project.
  1. ES7+ React/Redux/React-Native snippets by dsznajder
  2. Auto Import – ES6, TS, JSX, TSX by Sergey Korenuk
  3. DotENV by mikestead
  4. html to JSX by Riaz Laskar
• Tweak some settings of VS code.
  1. Enable => Editor: Mouse Wheel Zoom
  2. Enable => Editor: Format On SaveMake sure Prettier extension is installed and enabled

Start Coding

• Initialize node project

npm init

Initialize by manually entering project details like version, name, author, entry point etc. A ‘package.json’ named file will be created with all project details.

or

npm init -y

Initialize by accepting default project details eg entry point => index.js (-y flag for yes to all default suggested details). A ‘package.json’ named file will be created with all default project details.

Anyway, we can change the project details by tweaking package.json file anytime.

• Change main entry point file from package.json by changing

  "main": "index.js",

to

  "main": "server.js",

‘package.json’ looks like this:

{
    "name": "backend",
    "version": "1.0.0",
    "description": "",
    "main": "server.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC"
}

since we are working on backend first ‘server.js’ is relevant name but its not mandatory to do so. Just do it for following best practise.

• Create file named as declared as main in base/root directory. In this case we will create server.js file.
• Adding start script to run main file i.e server.js by adding “start” (not mandatory to use “start” but its relevant name thats why) script inside “scripts” object of package.json file as shown below.

"start": "node ./server.js"

{
    "name": "backend",
    "version": "1.0.0",
    "description": "",
    "main": "server.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "start": "node ./server.js"
    },
    "keywords": [],
    "author": "",
    "license": "ISC"
}

• Download few more dependencies/packages required for creating api. NPMJS is hub for node packages we can search for any packages there.
• Packages we will install
  1. express : express framework of node for easing api creation.Search it on NPMJS and install it using command mentioned there.

npm install express

or

npm install express

Make sure to fire command from root project directory (where package.json is located) in my case its : C:\Users\Yubraz\Desktop\mern\ecommerce\project\backend>

• colors : for logging something in colorful manner that will make easy to find line(s) we are searching in bunch of outputs in console.

Search it on NPMJS and install it using command mentioned there.

Command:

npm install colors

or

npm i colors

Alternatively we can also install these two packages at once using command:

npm install express colors

After successfull installation of packages package.json will be appended with dependencies object.

"dependencies": {
    "colors": "^1.4.0",
    "express": "^4.18.2"
}

and will looks like:

{
    "name": "backend",
    "version": "1.0.0",
    "description": "",
    "main": "server.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "start": "node ./server.js"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "dependencies": {
        "colors": "^1.4.0",
        "express": "^4.18.2"
    }
}

• All required files for packages will be added inside node_modules folder ( /node_modules => ROOT_DIR/node_modules )
• And all dependencies of dependencies will be stored inside package.lock.json file.