DEV Community

Cover image for NodeJS + Express part 1: Introduction
Eric The Coder
Eric The Coder

Posted on • Updated on

NodeJS + Express part 1: Introduction

Here is a series of articles that will allow you to create backend applications with NodeJS + Express.

This series is the continuation of my series on the basics of NodeJS. If you don't have basic knowledge of NodeJS read this series first: Introduction to NodeJS

Node.js is today a must, so it is essential for a developer to master it.

So I will publish a new article about every two days and little by little you will learn everything there is to know about Node.js + Espress

To not miss anything follow me on twitter: https://twitter.com/EricTheCoder_


Reminder: What is a web server?

A web server is a set of hardware and software that allow access to hosted files, web page and database stored on a computer.

The web server also consists of an HTTP server. HTTP server is software that understands / receives URLs and requests via the HTTP protocol (the protocol used by the browser to display web pages).

At the simplest level, whenever a browser needs a file or other hosted on a web server, the browser makes the request to the server (it is said to send an HTTP request). When the request reaches the server, the HTTP server processes it and returns the response.

Alt Text

In summary, the bottom line is that although an HTTP server may seem complicated, in fact it is just a succession of requests and responses. You will see here below that NodeJS + Express allows you very easily to create an HTTP server and that it is very easy to read a request and send a response.

What is ExpressJS

EspressJS is a NodeJS framework that makes it easier to create web applications. Indeed, why re-invent the wheel? With ExpressJS you have access to several functions that will facilitate and reduce the development time of your web application. Creating an HTTP server with Express is very easy.

Creating a new application

To fully demonstrate the potential of ExpressJS and fully understand all the concepts, we are going to build a complete new web application.

First create a folder to host your application

$ mkdir demo-express
$ cd demo-express
Enter fullscreen mode Exit fullscreen mode

The first step is to create the package.json file.

$ npm init
Enter fullscreen mode Exit fullscreen mode

Then install the ExpressJS package and nodemon

$ npm install express
$ npm nodemon
Enter fullscreen mode Exit fullscreen mode

Note that as you learn in the NodeJS series, the nodemon package allows you to reload the server each time our code is modified.

API vs SSR

Express can be used to create JSON API or a website with server side rendering. Today, we are going to create an API, it is by far the type of application most created with Express.

What is an API?

API stands for Application Programming Interface.

In short, it is a program that can be used by another program, in order to allow applications to communicate with each other.

An API allows the server and the client to communicate with each other and exchange information.

For example, a customer requests a specific customer page on the server: [www.example.com/customers/3814 Danemark(http://www.example.com/customers/3814)

Can the server know how to handle this request? He can't. He won't know what to do with the request. That's why we need to create an API. This is a server application that will determine how to respond to various requests for a specific resource. In this case, return the customer information.

The API that you created can find record 3814 in the customer database, convert that information to JSON (structured text) format, and return this response to the customer.

Note that all requests to servers are made through HTTP actions.

HTTP requests

The action you want to take on the specified resource. Although nouns are also encountered, these methods are often referred to as HTTP verbs.

Here are the most commonly used HTTP verbs / actions

GET: GET requests are only used to retrieve data.

POST: GET requests are used to send new data.

PUT: PUT requests are used to modify data.

PATCH: PATCH requests are used to partially modify data.

DELETE: DELETE requests deletes the specified data.

REST architecture

When the client and the server are talking to each other, it can quickly get out of hand.

For example, the customer can make a request like this: http://www.example/send-me-customer-3804-file or a delete request like this: http://www.example.com/delete-customer=3815

How can the server understand these different requests? To have successful communication, we need standards and conventions.

This is the role of the REST architecture. REST is a set of standards for creating an API that both client and server will use.

Today we won't learn everything about REST, but you can search the web for more information if you need to.

For newbies, the important thing is to know that the way we build our API is not based on personal tastes or opinions, but on the REST architecture standard. So follow them and you will be fine.

CRUD routes conventions

One of those REST conventions is how routes are defined. There are standards for each CRUD course of action.

CRUD stands for Create, Read, Update, and Delete.

When we are dealing with an API resource. For example Customer. Each Client resource has its own CRUD routes.

Here is an example of these REST CRUD routes:

Create: POST http://www.example.com/customers

Read: GET http://www.example.com/customers/3814

Update: PUT http://www.example.com/customers/3814

Destroy: DELETE http://www.example.com/customer/3814

So now you have a more precise idea of ​​what an API is.

On the server, the API will expose all of these routes and features. On the front-end, the client web application will ask these APIs to get the desired data.

Maybe for now the concept is still a bit hazy but things will become clearer when we build our own API.

Your first API with Express

Create the app.js file and add the following code.

const express = require('express')
const app = express()

app.listen(5000, () => {
    console.log('server is listening on port 5000')
})

app.get('/api/products', (req, res) => {
    res.json([
        { name: 'iPhone', price: 800 },
        { name: 'iPad', price: 650 },
        { name: 'iWatch', price: 750 }
    ])
})
Enter fullscreen mode Exit fullscreen mode

In this code, the app.listen() will create an HTTP server and read incoming requests

The app.get() defines a URL path that returns a JSON product list.

You can test this app with

$ npx nodemon app.js
Enter fullscreen mode Exit fullscreen mode

Navigate to localhost:5000/api/products, you should see a JSON representation of the product list

[
   {
     "name": "iPhone",
     "price": 800
   },
   {
     "name": "iPad",
     "price": 650
   },
   {
     "name": "iWatch",
     "price": 750
   }
]
Enter fullscreen mode Exit fullscreen mode

Congratulations, you have just created your first API with NodeJS + Express

In the next articles we will learn step by step all the details on how to create a NodeJS + Express API.

Conclusion

That's all for today, follow me on twitter: https://twitter.com/EricTheCoder_ to be notified of the publication of the next article (within two days).

Top comments (5)

Collapse
 
olsard profile image
olsard

Great! Thanks for sharing.

Collapse
 
surajaswaldev profile image
Suraj Aswal

Finally found the most clear and neat explaination... thank youπŸ™

Collapse
 
balajisasi profile image
Balaji

Introduction to node js page not found, could u please check that once.

Collapse
 
ericchapman profile image
Eric The Coder

Corrected. Good catch... Thanks

Collapse
 
ashlee380518 profile image
ashlee380518

I used the link for localhost:500/api/products but it goes to (localhost:%205000/api/products) and had an error so I had to manually type the first link