Understanding Express.js Fundamentals

Understanding Express.js Fundamentals

Introduction

Express.js is the most popular web framework for node.js that provide minimal interface with all the tools needed to build web app. It is a server-side framework that can be used in combination with client-side frameworks like React.js to build MERN Stack applications.

Here MERN stands for MongoDB, Express.js, React.js and Node.js.

What is Node.js?

Node.js is a JavaScript runtime that allows developers to write server-side programs in JavaScript.

What is Express.js?

Express.js is a fast, unopinionated, minimalist web framework for node.js that can be used to build an Application Programming Interface (API) which will take request from the frontend and then serves the data to the backend usually in json format and also render client-side view.

Things you need on your system to start using Express.js

  1. Node.js: you need to have node.js installed on your system before using express.js, if you don’t have you can download here .
  2. Code-editor: you need a code editor such as VSCode which have integrated terminal. You can download VSCode here .
  3. Postman: it is an HTTP client that is used to make request to server such as GET, POST, DELETE, etc. you can download postman here .
  4. Browser: you need a browser to view the client-side view. And most of all you need to keep learning and staying updated.

most of all you need to keep learning and staying updated.

How do you set Express.js environment locally?

A. Open a new folder in your preferred code editor, and create a package.json file by running.

npm init -y

B. then we install express,js by running

npm install express

after running this, express.js will be added to your package.json

C. the next thing is to create the main entry point file with .js extension, which can either be index.js, server.js, main.js or what so ever you call it. In our case we will create an index.js file. In the index.js file we will write the following lines of code to start a simple express server.

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

const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`Server Started on PORT ${PORT}`));
  1. the first line brings in express with a variable express.
  2. The second line initialize a variable called app with express.
  3. The third line create a variable “PORT”, and assign to either the environment port if it is available or 5000.
  4. The last line uses one of the express methods which is listen that is used to run express server. The PORT variable is included in the method and a call back function as a second parameter which will log the text “Server started on port, and then the port variable”.

To start the server, you need to run in your terminal.

Node index

Where index is the name of your main entry point file. To view your app in the browser, you should visit the address, localhost:5000. The 5000 is the number that we assign to the PORT variable.

The app will now render

Cannot GET /

The error basically means there is no route handler in our app.

How do you create a route handler??

To create a route handler, we need to add the following lines of code in our index.js file.

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

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

const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`Server Started on PORT ${PORT}`));

when we save this and run our server again, the text “Hello World” will be rendered in the browser.

In the previous code we use the app and the type of request we want to handle (get), then we use the route (“/”) which means index and then an arrow function as the second parameter which include the res object and uses the send method to display the text “Hello World” on the browser.

Summary

  1. Express.js is a fast, unopinionated, minimalist web framework for node.js.
  2. Node.js is a JavaScript runtime.
  3. You need to install a node.js on your system before using express.js.
  4. You need to create package.json and include express.js in your app folder.
  5. The router handler takes the following structure
app.METHOD(PATH, HANDLER)

Don't just Read, Code it Yourself.