First Steps with Express.js (Node.js) : Starter Setup, Learn Basics for Beginners | Part 1
Tags: node, express, beginners, backend
Published: 2023-05-20 22:31:28

## 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:

```bash
npm init -y
```

Now you initialized npm in your project! Let's install <u>express</u> and <u>nodemon</u>. 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. 

```bash
# install express and nodemon
npm i express nodemon
```

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

```json
{
  "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!
  }
}
```

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

```json
{
  "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"
  }
}
```

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: <u>CommonJS</u> and <u>ECMAScript</u>(ESM, ES modules). Here is the example codes of both.

```jsx
// ECMAScript example
import express from "express";

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

const app = express();
app.listen(3000, () => {
  console.log("Server listening on port 3000!");
});
```
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.

```json
{
  "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"
  }
}
```

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.

```jsx
// test to listen port 8000

import express from "express";

const app = express();

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

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

In this code syntax, the first argument specifies <u>the port number to listen on</u>. In this example, port number 8000 is specified. And the second argument allows you to specify a <u>callback function</u>, 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! :)