DEV Community

Cover image for First Steps with Express.js (Node.js) : Starter Setup, Learn Basics for Beginners | Part 1
koshirok096
koshirok096

Posted on • Edited on

First Steps with Express.js (Node.js) : Starter Setup, Learn Basics for Beginners | Part 1

Introduction

Hello everyone! Recently I have started learning Express.js - I believe it's a great option to build backend things easily, and makes your life easier. In this article, I’d like to share the first few steps to setup Node.js and Express.js. I hope it helps your coding journey!

Setup Express and nodemon

First of all, let's create your project directory in your computer. And run the terminal command below:

npm init -y
Enter fullscreen mode Exit fullscreen mode

Now you initialized npm in your project! Let's install express and nodemon. nodemon is a great tool that boost your productivity with Node development - as long as you have nodemon in the project, it keeps monitoring your project and restarts your node application when you make any changes. It's a must-have helpful tool for your Node development.

# install express and nodemon
npm i express nodemon
Enter fullscreen mode Exit fullscreen mode

Now your package.json file supposed to be like this:

{
  "name": "server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.18.2", // just added!
    "nodemon": "^2.0.22" // just added!
  }
}
Enter fullscreen mode Exit fullscreen mode

One more thing, add one line in script like below:

{
  "name": "server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type":"module",
  "scripts": {
    "start": "nodemon index.js", // just added!
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.18.2",
    "nodemon": "^2.0.22"
  }
}
Enter fullscreen mode Exit fullscreen mode

By adding this line, Nodemon monitors the index.js file, and if any changes occur, it automatically restarts the server. This allows for immediate reflection of changes in the server application during development.

CommonJS or ECMAScript?

Until so far, you are ready to use Express on your project. But before go on next, let's talk about modules.

When you work on Node development, you have two modules to choose: CommonJS and ECMAScript(ESM, ES modules). Here is the example codes of both.

// ECMAScript example
import express from "express";

const app = express();
app.listen(3000, () => {
  console.log("Server listening on port 3000!");
});
Enter fullscreen mode Exit fullscreen mode
// CommonJS example
const express = require("express");

const app = express();
app.listen(3000, () => {
  console.log("Server listening on port 3000!");
});
Enter fullscreen mode Exit fullscreen mode

As you see, code syntax is a little bit different, but both codes mean same. So what is the point? - ECMAScript is the standard for JavaScript language itself, while CommonJS is the default in Node.js. You can choose the one of them.

In my case, I prefer to use ECMAScript because way of writing code fits me better. So in this article I will use ECMAScript way.

{
  "name": "server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
    "type": "module", // added!
  "scripts": {
    "start": "nodemon index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.18.2",
    "nodemon": "^2.0.22"
  }
}
Enter fullscreen mode Exit fullscreen mode

If you use ECMAScript, change the package.json file like above!

See how it works

Your first setups for a project are almost done! Let's add some codes on index.js like below.

// test to listen port 8000

import express from "express";

const app = express();

app.listen(8000, () => {
    console.log("Hey! I listen to port 8000");
})
Enter fullscreen mode Exit fullscreen mode

To use Express, add import express from "express"; and const app = express(); first (this initializes Express.js). And then use app.listen() to check the connection with port.

In this code syntax, the first argument specifies the port number to listen on. In this example, port number 8000 is specified. And the second argument allows you to specify a callback function, that will be called when the listening starts (in this example, I used console.log() to check).

Conclusion

If you get a log on your console, it successes! After this setups, you can add more features based on your own ideas to create something. Happy Coding! :)

Top comments (0)