DEV Community

Cover image for Day 3 - Your first week in NodeJS
Gurpreet Singh
Gurpreet Singh

Posted on • Originally published at gsin.in

Day 3 - Your first week in NodeJS

Prerequisite

I believe you have already read my previous article where I explained, how to spin up a Node.js server instance, serving HTML/JSON data via an endpoint, basic routing, npm, and nodemon from creating custom modules, event handling, and file read/write operations. Let's jump on today's topic and write the code together.

Start with express.js

It's one of the most popular routing system. It can be integrated with many template engines. It also contains a middleware framework, which helps to enhance security features.

Just install express with $ npm i express:

// app.js

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

app.listen(3000);
Enter fullscreen mode Exit fullscreen mode

With the above code, your express.js server is ready to serve requests on the 3000 port. But it won't serve any request alone unless you provide proper routing to it.

express.js routes

Routes are a very important part of the express.js setup. It helps you to make your entire architecture modularize. See below express, where you will see how we gonna server HTML and JSON requests together from a single server instance.

// app.js

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

app.get("/", (req, res) => {
  res.send("This is homepage");
});

app.get("/contact", (req, res) => {
  res.send("This is contact page");
});

app.get("/api/users", (req, res) => {
  res.setHeader("Content-Type", "text/json");
  res.send(
    JSON.stringify([
      {
        id: 3,
        username: "demo_user",
        email: "demo@demo.com",
        phone_number: "+49 123 4567 890",
      },
      {
        id: 2,
        username: "james",
        email: "james@demo.com",
        phone_number: "+49 765 111 999",
      },
    ])
  );
});

app.listen(3000);

Enter fullscreen mode Exit fullscreen mode

Creating REST API

Similarly, we can now create our rest API to handle user-specific requests:
Since we are not using any database, we can create a static JSON file for initial set of users users.json.

[
  {
    "_id": "610ec10c78f7665bfa2cbf11",
    "age": 28,
    "name": "Bobbi Cannon",
    "email": "bobbicannon@dragbot.com"
  },
  {
    "_id": "610ec10ca916e321b1363301",
    "age": 33,
    "name": "Downs Burns",
    "email": "downsburns@dragbot.com"
  }
]

Enter fullscreen mode Exit fullscreen mode

Now we have users.json in place we need two new packages.

  • body-parser - To get form-data from POST request.
  • objectid - To create dynamic unique _id (You can skip, when you have a database in place. eg: MongoDB, Firebase, etc.)
// app.js

const express = require("express");
const bodyParser = require("body-parser");
const objectid = require("objectid");

const app = express();

let USER_DATA = require("./users.json");

app.use((req, res, next) => {
  res.append("Access-Control-Allow-Origin", ["*"]);
  res.append("Access-Control-Allow-Methods", "GET,PUT,POST,DELETE");
  res.append("Access-Control-Allow-Headers", "Content-Type");
  res.append("Content-Type", "text/json");
  next();
});

// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

// get all users
app.get("/api/users", (req, res) => {
  res.send(USER_DATA);
});

// get single user by id
app.get("/api/user/:id", (req, res) => {
  res.send(USER_DATA.filter((obj) => obj._id === req.params.id));
});

// delete single user by id
app.delete("/api/user/:id", (req, res) => {
  const index = USER_DATA.findIndex((obj) => obj._id === req.params.id);
  res.send(USER_DATA.splice(index, 1));
});

// add new user
app.post("/api/user", (req, res) => {
  const { name, age, email } = req.body;
  if (name && age && email) {
    USER_DATA = [
      ...USER_DATA,
      {
        _id: objectid(),
        age,
        name,
        email,
      },
    ];
    res.send(USER_DATA);
  } else {
    res.status(500).send("error, user not added.");
  }
});

app.listen(3000);
Enter fullscreen mode Exit fullscreen mode

The initial set of users will be loaded from the file then you can add/remove users based on API requests.

GET request

You can use postman software to make these requests to check your API:

http://localhost:3000/api/users

[
  {
    "_id": "610ec10c78f7665bfa2cbf11",
    "age": 28,
    "name": "Bobbi Cannon",
    "email": "bobbicannon@dragbot.com"
  },
  {
    "_id": "610ec10ca916e321b1363301",
    "age": 33,
    "name": "Downs Burns",
    "email": "downsburns@dragbot.com"
  }
]
Enter fullscreen mode Exit fullscreen mode

POST request (Add user)

http://localhost:3000/api/user

// data

{
  name: "Gurpreet Singh",
  age: "21",
  email: "yes@demo.com"
}
Enter fullscreen mode Exit fullscreen mode
// response

[
  {
    "_id": "610ec10c78f7665bfa2cbf11",
    "age": 28,
    "name": "Bobbi Cannon",
    "email": "bobbicannon@dragbot.com"
  },
  {
    "_id": "610ec10ca916e321b1363301",
    "age": 33,
    "name": "Downs Burns",
    "email": "downsburns@dragbot.com"
  },
  {
    "_id": "610eca22f75a370000000001",
    "age": "121",
    "name": "Gurpreet Singh",
    "email": "yes@demo.com"
  }
]
Enter fullscreen mode Exit fullscreen mode

DELETE request (delete user)

http://localhost:3000/api/user/<id>

http://localhost:3000/api/user/610eca22f75a370000000001

// response

[
    {
        "_id": "610eca22f75a370000000001",
        "age": "121",
        "name": "Gurpreet Singh",
        "email": "yes@demo.com"
    }
]
Enter fullscreen mode Exit fullscreen mode

Note: Since we are not using any real database, hence this server only keeps data unless you restart.

You can practice the last method of REST PUT in order to update any user record.

Happy coding!

Discussion (0)