Node.js Express

Last updated Nov 13, 2022

المعرفة:: NodeJS
الحالة:: #ملاحظة_مؤرشفة
المراجع:: The Complete Node.js Developer Course 3rd Edition, coggro’s Notes

Express is a fast, unopinionated, minimalist web framework for Node.js.

1
npm install express  

# Getting Started

The simplest Express app you can create.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
// const express = require('express')  
// import express  
import express from 'express'  
  
// call express to start server  
const app = express()  
const port = 3000  
  
// .get takes route and fx for what to do  
// args are req object and res object  
app.get('/', (req, res) => {  
  // Send something back to user  
  res.send('Hello World!')  
})  
  
// Set the server to listen on a prescribed port  
app.listen(port, () => {  
  console.log(`Example app listening on port ${port}`)  
})  

This app starts a server and listens on port 3000 for connections and responds with “Hello World!” for requests to the root URL (/) or route. For every other path, it will respond with a 404 Not Found.
nodemon can be used to restart the server on changes.
send() can send text, HTML, or JSON object or array.

1
2
3
4
5
  res.send(`<h1>Weather</h1>`)  
  res.send({  
    name: `Corey`,  
    age: 31,  
  })  

# Serving static files

If we are using ES6 Modules instead of CommonJS Modules we will have to apply this workaround.
Node’s path.join() is used to get the full absolute path to the public folder /public/.

1
2
3
4
import { join } from "path";  
  
// .. is one dir up  
console.log(`joined path`, path.join(__dirname, `..`, `/public`))  

Finally, we set express’s app.use() to serve static files.

1
2
const publicDirectoryPath = path.join(__dirname, '../public')  
app.use(express.static(publicDirectoryPath))  

# Dynamic Pages with Templating

Handlebars template engine will be used to serve dynamic content ( on npm).
We need to install hbs - handlebars for express package. npm i hbs
Next, we can set hbs as view engine of express.

1
app.set(`view engine`, `hbs`)  

By default, views are expected to be found in /views/ directory.
Instead of using res.send(), we need to use res.render(viewName) to render our views.
res.render() also accepts a second argument which is the dynamic values to pass to the view.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<html lang="en">  
  <head>  
    <meta charset="UTF-8" />  
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />  
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />  
    <title>Document</title>  
    <link rel="stylesheet" href="/styles/styles.css" />  
  </head>  
  <body>  
    <h1>{{ title }}</h1>  
    <p>{{ name }}</p>  
  
    <script src="/scripts/script.js"></script>  
  </body>  
</html>  

1
2
3
4
5
6
7
8
app.get(``, (req, res) => {  
  // first arg is view to render  
  // second arg is dynamic values to pass  
  res.render(`index`, {  
    title: `Weather App`,  
    name: `Andrew Mead`,  
  })  
})  

# Customizing Views and Partials Directories

We can change the location and name of the views directory.

1
2
const viewsPath = path.join(__dirname, '../templates/views');  
app.set('views', viewsPath);  

Also, we can do the same for partials directory.

1
2
3
import hbs from "hbs";  
const partialsPath = path.join(__dirname, '../templates/partials');  
hbs.registerPartials(partialsPath);  

# Partials and Advanced Templating

Partials are small parts of markup than can exist in different templates, e.g. headers or footers.
It can help unifying the website look without having much duplicated markup.
Partials can load in on other pages using {{>partial}} syntax.
Nodemon won’t load the changes automatically unless we adjust our nodemon command to nodemon src/app.js -e js,hbs. ^e9662e
We can reference variables in the partial just like we do in normal templates.

1
2
3
4
5
6
7
8
<!-- <h1>Static Header.hbs Text</h1> -->  
<h1>{{title}}</h1>  
  
<div>  
    <a href="/">Weather</a>  
    <a href="/about">About</a>  
    <a href="/help">Help</a>  
</div>  

1
2
3
4
  <body>  
    {{>header}}  
    <p>{{ name }}</p>  
  </body>  

# Setting up 404 Pages

Set up app.get(`*`, ...) as the last route in the app.
- Express looks for matches in order listed. First, it looks for static pages, then at our routes, including our final wildcard route.
We can add sub-routes, too.
Something like this will work above the full wildcard:

1
2
3
4
5
6
7
app.get(`/help/*`, (req, res) => {  
  res.send(`Help article not found`)  
})  
  
app.get(`*`, (req, res) => {  
  res.send(`Page not found`)  
})  

# Query Strings

A way to send data from browser to the server and get it easily using req.qurey.

1
2
3
4
// http://localhost:3000/products?search=games&rating=5  
app.get('/products', (req, res) => {  
  console.log(req.query) // {search: "games", rating: "5"}  
})  

Express doesn’t provide a way to force requiring a query, instead we can use simple if statement.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
app.get(`/products`, (req, res) => {  
  if (!req.query.search) {  
    return res.send({  
      error: `You must provide a search term`,  
    })  
  }  
  res.send({  
    products: [],  
  })  
})  

We can also send back query data normally in response.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
app.get(`/weather`, (req, res) => {  
  if (!req.query.address) {  
    return res.send({  
      error: `You must provide a location.`,  
    })  
  }  
  res.send({  
    forecast: `The weather forecast is that there will be weather whether or not you can weather it.`,  
    location: req.query.address,  
  })  
})  

🪴 yshalsager's Digital Garden

Node.js Express

# Getting Started

# Serving static files

# Dynamic Pages with Templating

# Customizing Views and Partials Directories

# Partials and Advanced Templating

# Setting up 404 Pages

# Query Strings

Backlinks

Interactive Graph