Für bestimmte Anwendungsszenarien kann es sinnvoll sein, dass dein NodeJS dynamische Routen lädt. Dazu habe ich in meinem Projekt etwas umgesetzt, was ich hier gerne teilen möchte.

Dynamische Routen sind z.B. sinnvoll, wenn man, wie ich, einen „App-Store“ implementiert und man nicht den ganzen Quelltext ändern möchte.

Zunächst legt man im Stamm einen Ordner „apps“ an. Hierunter werden dann Unterordner (pro App einer) angelegt. Zusätzlich wird dort eine index.js angelegt. Diese sieht so aus:

Dynamische Router-Datei

const router = require('express').Router();
const fs = require('fs')
fs.readdirSync(__dirname).forEach(function (file) {
    if (file == "index.js") return;
    if (file == "app.config") return;
    router.get('/' + file + '', function (req, res) {
        res.sendFile(__dirname + '/' + file + '/index.html');
    });
});
//App-Icon
module.exports = router;

Apps Config Datei als Index-File anlegen

Daneben legen wir eine Datei app.config, mit folgendem Inhalt:

{
    "apps": [{
      "name": "Taschenrechner", 
      "icon": "icon.png",
      "path": "./apps/calc"
    }]
}

Die app.config enthält ein Index über alle Apps in einem Array. Hier wird der Name, z.B. ein Icon und der Pfad zur App angelegt.

Z.B. liegt unterhalb von „apps“ ein Ordner „calc“ und darunter z.B. eine Index.html, die die eigentliche App darstellt

Apps in NodeJS dynamisch einbinden

In der eigentlichen Serverdatei (apps.js, index.js, server.js, oder wie auch immer genannt) ergänzen wir in den Routen die folgenden Zeilen:

const apps = require('./apps');
app.use('/apps', apps);

Nun können wir über den Browser die App aufrufen, z.B. https://localhost/apps/calc

HTML-Code für den Taschenrechner

Der Code für den Taschenrechner zum Nachbauen:

<!DOCTYPE html>
<html>
<head>
    <title>Taschenrechner</title>
    <!-- Fügen Sie das Bootstrap CSS hinzu (Sie sollten das tatsächliche CSS-Datei in Ihrem Projekt verwenden) -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <style>
        /* Fügen Sie hier ggf. zusätzliches benutzerdefiniertes CSS hinzu */
        .calculator button {
            width: 25%;
        }
        .center-buttons {
            margin-left: 22%;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="mt-5" align="center">Taschenrechner</h1>
        <div class="calculator mt-3">
            <input type="text" id="display" class="form-control" disabled>
            <div class="buttons mt-3 center-buttons">
                <div class="row">
                    <button onclick="appendToDisplay('1')">1</button>
                    <button onclick="appendToDisplay('2')">2</button>
                    <button onclick="appendToDisplay('3')">3</button>
                </div>
                <div class="row">
                    <button onclick="appendToDisplay('4')">4</button>
                    <button onclick="appendToDisplay('5')">5</button>
                    <button onclick="appendToDisplay('6')">6</button>
                </div>
                <div class="row">
                    <button onclick="appendToDisplay('7')">7</button>
                    <button onclick="appendToDisplay('8')">8</button>
                    <button onclick="appendToDisplay('9')">9</button>
                </div>
                <div class="row">
                    <button onclick="clearDisplay()">C</button>
                    <button style="width: 25%" onclick="appendToDisplay('0')">0</button>
                    <button onclick="calculateResult()">=</button>
                    <div class="col-3"></div>
                </div>
                <br />
                <div class="row">
                    <button style="width: 18.75%;" onclick="appendToDisplay('+')">+</button>
                    <button style="width: 18.75%;" onclick="appendToDisplay('-')">-</button>
                    <button style="width: 18.75%;" onclick="appendToDisplay('*')">*</button>
                    <button style="width: 18.75%;" onclick="appendToDisplay('/')">/</button>
                </div>
            </div>
        </div>
    </div>
    <script>
        const display = document.getElementById('display');
        function appendToDisplay(value) {
            display.value += value;
        }
        function calculateResult() {
            try {
                display.value = eval(display.value);
            } catch (error) {
                display.value = 'Error';
            }
        }
        function clearDisplay() {
            display.value = '';
        }
        // Tastaturereignisse verarbeiten
        document.addEventListener('keydown', function (event) {
            const key = event.key;
            if (/[0-9+\-*/.=C]/.test(key)) {
                if (key === 'C') {
                    clearDisplay();
                } else if (key === '=') {
                    calculateResult();
                } else {
                    appendToDisplay(key);
                }
            } else if (key === 'Enter') {
                event.preventDefault(); // Verhindert den Zeilenumbruch im Textfeld
                calculateResult();
            }
        });
    </script>
</body>
</html>

NodeJS Dynamische Routen -> Ergebnis

Bei mir lasse ich alle Apps auf einem Dashboard anzeigen und in einem Popup anzeigen

Jetzt hat man eine Möglichkeit in NodeJS dynamische Routen hinzuzufügen.

Weiter lesen? z.B. hier Apache2, MariaDB mit SSL Zertifikat und automatischer Erneuerung installieren