Getting started with Express: Building your first app

In this article, we are going to create our first express app, to get started with this article make sure the following tools are installed in your system.

• NodeJs -

  • To verify whether nodejs is installed or not, open your terminal and run the command node -v and npm -v this should give any version number.

• Vscode

• postman

Step 1: Basic Setup

First, we will create a project folder, we can do that using the GUI, but let's try to create that by using the terminal.

• mkdir helloExpress - mkdir command is used to create a new directory. so this command will create a new directory helloExpress

• cd helloExpress/ - cd is used to change the directory. So this command will change the current directory to the helloExpress directory.

• code . this command will open vscode in the current directory.

Now the next step is to create our package.json file. package.json file is a simple JSON file located in the project root directory. This file contains important information about the project like name, version, dependencies, and other configuration options. Every nodejs project contains a package.json file.

To create the package.json file open the in-built terminal of vs code, you can use ctrl + ` . Now we are going to write the command npm init . This will initialize a new node js project and ask you to fill in a bunch of information about the project. You can give that information or keep pressing enter to either keep them empty or default, and if you don't want to keep pressing enter then you can use npm init -y this will skip all the question prompts and set them to default.

This is how our package.json file looks currently.

{
  "name": "helloexpress",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Now the next step is to create an entry point for our application, we will create a new index.js file in the project root directory.

// index.js file
console.log("Hello Express");

Currently, We only have a simple console message in our index.js file.

Now we will add script in our package.json file.

{
  "name": "helloexpress",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "author": "",
  "license": "ISC"
}

Now when we run the command npm start then it should display Hello Express message in the console.

Step 2: Express and nodemon Installation.

In this section of the article, we are going to install Express and nodemon and do a basic setup of express and nodemon.

installing Express

Express is a popular and widely-used web application framework for Node.js. It provides a set of features and tools for building web applications and APIs.

To install Express run command npm install express in the vscode in-built terminal.

Installing nodemon

Nodemon is a command-line tool that monitosr for any changes in your source and automatically restart your server.

To install nodemon run the command npm i nodemon -D . nodemon is used for development and testing purposes, that's why we install it as devDependencies for installing any package as devDependencies we use -D flag.

Now nodemon is installed, let's modify the script in package.json file.

{
  "name": "helloexpress",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "nodemon index.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.18.2"
  },
  "devDependencies": {
    "nodemon": "^2.0.22"
  }
}

Now try doing any changes in index.js file and save it, and your server will start automatically.

Step 3: Express Setup

Let's move to index.js file and start setting up our app. Let's add the following code to your index.js file and then I will try to explain you each and every line.

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

app.get("/", (req, res) => {
  res.send("Hello Express");
});

app.listen(port, () => {
  console.log(`listening on port ${port}`);
});

const express = require("express");

This line imports the Express module and assigns it to express variable. This allows us to use the functionality provided by the Express framework.

const app = express();

This creates an instance of the Express application and assigns it to app variable. This is the main object that we will use to configure and interact with our application.

const port = 3000;

This line sets our port to 3000, our server will listen for any incoming request on this port only.

app.get("/", (req, res) => {
  res.send("Hello Express");
});

The above line sets up a GET route on the root URL ("/") of our server. It accepts two arguments PATH and a Handler function. When a user makes a request to the root URL, the function passed as the second argument will be executed. In this case, the function sends the string "Hello World!" as the response.

app.listen(port, () => {
  console.log(`listening on port ${port}`);
});

This line starts the server and listens for incoming requests on the specified port. When the server starts listening for any incoming request, the function passed as the second argument will be executed, which logs a message to the console indicating that the server is listening on the specified port.

Now if you open localhost:3000 in your browser, it will show you Hello Express message.

While working with Express we usually don't send this type of one-line message usually we send JSON data which might be coming from the database, but currently, we don't have that type of knowledge so let's create some static JSON data and try to send that as a response. This is the data we are going to send as response.

const data = [
  {
    id: 1,
    first_name: "Leonid",
    last_name: "Bardsley",
    email: "lbardsley0@yahoo.co.jp",
    gender: "Male",
  },
  {
    id: 2,
    first_name: "Tybalt",
    last_name: "Antushev",
    email: "tantushev1@storify.com",
    gender: "Male",
  },
  {
    id: 3,
    first_name: "Bethena",
    last_name: "Worgen",
    email: "bworgen2@virginia.edu",
    gender: "Female",
  },
  {
    id: 4,
    first_name: "Bartram",
    last_name: "Matts",
    email: "bmatts3@myspace.com",
    gender: "Non-binary",
  },
  {
    id: 5,
    first_name: "Marice",
    last_name: "Pavlenkov",
    email: "mpavlenkov4@tmall.com",
    gender: "Bigender",
  },
];

Next, we need to add a new GET Route and add the following line.

app.get("/users", (req, res) => {
  res.status(200).json(data);
});

The above line sets up a new GET route on the root URL ("/users") of our server. It accepts two arguments PATH and a Handler function. When a user makes a request to the URL, the function passed as the second argument will be executed. In this case, the function sends a JSON string as the response. The status() method sets the HTTP status code to 200, indicating that the request was successful, and the json() method converts the data variable into a JSON string and sends it as the response body.

Now if you go to [localhost:3000/users](http://localhost:3000/users)\ in your browser or postman you can see the data as result and in postman, you can also see the status code.

That's it you have successfully created your first express app.

Github Repo