Getting Started with Express JS

What is Express JS?

Express is a fast and minimalist web framework for Node.js that provides a robust features for web and mobile applications.

Express is a server-side framework. It can be used with client-side frameworks like React, Angular or Vue to build full stack applications 🚀.

Most of the times we build API's with express so that it takes request from frontend and serves back the data mostly in JSON format.

What is the Use of Express?

• It makes building web apps with node js much easier
• It is used because its light, fast and free
• Most popular Node framework
• Easy to use with Frontend frameworks

prerequisites

• JavaScript Fundamentals
• Basics of Node and npm

Installing Express

run npm install express command to install express js

Basic code for creating Server in express

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

app.get('/', (req, res) => {
  res.send('<h1>Home page.....</h1>')
})

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

As we can see that we are listening on port 3000, so if we go to localhost:3000, we can see the following page running

But Why Express JS

why express js when node js exists?
You might have this doubt, When I started learning express I got this doubt. Comparing Node js and express JS is not very perfect because Node is a runtime environment which allows us to run JavaScript outside the browser where as Express is a Framework. No.1 reason for using express is that we can create a server with less lines of code than using http in node js.

To understand in depth, lets create a server that shows 'Home Page...' when user is on localhost:3000 url and shows 'About Page...' when user is on localhost:3000/about

👉👉 Performing above query using Node http module :

const http = require('http');

const server = http.createServer((req,res) => {
    res.statusCode = 200,
    res.setHeader('Content-Type','text/html')
    if(req.url === '/') {
        res.end('<h1>Home Page....</h1>')
    } else if(req.url === '/about') {
        res.end('<h1>About page....</h1>')
    }
})

server.listen(3000, () => {
    console.log(`server is listening on port 3000`);
})

👉👉 Performing same query using Express JS:

const app = require('express')()

app.get('/', (req, res) => {
  res.send('<h1>Home page.....</h1>')
})

app.get('/about', (req, res) => {
  res.send('<h1>About page.....</h1>')
})

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

we can clearly notice the difference and how simple and easy express js is. The good thing about express js is it sets the status code and content type automatically.

sending json in express

app.get('/', (req, res) => {
  res.json({
    name: 'hello',
    age: 22
  })
})

output :

Middleware Functions

middleware functions are functions that have access to the request and response object. express has built in middleware but middleware also comes from 3rd party packages and we can also create custom middleware.

middleware can make changes to the request and response object.

sending static folder

create a public folder and add index.html, about.html, and contact.html, so when user goes to '/index.html' then that file will be served. '/about.html' servers about.html file

app.use(express.static(path.join(__dirname,'public')));

thanks for reading
Follow Me on Socials
Instagram Twitter GitHub Linkedin