Demo Site: Convert custom server to TypeScript (#2595)

Convert the custom server to TypeScript. This adds a compile step - as
it is common for TypeScript.
Based on 
https://github.com/vercel/next.js/tree/canary/examples/custom-server.

demo/site/.gitignore

@@ -48,4 +48,5 @@ src/comet-config.json
 
 lang
 lang-extracted
-lang-compiled
+lang-compiled
+/dist

demo/site/.prettierignore

@@ -2,4 +2,5 @@
 block-meta.json
 lang-compiled/
 lang/
-preBuild/
+preBuild/
+dist/

demo/site/package.json

@@ -3,8 +3,8 @@
     "version": "1.0.0",
     "private": true,
     "scripts": {
-        "build": "run-s intl:compile && run-p gql:types generate-block-types && next build",
-        "dev": "run-s intl:compile && run-p gql:types generate-block-types && NODE_OPTIONS='--inspect=localhost:9230' node server.js",
+        "build": "run-s intl:compile && run-p gql:types generate-block-types && tsc --project tsconfig.server.json && next build",
+        "dev": "run-s intl:compile && run-p gql:types generate-block-types && NODE_OPTIONS='--inspect=localhost:9230' ts-node --project tsconfig.server.json server.ts",
         "export": "next export",
         "generate-block-types": "comet generate-block-types",
         "generate-block-types:watch": "chokidar -s \"**/block-meta.json\" -c \"$npm_execpath generate-block-types\"",
@@ -16,7 +16,7 @@
         "lint:eslint": "eslint --max-warnings 0 --config ./.eslintrc.cli.js --ext .ts,.tsx,.js,.jsx,.json,.md src/ package.json",
         "lint:prettier": "npx prettier --check './**/*.{js,json,md,yml,yaml}'",
         "lint:tsc": "tsc --project .",
-        "serve": "NODE_ENV=production node server.js"
+        "serve": "NODE_ENV=production node dist/server.js"
     },
     "dependencies": {
         "@comet/cms-site": "workspace:*",

demo/site/server.js → demo/site/server.ts

@@ -1,12 +1,10 @@
-// server.js
-const { createServer } = require("http");
-const { parse } = require("url");
-const next = require("next");
-const fs = require("fs");
+import { createServer } from "http";
+import next from "next";
+import { parse } from "url";
 
 const dev = process.env.NODE_ENV !== "production";
 const hostname = "localhost";
-const port = process.env.APP_PORT ?? 3000;
+const port = parseInt(process.env.PORT || "3000", 10);
 const cdnOriginCheckSecret = process.env.CDN_ORIGIN_CHECK_SECRET;
 
 // when using middleware `hostname` and `port` must be provided below
@@ -22,7 +20,8 @@ app.prepare()
             try {
                 // Be sure to pass `true` as the second argument to `url.parse`.
                 // This tells it to parse the query portion of the URL.
-                const parsedUrl = parse(req.url, true);
+                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                const parsedUrl = parse(req.url!, true);
 
                 if (cdnOriginCheckSecret) {
                     if (req.headers["x-cdn-origin-check"] !== cdnOriginCheckSecret) {
@@ -37,9 +36,9 @@ app.prepare()
                 res.statusCode = 500;
                 res.end("internal server error");
             }
-        }).listen(port, (err) => {
-            if (err) throw err;
-            console.log(`> Ready on http://localhost:${port}`);
-        });
+        }).listen(port);
+
+        // eslint-disable-next-line no-console
+        console.log(`> Ready on http://localhost:${port}`);
     })
     .catch((error) => console.error(error));

demo/site/tracing.js → demo/site/tracing.ts

@@ -1,8 +1,8 @@
-const { diag, DiagConsoleLogger, DiagLogLevel } = require("@opentelemetry/api");
-const opentelemetry = require("@opentelemetry/sdk-node");
-const { getNodeAutoInstrumentations } = require("@opentelemetry/auto-instrumentations-node");
-const { OTLPTraceExporter } = require("@opentelemetry/exporter-trace-otlp-http");
-const { IncomingMessage } = require("http");
+import { diag, DiagConsoleLogger, DiagLogLevel } from "@opentelemetry/api";
+import { getNodeAutoInstrumentations } from "@opentelemetry/auto-instrumentations-node";
+import { OTLPTraceExporter } from "@opentelemetry/exporter-trace-otlp-http";
+import * as opentelemetry from "@opentelemetry/sdk-node";
+import { IncomingMessage } from "http";
 
 diag.setLogger(new DiagConsoleLogger(), DiagLogLevel.INFO);
 

demo/site/tsconfig.server.json

@@ -0,0 +1,12 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "module": "commonjs",
+        "outDir": "dist",
+        "lib": ["es2019"],
+        "target": "es2019",
+        "isolatedModules": false,
+        "noEmit": false
+    },
+    "include": ["server.ts", "tracing.ts"]
+}