README.md

zurück

Section 1 - Grundlagen

🎦 S1D0 - Aufzeichnung des Kickoffs und der Einrichtung

Bei Problemen mit dem Zugriff auf diesen OneDrive Link bitte an @stan1025 wenden! https://1drv.ms/u/s!Apib2MdOJ2WvtowzTb6CDyAlCSZ8xw?e=m7mWw9

▶️ S1D0 - Einrichtung

Lead: @Zangarus (Marwin Madsen)

Schritte zum Erstellen des node-Projektes, welches wir als Template nutzen:

1. Herunterladen (clone) des Repository:

   git clone https://github.com/VDI-CodING/codeING-main.git

2. Wechseln in das Verzeichnis:

   cd codeING-main

3. Setze ein npm Projekt auf:

   npm init

   Bei jeder Frage Enter drücken, um die Standardeinstellungen zu übernehmen.

4. Installiere typescript und richte es als Entwicklungsvoraussetzung ein:

   1. Füge die Voraussetzung global und lokal hinzu:

      npm install -g -D typescript

   2. Erstelle tsconfig.json:

      tsc --init

   3. Modifiziere tsconfig.json indem du Zeilen 69 und 70 änderst:

         },
         "exclude": [
            "node_modules",
            "./build"
         ]
      }

5. Installiere typescript für node.js als Entwicklungsvoraussetzung:

   npm install -D ts-node

   npm install -D @types/node

6. Installiere express als Voraussetzung:

   npm install -S express

   npm install -D @types/express

7. Schreibe ein kleines Programm:

   1. Lege den Ordner src im Ordner codeING-main an.

   2. Datei app.ts erstellen im Ordner src.

   3. Ändere den Startpunkt für das Programm in der package.json:

      "main": "src/app.ts",

   4. Füge zu app.ts hinzu:

      import express from "express"
      
      const app = express();
      const port = process.env.PORT || 5000
      
      app.get('/', (req, res) => {
         res.send('Hallo Welt');
      })
      app.listen(port, () => {
         return console.log(`Server lauscht auf ${port}.`)
      })

8. Installiere und konfiguriere eslint:

   1. Installiere eslint als Entwicklungsvoraussetzung:

      npm install -D eslint

   2. Konfiguriere eslint:

      Linux und Mac:

      ./node_modules/.bin/eslint --init

      Windows:

      .\node_modules\.bin\eslint --init

      Folgendes ist dabei auszuwählen:

      1. To check syntax, find problems, and enforce code style
      2. JavaScript modules (import/export)
      3. None of these
      4. Yes
      5. Node
      6. Use a popular style guide
      7. Standard: https://github.com/standard/standard
      8. JSON
      9. Yes

   3. Füge Regeln für den Linter zu .eslintrc.json hinzu:

      "no-console": 0,
      "@typescript-eslint/no-explicit-any": 2,
      "no-unused-vars": 0,
      "@typescript-eslint/no-unused-vars": 2

   4. Konfiguriere eslint nicht jede Datei zu linten:

      1. Datei .eslintignore erstellen im Ordner codeING-main.

      2. Füge folgendes zu .eslintignore hinzu:

         node_modules
         build

9. Aktiviere auto-format für Visual Studio Code

   1. Lade die ESLint extension (dbaeumer.vscode-eslint) herunter (Extensions öffnet man in Visual Studio Code über das Symbol mit den 4 Rechtecke ganz links.).

   2. Gehe zu src/app.ts und überprüfe in der unteren rechten Ecke ob ESLint (Es muss ein Haken vor dem Namen stehen) aktiviert ist. Wenn nicht drücke auf ESLint und wähle "Allow" aus.

   3. Ändere Visual Studio Code Einstellungen:

      1. Ordner .vscode erstellen im Ordner codeING-main.

      2. Datei settings.json unter .vscode anlegen.

      3. Füge folgendes zu .vscode/settings.json hinzu:

         {
           "editor.codeActionsOnSave": {
               "source.fixAll.eslint": true
            },
            "eslint.validate": [
               "typescript"
            ]
         }

10. Installiere und konfiguriere nodemon:

    1. Install nodemone als Entwicklungsvoraussetzung:

       npm install -D nodemon

    2. Konfiguriere nodemon:

       1. Datei nodemon.json erstellen im Ordner codeING-main.

       2. Füge folgendes zu nodemon.json hinzu:

          {
             "watch": [
                "src"
                ],
             "ext": "ts",
             "ignore": [
                "**/*.test.ts",
                "**/*.spec.ts",
                "node_modules",
                ".git",
                "build"
             ],
             "delay": 3,
             "exec": "npm run start-dev"
          }

11. Füge Skripte zu package.json hinzu:

    "start": "npm run build && node build/app.ts",
    "start-dev": "ts-node src/app.ts",
    "start-watch": "nodemon",
    "build": "tsc",
    "lint": "eslint src/** --fix --cache"

12. Ausführen des Programms:

    1. Programm kompilieren:

       npm run start-watch

    1. In einem Browser localhost:5000 aufrufen.