Getting Started with Express JS
Tags: express, javascript, webdev, programming
Published: 2022-07-13 07:23:27

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

```javascript
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 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0fug9cpa4sx4ec2dz8l3.png)

## 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
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s9n7grem5kyh0azzcssx.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ptmuzenp6yu0b4jfo3d7.png)
  

👉👉 Performing above query using Node http module :

```javascript
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:

```javascript
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

```javascript
app.get('/', (req, res) => {
  res.json({
    name: 'hello',
    age: 22
  })
})
```
output :
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1dd3lr64lnfby8fnxkze.png)
 

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

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

thanks for reading
Follow Me on Socials 
[Instagram](https://www.instagram.com/code_beast_/) [Twitter](https://twitter.com/vamsitupakula_) [GitHub](https://github.com/vamsi-tupakula) [Linkedin](https://www.linkedin.com/in/vamsitupakula/)