Initial content

Chapter 09/part2app/dist/server/server.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const http_1 = require("http");
+const express_1 = __importDefault(require("express"));
+const testHandler_1 = require("./testHandler");
+const http_proxy_1 = __importDefault(require("http-proxy"));
+const helmet_1 = __importDefault(require("helmet"));
+const port = 5000;
+const expressApp = (0, express_1.default)();
+const proxy = http_proxy_1.default.createProxyServer({
+    target: "http://localhost:5100", ws: true
+});
+expressApp.use((0, helmet_1.default)());
+expressApp.use(express_1.default.json());
+expressApp.post("/test", testHandler_1.testHandler);
+expressApp.use(express_1.default.static("static"));
+expressApp.use(express_1.default.static("node_modules/bootstrap/dist"));
+expressApp.use((req, resp) => proxy.web(req, resp));
+const server = (0, http_1.createServer)(expressApp);
+server.on('upgrade', (req, socket, head) => proxy.ws(req, socket, head));
+server.listen(port, () => console.log(`HTTP Server listening on port ${port}`));

Chapter 09/part2app/dist/server/testHandler.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.testHandler = void 0;
+const testHandler = async (req, resp) => {
+    resp.setHeader("Content-Type", "application/json");
+    resp.json(req.body);
+    resp.end();
+};
+exports.testHandler = testHandler;

Chapter 09/part2app/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "part2app",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "server": "tsc-watch --noClear --onsuccess \"node dist/server/server.js\"",
+    "client": "webpack serve",
+    "start": "npm-run-all --parallel server client"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "bootstrap": "^5.3.2",
+    "express": "^4.18.2",
+    "helmet": "^7.1.0",
+    "http-proxy": "^1.18.1"
+  },
+  "devDependencies": {
+    "@tsconfig/node20": "^20.1.2",
+    "@types/express": "^4.17.20",
+    "@types/node": "^20.6.1",
+    "npm-run-all": "^4.1.5",
+    "tsc-watch": "^6.0.4",
+    "typescript": "^5.2.2",
+    "webpack": "^5.89.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1"
+  }
+}

Chapter 09/part2app/src/client/client.js

@@ -0,0 +1,12 @@
+document.addEventListener('DOMContentLoaded', function() {
+    document.getElementById("btn").addEventListener("click", sendReq);
+});
+
+sendReq = async () => {
+    const response = await fetch("/test", {
+        method: "POST", body: JSON.stringify({message: "Hello, World"}), 
+        headers: { "Content-Type": "application/json" }
+    });
+    document.getElementById("msg").textContent = response.statusText;
+    document.getElementById("body").innerHTML = await response.text(); 
+};  

Chapter 09/part2app/src/server/server.ts

@@ -0,0 +1,27 @@
+import { createServer } from "http";
+import express, {Express } from "express";
+import { testHandler } from "./testHandler";
+import httpProxy from "http-proxy";
+import helmet from "helmet";
+
+const port = 5000;
+
+const expressApp: Express = express();
+
+const proxy = httpProxy.createProxyServer({
+    target: "http://localhost:5100", ws: true
+});
+
+expressApp.use(helmet());
+expressApp.use(express.json());
+expressApp.post("/test", testHandler);
+expressApp.use(express.static("static"));
+expressApp.use(express.static("node_modules/bootstrap/dist"));
+expressApp.use((req, resp) => proxy.web(req, resp));
+
+const server = createServer(expressApp);
+
+server.on('upgrade', (req, socket, head) => proxy.ws(req, socket, head));
+
+server.listen(port, 
+    () => console.log(`HTTP Server listening on port ${port}`));

Chapter 09/part2app/src/server/testHandler.ts

@@ -0,0 +1,7 @@
+import { Request, Response } from "express";
+
+export const testHandler = async (req: Request, resp: Response) => {    
+    resp.setHeader("Content-Type", "application/json")
+    resp.json(req.body);
+    resp.end();        
+}

Chapter 09/part2app/static/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <script src="/bundle.js"></script>
+        <link href="css/bootstrap.min.css" rel="stylesheet" />
+    </head>
+    <body>
+        <button id="btn" class="btn btn-primary m-2">Send Request</button>
+        <table class="table table-striped">
+            <tbody>
+                <tr><th>Status</th><td id="msg"></td></tr>
+                <tr><th>Response</th><td id="body"></td></tr>
+            </tbody>
+       </table>
+    </body>
+</html>

Chapter 09/part2app/tsconfig.json

@@ -0,0 +1,8 @@
+{
+    "extends": "@tsconfig/node20/tsconfig.json",
+     "compilerOptions": {                       
+         "rootDir": "src/server",   
+         "outDir": "dist/server/"
+     },
+     "include": ["src/server/**/*"]
+}

Chapter 09/part2app/webpack.config.mjs

@@ -0,0 +1,19 @@
+import path from "path";
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+export default  {
+    mode: "development",
+    entry: "./src/client/client.js",
+    devtool: "source-map",    
+    output: {
+        path: path.resolve(__dirname, "dist/client"),
+        filename: "bundle.js"
+    },
+    devServer: {
+        static: ["./static"],         
+        port: 5100,
+        client: { webSocketURL: "http://localhost:5000/ws" }
+    }
+};