MERN Stack E-Commerce Website #2

Backend, MERN, Web Development / By

Creating express server

Create server.js (or respective file as define main in package.json)

  • Create server.js in root dir if you haven’t.

Do Coding Inside server.js

  • Requiring express

    const express = require("express");

  • Assign express app (i.e express()) to a variable named as app (relevant + best practise) in order to access express functionalities in future using the app variable.

    const app = express();

  • Now we can handle GET/POST request using express through app variable.

  • Handeling GET request

    app.get("/", (req,res)=>{
    res.send({
        message: "Hello world!"
    })
})

    or

    app.get("/", (req,res,next)=>{
    res.send({
        message: "Hello world!"
    })
})

    “/” is a endpoint (root endpoint) where we are handeling GET request here. Whenever the GET request is done to “/” endpoint it will run a callback function with request and response object as an argument. First argument is of request object (it holds all request data) which can be assign to any parameter eg req or request and second argument is of response (it holds all response data) which can be assign to any parameter eg res or response. Additionally there is third argument (optional: generally used for middleware implementation) which is a function generally named as “next” when called i.e next() transfer control to next callback function.

    app.get("/", (req,res,next)=>{
    res.send({
        message: "Message inside first callback function."
    })
    next(); 
        // Transfer control to next call back function
}, (req,res,next)=>{
    // This callback block will run only when next(); is called in previous callback block.
    res.send({
        message: "Message inside second callback function."
    })
})

  • Listen to cartain port when “server.js” will run

    const PORT = 8000;

    Use any free port. (React use 3000 port, Angular use 4200 port, for Node uw mostly use 8000 or 8080 port)

    or

    const PORT = process.env.PORT || 8000;

    Use PORT defined in .env file if available else use 8000 port. 

    app.listen(PORT, ()=>{
    console.log("Server is running on port "+ PORT);
})

    or

    app.listen(PORT, ()=>{
    console.log("Server is running on port ", PORT);
})

    or (recommended)

    app.listen(PORT, ()=>{
    console.log(`Server is running on port ${PORT}`);
})

    We are using template literals (“) provided in ES6 so that we can use JS variable inside string wrapped by backticks as ${variable_name}

  • Run the server:

    npm start

    or

    node server.js

    After running it must print “Server is running on port 8000” in console.

  • We can highlight this in console by requiring colors package first and then defining colors and text color for it as shown below:

    const colors = require("colors");
  
app.listen(PORT, ()=>{
    console.log(`Server is running on port ${PORT}`.bgCyan.white);
})

  • So far, our server.js will look like this :

    const express = require("express");

const app = express();

const colors = require("colors");

app.get("/", (req, res) => {
    res.send({
        message: "Hello world!"
    })
});

const PORT = process.env.PORT || 8000;

app.listen(PORT, () => {
    // console.log(`Server is running on port ${PORT}`);
    console.log(`Server is running on port ${PORT}`.bgGreen.white);
});

  • Whenever we make any changes on our server.js we should manually close the server using Ctrl + C and reopen it by firing > npm start again which make development process slow. To tackle this problem we have NPM package called “nodemon” which can run JS file in watch mode (i.e re run the js file on change detection). So we will configure nodemon to run our “server.js” file in watch mode.

  • Install nodemon package

    npm install nodemon

    or

    npm i nodemon

    or (recommended)

    npm i -g nodemon

    -g flag will globally install the package so that we can use nodemon package for other project as well

  • Configure nodemon for running server.js file.

    • Add a “dev” named script in package.json to run server.js using nodemon.

      "dev": "nodemon ./server.js"

      ./server.js => CURRENT_DIR/server.js

      or

      "dev": "nodemon server.js"

      or

      "dev": "nodemon /server.js"

      /server.js => ROOT_DIR/server.js

    • package.json 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",
        "dev": "nodemon ./server.js",
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "dependencies": {
        "colors": "^1.4.0",
        "express": "^4.18.2"
    }
}

  • Now we can use npm run dev command to run server.js in watch mode using nodemon.

  • We can visit url : http://localhost:8000/ to check response from our server on GET request made on / endpoint as defined previously on server.js.

    Expected output :

    {“message”:”Hello world!”}

  • We can give html response instead of JSON response as well like this :

    app.get("/", (req, res) => {
    res.send("<h1>Hello world!</h1>");
    })
});

  • So far we are using Node Js based importing i.e require we can switch to module based import export (ES6) by adding "type":"module" inside package.json as shown below:

    • ES6 module based import/export

      package.json

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

      server.js

      // ES6 Module Based import
import express from "express";
import colors from "colors";

const app = express();


/* 
// JSON response
app.get("/", (req, res) => {
    res.send({
        message: "Hello world!"
    })
});
*/

// HTML response
app.get("/", (req, res) => {
    res.send("<h1>Hello world!</h1>");
});

const PORT = process.env.PORT || 8000;

app.listen(PORT, () => {
    // console.log(`Server is running on port ${PORT}`);
    console.log(`Server is running on port ${PORT}`.bgGreen.blue);
});

    • Default or common js import/export

      package.json

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

      or

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

      server.js

      // Node or CommonJS import
const express = require("express");
const colors = require("colors");

const app = express();

/* 
// JSON response
app.get("/", (req, res) => {
    res.send({
        message: "Hello world!"
    })
});
*/

// HTML response
app.get("/", (req, res) => {
    res.send("<h1>Hello world!</h1>");
});

const PORT = process.env.PORT || 8000;

app.listen(PORT, () => {
    // console.log(`Server is running on port ${PORT}`);
    console.log(`Server is running on port ${PORT}`.bgGreen.blue);
});

Using dotEnv (.env) to securely store sensitive credentials as environment variable

  • Install dotenv npm package

    npm i dotenv

    or (for global installation)

    npm i -g dotenv

  • Add .env file in base directory.

  • Add variables and their values in similar manner as shown below:

    /.env file

    PORT = 8080
MODE = development

  • To use such environment variables in any file first import it to that file.

    import dotenv from "dotenv";

    or

    const dotenv = require("dotenv");

  • Configure dotenv in that file

    dotenv.config();

    If .env file is in root directory.

    dotenv.config({path: "<relative_path>"});

    If .env file is in other directory.

  • Use environment variable from .dotenv file:

    const PORT = process.env.PORT
const DEV_MODE = process.env.MODE

Install morgan npm package

  • morgan package will give info regarding endpoint hitted for api requests.

Related Posts

About The Author

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top