Switch to TypeScript and express & Add stats API (#1)

* Switch to node package

Setup environment for:
- Typescript
- express with ejs as the view engine

* Apply prettier formatting

* Read API stats from Redis

* Apply prettier formatting

* Add Dockerfile

* Add environment variables for configuration to README.md

* Log redis errors correctly

* Connect to redis before executing requests

* Rename json properties to match the current ones

* Configure Redis error handler and client correctly

* Remove workflow to fix pnpm dependencies

GitHub supports pnpm for dependabot natively now:
https://github.blog/changelog/2023-06-12-dependabot-version-updates-now-supports-pnpm/

* Add REDIS_SOCKET env var and prefer it over REDIS_URL

* Add default.nix

* Add SOCKET_PATH env var and prefer it over HOST and PORT

* Bump website version

* Add node symlink to output directory

* Add DATA_PATH env var

* Apply prettier formatting

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

.dockerignore

@@ -0,0 +1,6 @@
+dist/
+node_modules/
+data/
+.github/
+.git/
+README.md

.eslintignore

@@ -0,0 +1 @@
+**/*.js

.eslintrc.js

@@ -0,0 +1,7 @@
+/* eslint-env node */
+module.exports = {
+    extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
+    parser: '@typescript-eslint/parser',
+    plugins: ['@typescript-eslint'],
+    root: true,
+};

.github/dependabot.yml

@@ -0,0 +1,15 @@
+version: 2
+updates:
+  - package-ecosystem: npm
+    directory: /
+    reviewers:
+      - TSRBerry
+    schedule:
+      interval: daily
+
+  - package-ecosystem: github-actions
+    directory: /
+    reviewers:
+      - TSRBerry
+    schedule:
+      interval: daily

.github/workflows/check.yml

@@ -0,0 +1,51 @@
+on:
+  pull_request:
+
+permissions:
+  contents: read
+  checks: write
+
+concurrency:
+  group: check-${{ github.ref_name }}
+  cancel-in-progress: true
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+
+    - uses: pnpm/action-setup@v2
+      with:
+        version: latest
+
+    - uses: actions/setup-node@v3
+      with:
+        node-version-file: ".nvmrc"
+        cache: "pnpm"
+
+    - name: Install dependencies
+      run: pnpm install --frozen-lockfile
+
+    - name: Run ESLint
+      run: node_modules/.bin/eslint .
+
+  format:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+
+    - uses: pnpm/action-setup@v2
+      with:
+        version: latest
+
+    - uses: actions/setup-node@v3
+      with:
+        node-version-file: ".nvmrc"
+        cache: "pnpm"
+
+    - name: Install dependencies
+      run: pnpm install --frozen-lockfile
+
+    - name: Run Prettier
+      run: node_modules/.bin/prettier -c .

.github/workflows/code-quality.yml

@@ -0,0 +1,93 @@
+on:
+    push:
+        branches-ignore:
+        - "master"
+        - "dependabot/**"
+        paths-ignore:
+        - ".*"
+        - "README.md"
+        - "tsconfig.json"
+        - "nodemon.json"
+
+permissions:
+    checks: write
+    contents: write
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+
+    - uses: pnpm/action-setup@v2
+      with:
+        version: latest
+
+    - uses: actions/setup-node@v3
+      with:
+        node-version-file: ".nvmrc"
+        cache: "pnpm"
+
+    - name: Configure git
+      run: |
+        git config --global user.name github-actions[bot]
+        git config --global user.email 41898282+github-actions[bot]@users.noreply.github.com
+
+    - name: Install dependencies
+      run: pnpm install --frozen-lockfile
+
+    - name: Run ESLint
+      run: node_modules/.bin/eslint --fix .
+
+    - name: Check if files have been modified
+      id: mod_check
+      run: |
+        [[ $(git status -s | wc -l) -le 1 ]] \
+        && echo "is-dirty=false" >> "$GITHUB_OUTPUT" \
+        || echo "is-dirty=true" >> "$GITHUB_OUTPUT"
+
+    - name: Commit and push changes
+      if: steps.mod_check.outputs.is-dirty == 'true'
+      run: |
+        git add .
+        git commit -m "Apply linter fixes"
+        git push
+
+  format:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+
+    - uses: pnpm/action-setup@v2
+      with:
+        version: latest
+
+    - uses: actions/setup-node@v3
+      with:
+        node-version-file: ".nvmrc"
+        cache: "pnpm"
+
+    - name: Configure git
+      run: |
+        git config --global user.name github-actions[bot]
+        git config --global user.email 41898282+github-actions[bot]@users.noreply.github.com
+
+    - name: Install dependencies
+      run: pnpm install --frozen-lockfile
+
+    - name: Run Prettier
+      run: node_modules/.bin/prettier -w .
+
+    - name: Check if files have been modified
+      id: mod_check
+      run: |
+        [[ $(git status -s | wc -l) -le 1 ]] \
+        && echo "is-dirty=false" >> "$GITHUB_OUTPUT" \
+        || echo "is-dirty=true" >> "$GITHUB_OUTPUT"
+
+    - name: Commit and push changes
+      if: steps.mod_check.outputs.is-dirty == 'true'
+      run: |
+        git add .
+        git commit -m "Apply prettier formatting"
+        git push

.gitignore

@@ -0,0 +1,140 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+# IDE / Code editor directories
+.idea/
+.vscode/
+
+# Direnv files
+.envrc
+
+# Data directory
+data/

.nvmrc

@@ -0,0 +1 @@
+lts/hydrogen

.prettierignore

@@ -0,0 +1,6 @@
+dist/
+public/
+*.js
+.github/
+pnpm-lock.yaml
+nodemon.json

.prettierrc.json

@@ -0,0 +1,8 @@
+{
+  "endOfLine": "lf",
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": false,
+  "bracketSpacing": true
+}

Dockerfile

@@ -0,0 +1,26 @@
+FROM node:lts-hydrogen as common
+
+ENV NPM_CONFIG_PREFIX=/home/node/.npm-global
+ENV PATH=$PATH:/home/node/.npm-global/bin
+
+RUN npm i -g pnpm
+
+WORKDIR /home/node/app
+
+FROM common as build
+
+COPY . /home/node/app
+
+RUN pnpm install --frozen-lockfile
+RUN pnpm build
+
+FROM common as app
+
+COPY --from=build --chown=node:node /home/node/app/dist /home/node/app/dist
+COPY --from=build --chown=node:node /home/node/app/public /home/node/app/public
+COPY --from=build --chown=node:node /home/node/app/package.json /home/node/app/pnpm-lock.yaml /home/node/app/
+COPY --from=build --chown=node:node /home/node/app/node_modules /home/node/app/node_modules
+
+RUN mkdir /home/node/app/data
+
+ENTRYPOINT [ "node", "." ]

README.md

@@ -16,9 +16,19 @@
     </a>
 </p>
 
-## Changelog
+## Configuration
 
-The complete list of changes is available [here](CHANGELOG.md)
+This app can be configured using the following environment variables:
+
+| Name           | Description                                                                               | Default value | Notes                                                                                                        |
+| :------------- | ----------------------------------------------------------------------------------------- | :-----------: | ------------------------------------------------------------------------------------------------------------ |
+| `NODE_ENV`     | This should be set to `production` or `development` depending on the current environment. |     `""`      |                                                                                                              |
+| `DATA_PATH`    | The path to the data directory of this server.                                            |   `"data"`    | This can either be a relative path or an absolute path. Currently this directory only contains the log file. |
+| `SOCKET_PATH`  | The path to the unix socket this server should be listening on.                           |     `""`      | If this is not empty `HOST` and `PORT` will be ignored.                                                      |
+| `HOST`         | The address this server should be listening on.                                           | `"127.0.0.1"` |                                                                                                              |
+| `PORT`         | The port this server should be using.                                                     |    `3000`     |                                                                                                              |
+| `REDIS_URL`    | The URL of the redis server.                                                              |     `""`      | Format: `redis[s]://[[username][:password]@][host][:port][/db-number]`                                       |
+| `REDIS_SOCKET` | The path to the unix socket of the redis server.                                          |     `""`      | If this is not empty `REDIS_URL` will be ignored.                                                            |
 
 ## Contribute
 
@@ -40,10 +50,10 @@ If you'd like to support the project financially, Ryujinx has an active Patreon
 
 All developers working on the project do so in their free time, but the project has several expenses:
 
-* Hackable Nintendo Switch consoles to reverse-engineer the hardware
-* Additional computer hardware for testing purposes (e.g. GPUs to diagnose graphical bugs, etc.)
-* Licenses for various software development tools (e.g. Jetbrains, IDA)
-* Web hosting and infrastructure maintenance (e.g. LDN servers)
+- Hackable Nintendo Switch consoles to reverse-engineer the hardware
+- Additional computer hardware for testing purposes (e.g. GPUs to diagnose graphical bugs, etc.)
+- Licenses for various software development tools (e.g. Jetbrains, IDA)
+- Web hosting and infrastructure maintenance (e.g. LDN servers)
 
 All funds received through Patreon are considered a donation to support the project. Patrons receive early access to progress reports and exclusive access to developer interviews.
 

default.nix

@@ -0,0 +1,46 @@
+{ pkgs ? (import <nixpkgs> {})}:
+with pkgs;
+with (import (fetchFromGitHub {
+  owner = "TSRBerry";
+  repo = "pnpm2nix";
+  rev = "v0.1";
+  sha256 = "0vyxcqhdazr17hym4fgh8dqq97lplmp5fmpwmdq2xk73mw060nvq";
+}) { inherit pkgs; });
+
+
+let
+
+  buildPackage = mkPnpmPackage {
+    src = nix-gitignore.gitignoreSource [] ./.;
+
+    linkDevDependencies = true;
+
+    postBuild = ''
+      cp -R "node_modules/$pname"/* ./
+
+      export PATH="node_modules/.bin:$PATH"
+
+      mkdir -p "$out/dist"
+
+      npm run build -- --outDir "$out/dist"
+      mv public package.json pnpm-lock.yaml "$out/"
+    '';
+
+    postInstall = ''
+      rm -rf "$out/bin" "$lib/node_modules/$pname"
+    '';
+  };
+
+  package = mkPnpmPackage {
+    src = buildPackage;
+
+    postInstall = ''
+      mv "$lib/node_modules/$pname/dist" "$lib/node_modules/$pname/public" "$lib/node_modules/$pname/package.json" "$out/"
+      rm -rf "$lib/node_modules/$pname"
+
+      ln -s "$lib/node_modules" "$out/node_modules"
+      ln -s "$npm_config_nodedir/bin/node" "$out/bin/node"
+    '';
+  };
+
+in package

nodemon.json

@@ -0,0 +1,13 @@
+{
+    "verbose": true,
+    "env": {
+        "NODE_ENV": "development"
+    },
+    "watch": [
+        "src",
+        "public",
+        "views"
+    ],
+    "ext": "ts,js,html,css,ejs,png",
+    "exec": "pnpm run dev"
+}

package.json

@@ -0,0 +1,42 @@
+{
+  "name": "ryujinx-ldn-website",
+  "version": "1.0.0",
+  "private": true,
+  "author": "Ryujinx",
+  "license": "MIT",
+  "description": "Ryujinx LDN website",
+  "repository": {
+    "url": "https://github.com/Ryujinx/Ryujinx-Ldn-Website"
+  },
+  "main": "dist/index.js",
+  "scripts": {
+    "format": "prettier -w .",
+    "lint": "eslint --fix .",
+    "build": "tsc",
+    "prestart": "pnpm build",
+    "start": "node .",
+    "dev": "pnpm build && pnpm start",
+    "serve": "nodemon",
+    "prepack": "pnpm build"
+  },
+  "dependencies": {
+    "ejs": "^3.1.9",
+    "express": "~4.18.2",
+    "express-actuator": "^1.8.4",
+    "redis": "^4.6.7",
+    "winston": "^3.9.0"
+  },
+  "devDependencies": {
+    "@tsconfig/recommended": "^1.0.2",
+    "@types/express": "^4.17.17",
+    "@types/express-actuator": "^1.8.0",
+    "@types/node": "^20.2.5",
+    "@typescript-eslint/eslint-plugin": "^5.59.7",
+    "@typescript-eslint/parser": "^5.59.7",
+    "eslint": "^8.41.0",
+    "eslint-config-prettier": "^8.8.0",
+    "nodemon": "^2.0.22",
+    "prettier": "2.8.8",
+    "typescript": "^5.0.4"
+  }
+}

public/main.js

@@ -1,25 +1,25 @@
-$(document).ready(function() {
-    function encode(r){return r.replace(/[\x26\x0A\<>'"]/g,function(r){return"&#"+r.charCodeAt(0)+";"})}
+$(document).ready(function () {
+    function encode(r) { return r.replace(/[\x26\x0A\<>'"]/g, function (r) { return "&#" + r.charCodeAt(0) + ";" }) }
 
-    $.getJSON("/api", function(data) {
-        $(".players-public").text(data.public_players_count);
-        $(".players-private").text(data.private_players_count);
-        $(".players-total").text(data.total_players_count);
+    $.getJSON("/api", function (data) {
+        $(".players-public").text(data.public_player_count);
+        $(".players-private").text(data.private_player_count);
+        $(".players-total").text(data.total_player_count);
 
-        $(".games-public").text(data.public_games_count);
-        $(".games-private").text(data.private_games_count);
-        $(".games-total").text(data.total_games_count);
+        $(".games-public").text(data.public_game_count);
+        $(".games-private").text(data.private_game_count);
+        $(".games-total").text(data.total_game_count);
 
         $(".in-progress-total").text(data.in_progress_count);
         $(".proxy-server-total").text(data.master_proxy_count);
     });
 
-    $.getJSON("/api/public_games", function(data) {
-        $.each(data, function() {
+    $.getJSON("/api/public_games", function (data) {
+        $.each(data, function () {
             $(".public-games").append('<div class="card margin-bt shadow"><div class="card-header"><div class="row"><div class="col-sm-10"><i class="red-sw fas fa-gamepad"></i> ' + this.game_name + ' <span class="badge badge-dark">' + this.title_id + '</span> <span class="badge badge-dark">v' + this.title_version + '</span></div>'
-                                    + '<div class="col-sm-2 games-players-number"><i class="blue-sw fas fa-users"></i> ' + this.player_count + '/' + this.max_player_count + ' Players</div></div></div>'
-                                    + '<div class="card-body"><blockquote class="blockquote mb-0"><i class="blue-sw fas fa-home"></i> ' + this.players.map(player => encode(player)).join(', <i class="fas fa-user"></i> ')
-                                    + '<footer class="blockquote-footer">' + ((this.mode == "P2P") ? '<i class="blue-sw fas fa-people-arrows"></i> ' : '<i class="blue-sw fas fa-server"></i> ') + this.mode + ' (' + this.status + ')</footer></blockquote></div></div>');
+                + '<div class="col-sm-2 games-players-number"><i class="blue-sw fas fa-users"></i> ' + this.player_count + '/' + this.max_player_count + ' Players</div></div></div>'
+                + '<div class="card-body"><blockquote class="blockquote mb-0"><i class="blue-sw fas fa-home"></i> ' + this.players.map(player => encode(player)).join(', <i class="fas fa-user"></i> ')
+                + '<footer class="blockquote-footer">' + ((this.mode == "P2P") ? '<i class="blue-sw fas fa-people-arrows"></i> ' : '<i class="blue-sw fas fa-server"></i> ') + this.mode + ' (' + this.status + ')</footer></blockquote></div></div>');
         });
     });
 });

src/api.ts

@@ -0,0 +1,46 @@
+import { Router } from "express";
+import { redisClient } from "./app";
+
+const router = Router();
+
+router.get("/", async (req, res, next) => {
+  if (!redisClient.isOpen) {
+    await redisClient.connect();
+  }
+
+  const result = await redisClient.json.get("ldn");
+
+  if (result == null || typeof result != "object") {
+    return res.sendStatus(404);
+  }
+
+  return res.send(result);
+});
+
+router.get("/public_games", async (req, res, next) => {
+  let gameFilter = "";
+
+  if (req.query.titleid != null && (req.query.titleid as string)?.length > 0) {
+    gameFilter = req.query.titleid as string;
+  }
+
+  if (!redisClient.isOpen) {
+    await redisClient.connect();
+  }
+
+  const results = await redisClient.json.get("games");
+
+  if (results == null || typeof results != "object") {
+    return res.sendStatus(404);
+  }
+
+  const games = Object.entries(results).map(([_, game]) => game);
+
+  if (gameFilter.length > 0) {
+    return res.send(games.filter((game) => game.title_id === gameFilter));
+  }
+
+  return res.send(games);
+});
+
+export default router;

src/app.ts

@@ -0,0 +1,83 @@
+import express from "express";
+import actuator from "express-actuator";
+import {
+  RedisClientOptions,
+  RedisFunctions,
+  RedisModules,
+  RedisScripts,
+  createClient,
+} from "redis";
+import winston from "winston";
+import apiRouter from "./api";
+import { errorLogger, requestLogger } from "./middleware";
+import { mkdirSync } from "fs";
+
+// Prepare data directory
+const dataDirectory = process.env.DATA_PATH ?? "data";
+mkdirSync(dataDirectory, { recursive: true });
+
+// Init logger
+const loggerInstance = winston.createLogger({
+  level: process.env.NODE_ENV === "production" ? "info" : "debug",
+  transports: [
+    new winston.transports.Console(),
+    new winston.transports.File({
+      filename: `${dataDirectory}/ryujinx-ldn-website.log`,
+    }),
+  ],
+});
+
+export const logger = loggerInstance.child({
+  source: "Node",
+});
+
+const redisClientOptions: RedisClientOptions<
+  RedisModules,
+  RedisFunctions,
+  RedisScripts
+> = {
+  // NOTE: Enable this if we ever start using cluster mode
+  // readonly: true,
+};
+
+// Prefer unix socket over REDIS_URL
+if (process.env.REDIS_SOCKET != null && process.env.REDIS_SOCKET.length > 0) {
+  redisClientOptions.socket = {
+    path: process.env.REDIS_SOCKET,
+  };
+} else {
+  redisClientOptions.url = process.env.REDIS_URL;
+}
+
+// Init Redis client
+export const redisClient = createClient(redisClientOptions);
+
+redisClient.on("error", (err: Error) =>
+  loggerInstance.error(err.message, {
+    source: "Redis client",
+    stacktrace: err.stack,
+  })
+);
+
+// Init express server
+export const app = express();
+app.set("view engine", "ejs");
+
+// This is set by NODE_ENV
+if (app.get("env") === "production") {
+  // Trust first proxy
+  app.set("trust proxy", 1);
+}
+
+// Readiness/Liveness probes and other application info
+app.use(actuator());
+
+// Logger middleware
+app.use(requestLogger);
+
+// Set up routes
+app.use(express.static("public"));
+app.use("/api", apiRouter);
+
+// Error-handling
+app.use(errorLogger);

src/index.ts

@@ -0,0 +1,23 @@
+import { env } from "process";
+import { app, logger } from "./app";
+import http from "http";
+
+const server = http.createServer(app);
+
+if (process.env.SOCKET_PATH != null && process.env.SOCKET_PATH.length > 0) {
+  server.listen({
+    path: process.env.SOCKET_PATH,
+    readableAll: true,
+    writableAll: true,
+  });
+} else {
+  server.listen(parseInt(env.PORT || "3000"), env.HOST || "127.0.0.1");
+}
+
+server.on("error", (error: Error) => {
+  logger.error("An error occurred.", error);
+});
+
+server.on("listening", () => {
+  logger.info("Startup done!", server.address());
+});

src/middleware.ts

@@ -0,0 +1,21 @@
+import { Request, Response, NextFunction } from "express";
+import { logger } from "./app";
+import { loggerDefaultMetadata } from "./utils";
+
+export function requestLogger(req: Request, res: Response, next: NextFunction) {
+  logger.debug("Incoming request.", loggerDefaultMetadata(req));
+  next();
+}
+
+export function errorLogger(
+  err: Error,
+  req: Request,
+  res: Response,
+  next: NextFunction
+) {
+  logger.error(err.message, {
+    error: err,
+    ...loggerDefaultMetadata(req),
+  });
+  next(err);
+}

src/utils.ts

@@ -0,0 +1,9 @@
+import { Request } from "express";
+
+export function loggerDefaultMetadata(request: Request): object {
+  return {
+    userAgent: request.header("User-Agent"),
+    url: request.url,
+    ip: request.ip,
+  };
+}

tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "@tsconfig/recommended/tsconfig.json",
+  "include": ["src/**/*"],
+  "exclude": ["**/*.spec.ts"],
+  "compilerOptions": {
+    "outDir": "dist"
+  }
+}