Server-Side: Node.js and Express

// JavaScript has NO FUNCTION OVERLOADING. The second declaration
// simply replaces the first — silently.
let product = (x, y)    => x * y;
let product = (x, y, z) => x * y * z;

console.log(product(2, 3));   // NaN  — z is undefined, and 6 * undefined = NaN

// With hundreds of literals across dozens of .js files, you need some
// way to prevent name conflicts. That way is MODULES: literals defined
// within a module are SCOPED TO THAT MODULE.

// ── mod-names.js ───────────────────────────────────────────────
const secret = 'SECRET PHRASE';      // local — NOT exported, stays private

const first_name = 'salah';
const last_name  = 'abid';
module.exports = { first_name, last_name };   // export an OBJECT

// ── mod-utils.js ───────────────────────────────────────────────
const saySelem = (name) => { console.log(`Selem Mr ${name}`); };
module.exports = saySelem;                    // export a FUNCTION (default style)

// ── app.js ─────────────────────────────────────────────────────
const names = require('./mod-names');    // ./ — a LOCAL file, not an npm package
const selem = require('./mod-utils');

selem(names.first_name);   // "Selem Mr salah"
selem(names.secret);       // "Selem Mr undefined"  ← not exported = not visible

// RUN IT:   node app.js     or just   node app
// STOP IT:  Ctrl-C

// On the CLIENT side you must tell the browser a file is a module:
//   <script src="art.js" type="module"></script>
// In Node every file is a module by default (CommonJS).

const { readFileSync, writeFileSync } = require('fs');   // destructured import

console.log('start');

const first  = readFileSync('./content/first.txt',  'utf8');
const second = readFileSync('./content/second.txt', 'utf8');

writeFileSync(
    './content/result.txt',
    `Here is the result : ${first}, ${second}` + "\n",
    { flag: 'a' }        // 'a' for APPENDING (default would overwrite)
);

console.log('Task completed!');

// OUTPUT:  start
//          Task completed!
// …in that order, because Sync versions BLOCK until they finish.

const http = require('http');

const server = http.createServer((req, res) => {
    res.write("This is my response to your request!");
    res.end();                     // end() is REQUIRED — without it the browser hangs
    return;
});

server.listen(5000);
console.log("Listening on port 5000");

// > node simplest-server
// Then open http://127.0.0.1:5000 in the browser.
//
// NOTE: http://127.0.0.1:5000/anything/at/all gives the SAME response.
// There is no routing here at all — which is the point of the next slide.

const http = require('http');

const server = http.createServer((req, res) => {
    if (req.url === '/') {
        res.end("This is the homepage!");
    } else if (req.url === '/about') {
        res.end("This is the ABOUT page!");
    } else {
        res.end(`<h1>Page not Found!</h1>
                 <p><a href="/">Homepage</a></p>`);
    }
    return;
});

server.listen(5000);

// A fuller version writes headers explicitly:
//   res.writeHead(200, {"Content-Type": "text/plain"});
//
// Now imagine twenty routes in this if/else chain. That is why Express
// exists — and why slide 34 arrives when it does.

const { readFile, writeFile } = require('fs');   // the ASYNC versions

console.log('Starting task A...');

readFile('./content/first.txt', 'utf8', (err, result) => {
    if (err) { console.log(err); return; }      // error-first callback convention

    writeFile('./content/result-async.txt',
        `Here is the Async result : ${result}`,
        (err, result) => {
            if (err) { console.log(err); return; }
            console.log('Task A completed!');
        }
    );
});

console.log('starting next task...');

// OUTPUT ORDER — the whole point:
//   Starting task A...
//   starting next task...     ← this line runs BEFORE the file is read
//   Task A completed!         ← the callback fires last

// To let the second read see the first result, the second readFile has
// to be called INSIDE the first callback. Add a third file and a fourth
// and you get a staircase drifting off the right of the screen.
readFile('./content/first.txt', 'utf8', (err, result) => {
    if (err) { console.log(err); return; }
    const first = result;

    readFile('./content/second.txt', 'utf8', (err, result) => {
        if (err) { console.log(err); return; }
        const second = result;

        writeFile('./content/result-async.txt',
            `Here is the result : ${first}, ${second}`,
            (err, result) => {
                if (err) { console.log(err); return; }
                console.log('done with this task');
            }
        );
    });
});

//                    ← ← ←   CALLBACK HELL   → → →

// ── DECLARATION AND INSTANTIATION ──────────────────────────────
// The handler passed to the constructor takes TWO parameters. 
const promiseObj = new Promise((resolve, reject) => {
    doWork();
    if (someCondition)
        resolve(someValue);      // works like a return
    else
        reject(someMessage);     // works like a throw
});

// ── CONSUMING IT ───────────────────────────────────────────────
promiseObj
    .then(someValue => {
        // success — the promise was achieved
    })
    .catch(someMessage => {
        // the promise was not satisfied
    });

// ── WRAPPING A CALLBACK API IN A PROMISE (slide 23) ────────────
const { readFile } = require('fs');

const read = (path) => {
    return new Promise((resolve, reject) => {
        readFile(path, 'utf8', (err, data) => {
            if (err) reject(err);
            else     resolve(data);
        });
    });
};

read('./content/first.txt')
    .then(data => console.log(data))
    .catch(err  => console.log(err));

// ── CHAINING beats nesting — the whole payoff ──────────────────
read('./content/first.txt')
    .then(first  => read('./content/second.txt'))
    .then(second => console.log(second))
    .catch(err   => console.log(err));      // ONE catch for the whole chain

let cities = fetch('/api/cities?country=italy');

// What does `cities` contain? NOT the JSON data. It takes time for the
// service to execute and respond, so fetch returns a PROMISE object.

fetch('/api/cities?country=italy')
    .then(response => {
        console.warn('response received!!!');
        return response.json();      // ← ALSO returns a promise
    })
    .then(data => {
        console.log(data);              // finally the actual data
    })
    .catch(err => console.log(err));

// COMMON MISTAKES (slide 28):
//   1. expecting fetch to return the data directly
//   2. forgetting that response.json() is ALSO asynchronous
//   3. nesting multiple fetches inside each other — callback hell again.
//      CHAIN them with .then, or use async/await:

async function load() {
    try {
        const response = await fetch('/api/cities?country=italy');
        const data     = await response.json();
        console.log(data);
    } catch (err) {
        console.log(err);
    }
}

// Modern browsers PREVENT cross-origin requests by default, which makes
// legitimate sharing between two domains harder.
//
// An ORIGIN is a protocol + domain + port. All three must match.
//   https://a.com      vs  http://a.com       ← different (protocol)
//   https://a.com      vs  https://b.com      ← different (domain)
//   http://a.com:3000  vs  http://a.com:5000  ← different (port)

// An API that wants to allow ANY domain adds this header to responses:
//   Access-Control-Allow-Origin: *

// In Node:
// > npm install cors
const cors = require('cors');
app.use(cors());   // allows the API to be accessed through JavaScript

# npm = Node Package Manager
npm init -y                # creates a basic package.json (-y skips the questionnaire)
npm install express        # installs into node_modules AND adds it to dependencies
npm install nodemon -D     # a DEV dependency — needed at development time only
npm install -g nodemon     # or globally
npm install                # restores node_modules from package.json
npm run start              # runs the "start" script
npm run dev                # runs the "dev" script — nodemon restarts on save

// package.json
{
  "name": "05-npm-demo",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "node app.js",
    "dev":   "nodemon app.js"
  },
  "dependencies":    { "express": "^4.18.2" },
  "devDependencies": { "nodemon": "^2.0.20" }
}

# .gitignore — node_modules is NEVER shared. Teammates recreate it
# from package.json with `npm install`.
/node-modules

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

// A — the public folder becomes visible to HTTP requests, so
//     http://localhost:3000/css/styles.css works if css/ is inside public/
app.use( express.static('public') );

// B — a route is a URL: a series of folders, files, or parameter data
app.get('/', (request, response) => {
    response.sendFile('./pages/index.html');
});

// C
app.get('/about', (request, response) => {
    response.sendFile('./pages/about.html');
});

// D — ANY other request falls through to here. Order matters:
//     this must come LAST or it swallows everything.
app.use( (request, response) => {
    response.status(404).sendFile('./pages/404.html');
});

app.listen(3000, () => { console.log('listening on 3000'); });

// A request tries A, then B, then C, then D — the FIRST match wins.

// app.use() INSTALLS a middleware function on the chain.

// At the ROOT of the route — runs for EVERY request
app.use( (req, res, next) => {
    console.log(`${req.method} ${req.path} - ${req.ip}`);
    next();          // ← WITHOUT next() the request HANGS FOREVER
});

// Mounted at a SPECIFIC route:  app.METHOD(path, middleware, callback)
app.get('/now',
    function (req, res, next) {
        req.time = new Date().toString();    // attach data to the request
        next();                                // hand on to the next function
    },
    function (req, res) {
        res.json({ time: req.time });          // the last one SENDS the response
    }
);

// Built-in and third-party middleware you have already met:
app.use(express.static('public'));                        // serve static files
app.use(cors());                                          // allow cross-origin
app.use(bodyParser.urlencoded({ extended: false }));     // parse form bodies

# .env — any number of key=value pairs
PORT=8080
BUILD=development

// > npm install dotenv
require('dotenv').config();          // load .env into process.env

console.log(process.env);            // see everything available
console.log("build type=" + process.env.BUILD);

app.listen(process.env.PORT);        // never hard-code the port again

// .env belongs in .gitignore too — it holds secrets.

// ── data-module.js — slide 42 ──────────────────────────────────
const fs   = require('fs');
const path = require('path');

const jsonPath = path.join(__dirname, 'data', 'SE2022.json');
//   __dirname = the folder THIS file is in. path.join builds a path
//   that works on Windows and Linux alike.

let curriculum;
fs.readFile(jsonPath, (err, data) => {
    if (err) console.log('Unable to read json data file');
    else     curriculum = JSON.parse(data);
});

const getData = () => { return curriculum; };
module.exports = getData;

// ── app.js ─────────────────────────────────────────────────────
const express = require('express');
require('dotenv').config();
const getData = require('./data-module');

const app = express();

app.get('/', (req, resp) => { resp.json(getData()); });   // res.json sends JSON

app.listen(process.env.PORT, () => {
    console.log("Listening at port… " + process.env.PORT);
});

// WHY: with five or six routes a single Node file becomes too complex.
// Separate the routing, and separate the handler logic, into modules.

// ── 1. ROUTE PARAMS — the :param syntax (slide 43) ─────────────
app.get('/echo/:word', (req, res) => {
    let param = req.params.word;
    res.json({ echo: param });
});
// GET https://ip:port/echo/hello  →  'hello' lands in req.params.word

// ── 2. QUERY PARAMS — URL-encoded queries (slide 44) ───────────
app.get('/employee', (req, res) => {
    res.json({ employee: `${req.query.first} ${req.query.last}` });
});
app.post('/employee', (req, res) => {
    res.json({ employee: `${req.query.first} ${req.query.last}` });
});
// http://ip:port/employee?first=skander&last=turki

// ── 3. FORM BODY (slide 45) ────────────────────────────────────
//   <form action="/name" method="post">
//     <label>First Name :</label><input type="text" name="first"><br>
//     <label>Last Name :</label><input type="text" name="last"><br>
//     <input type="submit" value="Submit">
//   </form>

// A payload (POST, DELETE…) needs middleware to be parsed:
const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({ extended: false }));

app.post('/name', (req, res) => {
    let p_first = req.body.first;      // ← req.BODY, not query, not params
    res.send(`Hello ${p_first}`);
});

// Modern Express has this built in: app.use(express.urlencoded({extended:false}))

// > npm install ejs

// register the view engine
app.set('view engine', 'ejs');

// templates go in /views by DEFAULT — configure only if you want another
app.set('views', 'otherThanViewsFolder');

// response.render() sends the template — 'index' means views/index.ejs
app.get('/', (request, response) => {
    response.render('index');
});

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

app.set('view engine', 'ejs');
app.use(express.static('public'));

app.get('/', (req, res) => {
    const blogs = [
        { title: 'First post',  snippet: '…' },
        { title: 'Second post', snippet: '…' },
    ];
    // SECOND ARGUMENT = the data sent to the template
    res.render('index', { title: 'Home', blogs: blogs });
});

app.get('/about',  (req, res) => res.render('about',  { title: 'About' }));
app.get('/create', (req, res) => res.render('create', { title: 'Create a new blog' }));

// catch-all 404, rendered rather than sent as a file
app.use((req, res) => {
    res.status(404).render('404', { title: '404' });
});

app.listen(3000);

<html lang="en">
<%- include("./partials/head.ejs") %>

<body>
  <%- include("./partials/nav.ejs") %>

  <div class="blogs content">
    <h2><%= title %>: All Blogs</h2>

    <% if (blogs.length > 0) { %>
      <% blogs.forEach(blog => { %>
        <h3 class="title"><%= blog.title %></h3>
        <p class="snippet"><%= blog.snippet %></p>
      <% }) %>
    <% } else { %>
      <p>There are no blogs to display...</p>
    <% } %>
  </div>

  <%- include("./partials/footer.ejs") %>
</body>
</html>

<!-- THE THREE TAGS:
     <%  %>   runs JavaScript, outputs NOTHING       (if, forEach, loops)
     <%= %>   outputs the VALUE of an expression      (escaped — safe)
     <%- %>   outputs UNESCAPED — used for include()

     PARTIALS let one .ejs file be included in another so shared parts
     are reused. Organise them under views/partials/ :
        /views/partials/head.ejs
        /views/partials/header.ejs
        /views/partials/footer.ejs                                 -->