Skip to content

youhoc

Pages
- Home
- Modern App Guidelines
- Linux
  Day 1: Linux Distributions & Navigation
  Day 2: User Management
  Day 3: File Permission & Ownership
  Day 4: Package Management
  Day 5: Services Management
- Javascript
  JS The Weird Part
  Execution Context
  Types & Operators
  Objects & Functions
  Error Handling & Strict Mode
  Typescript, ES6, Tra
  Modern JS
  JS in the Browser
  Data Storage JSON
  Modern JS
  Advanced Objects & Methods
  Webpack & Babel
  Async
  jQuery
  In-depth Analysis of jQuery
  React-ready JS
  Arrow Function
  Template Literals
  Logical AND, OR, Ternary, Nullish Operators
  Destructuring & Rest Operator
  Array Method
  Immutability and Spread Operator
  Promises, Async/Await, Callback
- PHP
  gruntJS
  composer
  MySQL
- Docker
  Container Basics
  Container Networking
  Container Image
  Container Volume & Persistent Data
  Dockerfile
  Docker Compose
  Docker Registry
- Node.js
  1. Installing & Exploring
  2. Core Modules
  3. Get User Input
  File System & Input Arguments
  5. Express Web Server
  6. Deploy to Heroku & Github
  Authentication
  7. Databases
  8. Rest API
- ReactJS
  React from Andrew
  Summary from Next
  1. Basics
  2. React Components
  3. Webpack
  4. Styling with SCSS
  5. React Router
  6. React Hook
  Modern React From The Beginning
  Intro to JSX
  Vite Build Tools
  Basic Component Creation
  Component State
  Props & Component Composition
  useState with Inputs & Form Submission
  useEffect, useRef & Local Storage
  Async / Await and Http Request in React
  React Router: Declarative Mode
  ContextAPI
  React Router: Framework Mode
  File-routing & HTML Layouts
  Server-side Data Query
  Links & Navigation
  Loaders
- Typescript
  Type User vs UserProp
- Payload CMS

/

...

/

5. Express Web Server

5. Express Web Server

1. Basic

Install

Basic Setup

Starting the server, keep restarting everytimes codes changed with nodemon

2. Response Objects

HTML (for web pages in browser)

JSON (for RestAPI)

Response will be auto convert to JSON.stringlify()

You can use an array of objects

Serve an entire directory (website with JS, CSS)

Popular file structure

node_modules

public (for public assets)

img

css

html

src (for starting JS file)

templates (for handlebars files - just like views and includes)

partials (includes like headers, footer, navigation)

views (just like pages)

Path Management to link to different folders & files

Default var name:

We could use these default var to manage paths, but we need a more absolute way to manage path....

Use core module path

https://nodejs.org/dist/latest-v16.x/docs/api/path.html⁠

⁠

When we serve a public static folder, we don’t need according routes.

the idea of a public static folder is to serve static assets, static HTML

we need a solution to serve dynamic pages

Serve dynamic pages

Use template engine ‘handlebars’

⁠

Loading www.npmjs.com⁠

⁠

Actually, we should use handlebar for express, which is here:

⁠

Loading www.npmjs.com⁠

⁠

Install into local application

Set default template engine in express

To use template engine, we need to use:

route (app.get)

res.render

templates / partials / views folders

files has to be put in right folders

no need to declare file ext .hbs

Be careful because res.render use index.hbs, but express will show public/index.html if available

The hbs files are basically the same with html files, except for placeholders in this format:

Partials are just like includes (for menu, header...)

To use hbs template without partials, there is no need to require hbs.

BUT to use partials, you HAVE TO require hbs module.

When you change the handble bars partials, nodemon will not auto restart, so you have to extend its scope

To include partials in view files

Serve Error Pages

Handler page for “No page found”

Place this route at the end of the file, below all other routes

You can’s send response twice

to stop after the first response, use return

3. Query String

localhost:1234/weather?location=Hanoi

Use req.query

4. Integrate with back-end JS

File Structure

Back-end code in src

export JSON via HTTP end-point

Front-end code in public

parse JSON into DOM

app.js is the starting point (but in src, act as router as well)

Back-end code modules:

node-fetch

Front-end code modules:

core:

path

fetch (this fetch is only for client side, surprise!!!! not accessiable in Node.js)

npm:

hbs

express

Steps to Integration

Build back-end code

Use app.js and route to build HTTP endpoint

Return JSON via HTTP endpoint (query string or POST)

Build front-end templates

Get JSON and parse into DOM

Tham khảo node-fetch

⁠

Making API Requests with node-fetch Use Node's lightweight node-fetch library to make HTTP to REST API endpoints, or any URL. hackersandslackers.com⁠

⁠

hàm core fetch chỉ xài được ở browser client

hàm node-fetch giống y chang, xài được ở back-end

Bài viết Tham khảo

⁠

This link can't be embedded.⁠

⁠

⁠

This link can't be embedded.⁠

⁠

⁠

Loading viblo.asia⁠

⁠

⁠

Loading viblo.asia⁠

⁠

⁠

Loading viblo.asia⁠

⁠

2. Response Objects

HTML (for web pages in browser)

JSON (for RestAPI)

Serve an entire directory (website with JS, CSS)

Serve dynamic pages

Set default template engine in express

To use template engine, we need to use:

Partials are just like includes (for menu, header...)

Serve Error Pages

3. Query String

4. Integrate with back-end JS

Steps to Integration

Tham khảo node-fetch

Bài viết Tham khảo

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.