dhbw slides: 1 file pro sitzung (issue #2)
01_web_eng.md (103 slides) aufgesplittet: - 01_intro.md: cover, ueber-mich, vorlesungsplan, pruefungsleistung, internet 101, onboarding - 02_html_css.md: html, a11y/wcag, css basics + css extended (aus 02_css_extended.md gemergt) - 03_js_frameworks.md: ecmascript, js, dom, fetch, async, frameworks, build tools, microfrontends renames (03-08 -> 04-09): - 03_nodejs_basics -> 04_nodejs_basics - 04_nodejs_advanced -> 05_express - 05_testing -> 06_testing - 06_typescript -> 07_typescript - 07_docker -> 08_docker - 08_best_practices -> 09_best_practices 02_css_extended.md geloescht (inhalte in 02_html_css.md) makefile: dhbw_KAPITEL + dhbw_NAME aktualisiert
This commit is contained in:
@@ -0,0 +1,606 @@
|
||||
---
|
||||
marp: true
|
||||
theme: gaia
|
||||
paginate: true
|
||||
backgroundColor: #fff
|
||||
header: "Web Engineering – DHBW Stuttgart"
|
||||
footer: "Michael Czechowski – SoSe 2026"
|
||||
title: Intro
|
||||
---
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--color-foreground: #1a1a2e;
|
||||
--color-highlight: #d63384;
|
||||
--color-dimmed: #4a4a6a;
|
||||
}
|
||||
section.invert {
|
||||
--color-foreground: #fff;
|
||||
}
|
||||
section {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
h1 {
|
||||
color: #a02060;
|
||||
}
|
||||
section.invert h1 {
|
||||
color: #fff;
|
||||
}
|
||||
h2 {
|
||||
color: #1f2937;
|
||||
}
|
||||
section.invert h2 {
|
||||
color: #f48fb1;
|
||||
}
|
||||
pre {
|
||||
background: #0f0f23;
|
||||
color: #f48fb1;
|
||||
border-radius: 8px;
|
||||
border-left: 3px solid #d63384;
|
||||
}
|
||||
pre code {
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
}
|
||||
code {
|
||||
background: #1a1a2e;
|
||||
color: #f48fb1;
|
||||
padding: 0.15em 0.4em;
|
||||
border-radius: 4px;
|
||||
}
|
||||
a {
|
||||
color: var(--color-highlight);
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- _class: invert -->
|
||||
<!-- _header: '' -->
|
||||
<!-- _backgroundColor: #000 -->
|
||||
|
||||
|
||||
|
||||
# Web Engineering
|
||||
|
||||
**DHBW Stuttgart** · Informatik / Wirtschaftsinformatik
|
||||
|
||||
**Sommersemester 2026**
|
||||
|
||||
---
|
||||
|
||||
# Ressourcen zum Selbstlernen
|
||||
|
||||
- **CODE CRISPIES** — [codecrispi.es](https://codecrispi.es/)
|
||||
- **Online Code-Editor** — [codepen.io](https://codepen.io/pen/)
|
||||
- **MDN** (Mozilla Developer Network) — [developer.mozilla.org/de/](https://developer.mozilla.org/de/)
|
||||
- **Flexbox-Spiel** — [flexboxfroggy.com](https://flexboxfroggy.com/)
|
||||
- **Grid-Spiel** — [cssgridgarden.com](https://cssgridgarden.com/)
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: lead -->
|
||||
|
||||
# Herzlich Willkommen!
|
||||
|
||||
## 1. Sitzung: 08.05.2026
|
||||
|
||||
---
|
||||
|
||||
# Über mich
|
||||
|
||||
|
||||
|
||||
**Michael Werner Czechowski**
|
||||
|
||||
- Systems and Platform Engineer
|
||||
- Schwerpunkte:
|
||||
- Web-Technologien, Barriere-Armut, Open Source
|
||||
- Hintergrund:
|
||||
- Philosophie (Uni Stuttgart)
|
||||
- Wirtschaftsinformatik (Leibniz-FH Hannover)
|
||||
- Honorardozent (DHBW Stuttgart, HdM Stuttgart, Leibniz-FH)
|
||||
- Kontakt: michael.czechowski@lehre.dhbw-stuttgart.de
|
||||
|
||||
---
|
||||
|
||||
# Vorlesungsplan
|
||||
|
||||
<style scoped>
|
||||
.lp-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 10px;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
.lp-card {
|
||||
border: 1px solid #d63384;
|
||||
border-radius: 8px;
|
||||
padding: 10px 12px;
|
||||
background: #fff;
|
||||
font-size: 0.95em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
.lp-card .head {
|
||||
font-weight: bold;
|
||||
color: #a02060;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
.lp-card .head .num {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
.lp-card .topic {
|
||||
color: #1a1a2e;
|
||||
line-height: 1.25;
|
||||
}
|
||||
.lp-card.milestone {
|
||||
background: #fce4ec;
|
||||
border-color: #a02060;
|
||||
border-width: 2px;
|
||||
}
|
||||
.lp-card.milestone .topic {
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="lp-grid">
|
||||
<div class="lp-card"><div class="head"><span class="num">1</span><span>08.05.</span></div><div class="topic">Intro · Projektgruppen · Internet 101</div></div>
|
||||
<div class="lp-card"><div class="head"><span class="num">2</span><span>15.05.</span></div><div class="topic">HTML und CSS (Frameworks)</div></div>
|
||||
<div class="lp-card"><div class="head"><span class="num">3</span><span>22.05.</span></div><div class="topic">JS (Frameworks) und npm</div></div>
|
||||
<div class="lp-card"><div class="head"><span class="num">4</span><span>29.05.</span></div><div class="topic">nodeJS: Scripting, Running, Building</div></div>
|
||||
<div class="lp-card"><div class="head"><span class="num">5</span><span>05.06.</span></div><div class="topic">Express API, CRUD, Middlewares</div></div>
|
||||
<div class="lp-card milestone"><div class="head"><span class="num">6</span><span>12.06.</span></div><div class="topic">Projektwerkstattbericht</div></div>
|
||||
<div class="lp-card"><div class="head"><span class="num">7</span><span>19.06.</span></div><div class="topic">Testing (Unit · Integration · E2E)</div></div>
|
||||
<div class="lp-card"><div class="head"><span class="num">8</span><span>26.06.</span></div><div class="topic">TypeScript</div></div>
|
||||
<div class="lp-card"><div class="head"><span class="num">9</span><span>03.07.</span></div><div class="topic">Docker · Proxies · DBs</div></div>
|
||||
<div class="lp-card"><div class="head"><span class="num">10</span><span>10.07.</span></div><div class="topic">Wrap-up & Projektsupport</div></div>
|
||||
<div class="lp-card milestone"><div class="head"><span class="num">11</span><span>17.07.</span></div><div class="topic">Präsentation</div></div>
|
||||
</div>
|
||||
|
||||
---
|
||||
|
||||
# Prüfungsleistung – Übersicht
|
||||
|
||||
Eigenes Projekt: **Web-App** ODER **Backend** (API/CLI).
|
||||
|
||||
| Punkte | Bereich |
|
||||
|--------|---------|
|
||||
| 30 | Grundanforderungen (Projektgrundlagen + Präsentation) |
|
||||
| 25 | Clean Code Prinzipien |
|
||||
| 25 | Accessibility & UX |
|
||||
| 20 | Technische Umsetzung |
|
||||
| **100** | **Basispunkte** |
|
||||
| +15 | Bonuspunkte (max. 3 Features a 5 P.) |
|
||||
|
||||
---
|
||||
|
||||
# Prüfungsleistung – Grundanforderungen (30 P.)
|
||||
|
||||
**Projektgrundlagen (15 P.)**
|
||||
- Funktionsfähige Anwendung (8 P.)
|
||||
- Repository mit Versionskontrolle (4 P.)
|
||||
- Projektdokumentation / README (3 P.)
|
||||
|
||||
**Präsentation (15 P.)**
|
||||
- Elevator Pitch (5 P.)
|
||||
- Technische Präsentation (5 P.)
|
||||
- Projektevolution: wie hat sich das Projekt vs. Ursprungsidee verändert? (5 P.)
|
||||
|
||||
---
|
||||
|
||||
# Prüfungsleistung – Clean Code (25 P.)
|
||||
|
||||
**Projektstruktur (10 P.)**
|
||||
- Ordnerstruktur (5 P.)
|
||||
- Datei-Organisation (5 P.)
|
||||
|
||||
**Code-Qualität (10 P.)**
|
||||
- KISS – Keep It Simple, Stupid (3 P.)
|
||||
- Beschreibende Namen (3 P.)
|
||||
- Funktionsverantwortlichkeiten (4 P.)
|
||||
|
||||
**Kommentierung & Dokumentation (5 P.)**
|
||||
|
||||
---
|
||||
|
||||
# Prüfungsleistung – Accessibility & UX (25 P.)
|
||||
|
||||
**Web Accessibility (15 P.)**
|
||||
- Semantisches HTML (5 P.)
|
||||
- ARIA Labels & Alt-Texte (5 P.)
|
||||
- Tastaturnavigation (5 P.)
|
||||
|
||||
**Responsive Design (10 P.)**
|
||||
- Mobile First Approach (5 P.)
|
||||
- Flexbox/Grid Layout (5 P.)
|
||||
|
||||
---
|
||||
|
||||
# Prüfungsleistung – Technische Umsetzung (20 P.)
|
||||
|
||||
- Plattformunabhängigkeit (5 P.)
|
||||
- Package Management (5 P.)
|
||||
- Build Tools & Optimierung (5 P.)
|
||||
- Live-Demo (5 P.)
|
||||
|
||||
---
|
||||
|
||||
# Prüfungsleistung – Bonuspunkte (max. 15 P.)
|
||||
|
||||
Mindestens 2 Bereiche wählen, je 5 Punkte:
|
||||
|
||||
- API Integration
|
||||
- Local Storage / State Management
|
||||
- Progressive Web App Features
|
||||
- Testing
|
||||
- Erweiterte Responsive Features (3+ Breakpoints)
|
||||
- Security Features
|
||||
|
||||
---
|
||||
|
||||
# Prüfungsleistung – Abgabe & Termine
|
||||
|
||||
- **Code-Upload:** bis 27.07.
|
||||
- **Präsentation:** 17.07. (Gruppen, ~10 Min.)
|
||||
|
||||
Details: https://git.librete.ch/DHBW/pruefungsleistung
|
||||
|
||||
---
|
||||
|
||||
# Internet-Timeline
|
||||
|
||||
| Jahr | Meilenstein |
|
||||
|------|-------------|
|
||||
| **1966** | ARPANET-Projekt startet (DARPA) |
|
||||
| **1969** | Erste Verbindung zwischen UCLA und Stanford |
|
||||
| **1974** | TCP/IP-Protokoll entwickelt |
|
||||
| **1989** | Tim Berners-Lee erfindet das WWW (CERN) |
|
||||
| **1993** | Mosaic — erster grafischer Browser |
|
||||
| **1994** | W3C gegründet (HTML, CSS, SVG, WCAG) |
|
||||
| **1995** | ECMAScript / JavaScript wird Standard |
|
||||
| **2008** | V8 JavaScript Engine (Chrome / Node.js) |
|
||||
|
||||
---
|
||||
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Das WWW (1989)
|
||||
|
||||
**Tim Berners-Lee** am **CERN** (Genf)
|
||||
|
||||
**Problem:** Wissenschaftler:innen können Forschungsdokumente nicht verlinken — Inkompatible Systeme, kein gemeinsames Format.
|
||||
|
||||
**Lösung — drei Bausteine:**
|
||||
|
||||
- **HTML** — Auszeichnungssprache für Dokumente
|
||||
- **HTTP** — Protokoll zur Übertragung
|
||||
- **URL** — eindeutige Adressen
|
||||
|
||||
**1991:** erste Webseite geht online · 1993 vom CERN gemeinfrei freigegeben.
|
||||
|
||||
→ WWW ≠ Internet. Das WWW ist eine **Anwendung auf** dem Internet.
|
||||
|
||||
---
|
||||
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Heute: Physische Infrastruktur
|
||||
|
||||
- **5,5 Milliarden** Menschen online
|
||||
- **> 400 Unterseekabel**, ca. **1,3 Mio. km** Glasfaser
|
||||
- Daten reisen mit **Lichtgeschwindigkeit**
|
||||
- Latenz Frankfurt — New York: ~80 ms
|
||||
|
||||
→ Keine "Cloud" ohne Kabel. Das Internet ist **physische** Infrastruktur — und damit angreifbar.
|
||||
|
||||
**Geopolitik:** Five-Eyes-Allianz (USA, UK, CA, AU, NZ) zapft Unterseekabel ab (Programm "Tempora", aufgedeckt 2013 durch Snowden). DE ist Teil der Fourteen Eyes.
|
||||
|
||||
---
|
||||
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# HTTP – Hypertext Transfer Protocol
|
||||
|
||||
**Request:**
|
||||
```
|
||||
GET /products HTTP/1.1
|
||||
Host: localhost:8080
|
||||
```
|
||||
|
||||
**Response:**
|
||||
```
|
||||
HTTP/1.1 200 OK
|
||||
Content-Type: application/json
|
||||
|
||||
[{"id": 1, "name": "Produkt A"}, ...]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: invert -->
|
||||
<!-- _header: '' -->
|
||||
<!-- _backgroundColor: #000 -->
|
||||
|
||||
# Onboarding
|
||||
## Tools, Runtimes, Workflows
|
||||
|
||||
---
|
||||
|
||||
# Werkzeuge & Betriebssystem
|
||||
|
||||
**Erforderliche Werkzeuge:**
|
||||
- **Terminal** (zsh / bash / fish / pwsh) — Kommandozeile
|
||||
- **Editor** (siehe folgende Folie)
|
||||
- **JavaScript-Runtime** (Node.js / Bun / Deno)
|
||||
- **Browser mit DevTools** (Chromium / Firefox / Safari)
|
||||
- **Git** — verteiltes Versionskontrollsystem (Stand der Industrie)
|
||||
|
||||
**OS-Empfehlung:**
|
||||
|
||||
| OS | Status |
|
||||
|----|--------|
|
||||
| **macOS** | First-class, viele Tools "just work" |
|
||||
| **Linux** | First-class, beste Server-Parität |
|
||||
| **Windows + WSL2** | Empfohlen — Windows-CLI hat Edge Cases |
|
||||
| **Windows nativ** (PowerShell) | Funktioniert, aber holpriger Pfad |
|
||||
|
||||
---
|
||||
|
||||
# Node.js installieren – macOS
|
||||
|
||||
Empfohlen: **LTS** (aktuell **Node.js 24** — Stand 2026).
|
||||
|
||||
Paketmanager: **[Homebrew](https://brew.sh)**
|
||||
|
||||
```bash
|
||||
# Homebrew installieren (falls nicht vorhanden)
|
||||
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
|
||||
|
||||
# Node.js LTS installieren
|
||||
brew install node@24
|
||||
|
||||
# Version prüfen
|
||||
node --version
|
||||
npm --version
|
||||
```
|
||||
|
||||
Alternative: Installer von [nodejs.org](https://nodejs.org)
|
||||
|
||||
---
|
||||
|
||||
# Node.js installieren – Linux
|
||||
|
||||
Empfohlen: **LTS** (aktuell **Node.js 24**).
|
||||
|
||||
**Debian / Ubuntu** ([NodeSource](https://github.com/nodesource/distributions)):
|
||||
```bash
|
||||
curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
|
||||
sudo apt install -y nodejs
|
||||
```
|
||||
|
||||
**Arch / Manjaro:**
|
||||
```bash
|
||||
sudo pacman -S nodejs npm
|
||||
```
|
||||
|
||||
**Fedora / RHEL:**
|
||||
```bash
|
||||
sudo dnf module install nodejs:24/common
|
||||
```
|
||||
|
||||
→ Distro-Pakete sind oft **veraltet**. Versionsmanager (folgende Folie) bevorzugen.
|
||||
|
||||
---
|
||||
|
||||
# Node.js installieren – Windows
|
||||
|
||||
Empfohlen: **LTS** (aktuell **Node.js 24**).
|
||||
|
||||
**Option 1: winget** (empfohlen, Win 10/11):
|
||||
```powershell
|
||||
winget install OpenJS.NodeJS.LTS
|
||||
```
|
||||
|
||||
**Option 2: Chocolatey** ([chocolatey.org](https://chocolatey.org)):
|
||||
```powershell
|
||||
choco install nodejs-lts
|
||||
```
|
||||
|
||||
**Option 3: Scoop** ([scoop.sh](https://scoop.sh)):
|
||||
```powershell
|
||||
scoop install nodejs-lts
|
||||
```
|
||||
|
||||
**Option 4:** Installer von [nodejs.org](https://nodejs.org)
|
||||
|
||||
→ **Empfehlung:** WSL2 + Linux-Workflow nutzen.
|
||||
|
||||
---
|
||||
|
||||
# Direkt-Install: Wenn es eng wird
|
||||
|
||||
**Typisches Szenario** — drei parallele Projekte mit unterschiedlichen Anforderungen:
|
||||
|
||||
| Projekt | Stack | Node-Version |
|
||||
|---------|-------|--------------|
|
||||
| Praktikums-API | Express (Legacy) | 18.x (LTS Hydrogen) |
|
||||
| Studienarbeit | Next.js 15 | 22.x (LTS Jod) |
|
||||
| Aktuelles Lab-Projekt | neueste Features | 24.x (Iron, current LTS) |
|
||||
|
||||
System-Install kennt nur **eine** Node-Version global → Konflikt.
|
||||
|
||||
---
|
||||
|
||||
# Symptome im Alltag
|
||||
|
||||
- `npm install` bricht mit `engines`-Warning ab
|
||||
- native Module (z. B. `node-sass`) bauen nicht
|
||||
- CI-Pipeline ist grün, lokal rot — oder umgekehrt
|
||||
- erheblicher Zeitverlust beim Debuggen von Versions-Konflikten
|
||||
|
||||
→ Lösung: **Versionsmanager** und Node-Version pro Projekt pinnen.
|
||||
|
||||
---
|
||||
|
||||
# Node-Versionsmanager
|
||||
|
||||
Verschiedene Projekte brauchen oft verschiedene Node-Versionen. **Lösung:** Versionsmanager.
|
||||
|
||||
| Tool | Sprache | Geschwindigkeit | Plattform |
|
||||
|------|---------|-----------------|-----------|
|
||||
| **nvm** | Bash | langsam (Shell-Funktion) | macOS, Linux |
|
||||
| **fnm** | Rust | sehr schnell | macOS, Linux, Windows |
|
||||
| **asdf** | Bash | mittel, multi-language | macOS, Linux |
|
||||
| **volta** | Rust | schnell, pinning per `package.json` | alle |
|
||||
|
||||
```bash
|
||||
# fnm
|
||||
curl -fsSL https://fnm.vercel.app/install | bash
|
||||
fnm install --lts # aktuell Node 24
|
||||
fnm use lts-latest
|
||||
|
||||
# .nvmrc / .node-version automatisch
|
||||
echo "lts/*" > .nvmrc
|
||||
fnm use # liest .nvmrc
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
# Alternative Runtimes
|
||||
|
||||
| Runtime | Erschienen | Engine | USP |
|
||||
|---------|------------|--------|-----|
|
||||
| **Node.js** | 2009 | V8 (C++) | Standard, größtes Ökosystem |
|
||||
| **Deno** | 2020 | V8 (Rust) | Sicherheit, TypeScript nativ, Std-Lib |
|
||||
| **Bun** | 2022 | JavaScriptCore (Zig) | Geschwindigkeit, all-in-one |
|
||||
|
||||
```bash
|
||||
# Deno
|
||||
curl -fsSL https://deno.land/install.sh | sh
|
||||
deno run main.ts
|
||||
|
||||
# Bun
|
||||
curl -fsSL https://bun.sh/install | bash
|
||||
bun install
|
||||
bun run dev
|
||||
```
|
||||
|
||||
→ Im Kurs primär **Node.js**. Bun und Deno sind ebenfalls zulässig.
|
||||
|
||||
---
|
||||
|
||||
# Editor
|
||||
|
||||
- **VS Code** (empfohlen) — kostenlos, große Plugin-Auswahl
|
||||
- **JetBrains WebStorm** — sehr mächtig, kostenpflichtig
|
||||
- kostenlos für Studierende via [JetBrains Education](https://www.jetbrains.com/community/education/#students)
|
||||
- **Vim / Neovim / Emacs** — für CLI-Profis
|
||||
- **Zed** — modern, schnell
|
||||
|
||||
---
|
||||
|
||||
# Browser DevTools
|
||||
|
||||
Chromium / Firefox / Safari — `F12` oder `Cmd+Opt+I`
|
||||
|
||||
<small>Chromium = Open-Source-Basis von Chrome, Edge, Brave, Opera, Vivaldi etc.</small>
|
||||
|
||||
**Wichtigste Panels:**
|
||||
- **Network** — HTTP-Requests, Responses, Timing
|
||||
- **Console** — `console.log`, JS-Errors, REPL
|
||||
- **Elements** — DOM-Inspektor, Live-CSS-Editor
|
||||
- **Sources** — Debugger, Breakpoints, Source-Maps
|
||||
- **Performance** — Profiling, Frame-Rate, FPS
|
||||
- **Application** — LocalStorage, Cookies, Service Workers
|
||||
|
||||
---
|
||||
|
||||
# HTTP-Clients
|
||||
|
||||
- **Bruno** ([usebruno.com](https://usebruno.com)) — open source, git-friendly
|
||||
- **Hoppscotch** ([hoppscotch.io](https://hoppscotch.io)) — open source, browser-basiert (vormals Postwoman)
|
||||
- **Insomnia** / **Postman** — etabliert, freemium
|
||||
- **curl** / **httpie** — CLI (Command-Line Interface, scriptbar)
|
||||
|
||||
---
|
||||
|
||||
# Git Setup & Workflow
|
||||
|
||||
**Einmalige Konfiguration:**
|
||||
```bash
|
||||
git config --global user.name "Vorname Nachname"
|
||||
git config --global user.email "vorname.nachname@example.com"
|
||||
git config --global init.defaultBranch main
|
||||
git config --global pull.rebase true
|
||||
```
|
||||
|
||||
**SSH-Key für GitHub/GitLab:**
|
||||
```bash
|
||||
ssh-keygen -t ed25519 -C "vorname.nachname@example.com"
|
||||
cat ~/.ssh/id_ed25519.pub # → in GitHub-Settings einfügen
|
||||
```
|
||||
|
||||
**Tägliche Befehle:**
|
||||
```bash
|
||||
git status # was hat sich geändert?
|
||||
git add <file> # für Commit vormerken
|
||||
git commit -m "feat: ..." # Conventional Commits
|
||||
git push # hochladen
|
||||
git pull --rebase # neueste Änderungen holen
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
# Projekt-Skeleton
|
||||
|
||||
```bash
|
||||
mkdir mein-projekt && cd mein-projekt
|
||||
git init
|
||||
npm init -y # erzeugt package.json
|
||||
echo "node_modules" > .gitignore
|
||||
echo ".env" >> .gitignore
|
||||
npm install express
|
||||
```
|
||||
|
||||
**`package.json` minimal:**
|
||||
```json
|
||||
{
|
||||
"name": "mein-projekt",
|
||||
"version": "0.1.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"start": "node index.js",
|
||||
"dev": "node --watch index.js"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
`.env` für Secrets (nie committen!), `.env.example` mit Dummy-Werten committen.
|
||||
|
||||
---
|
||||
Reference in New Issue
Block a user