Node.js-Tutorium: Hello World: Webapp: Unterschied zwischen den Versionen
Kowa (Diskussion | Beiträge) (Die Seite wurde neu angelegt: „{{Node.js-Tutorium:HelloWorld:Menü}} ==Use Cases== Es soll ein einfacher Node.js-Web-Server erstellt werden, der unter der URL <code>http://localhost:77…“) |
Kowa (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
| Zeile 16: | Zeile 16: | ||
Erstellen Sie ein neues Projektverzeichnis und wechseln Sie in der Konsole in dieses Verzeichnis: | Erstellen Sie ein neues Projektverzeichnis und wechseln Sie in der Konsole in dieses Verzeichnis: | ||
:<code>mkdir -p | :<code>mkdir -p <Projektverzeichnis></code> | ||
:<code>cd | :<code>cd <Projektverzeichnis></code> | ||
Installieren Sie nun die <code>webapp</code>-Verzeichnisstruktur: | |||
:<code>npm install -g generator-webapp</code> | |||
:<code>yo webapp</code> | |||
Die erste Frae, ob Sie anonyme Daten am Yeoman schicken wollen, | |||
können Sie beantworten, wie es Ihnen beliebt. | |||
Danach sollten Sie zumindest die beiden Optionen <code>Bootstrap</code> und | |||
<code>Sass</code> auswählen. <code>Modernizr</code> benötigen Sie nur, wenn sie | |||
browserspezifischen Code erstellen möchten. | |||
Die folgende Frage nach Sass beantworten Sie mit <code>y</code>, die Frage nach dem Versand | |||
anonymer Daten beantworten Sie wieder nach Gutdünken. | |||
Zum Schluss können Sie die Webanwendung mittels | |||
:<code>grunt</code> | |||
erstellen und mittels | |||
:<code>grunt serve</code> | |||
starten. | |||
==Quellen== | ==Quellen== | ||
Version vom 18. November 2014, 17:02 Uhr
Dieser Artikel erfüllt die GlossarWiki-Qualitätsanforderungen nur teilweise:
| Korrektheit: 4 (großteils überprüft) |
Umfang: 1 (zu gering) |
Quellenangaben: 5 (vollständig vorhanden) |
Quellenarten: 5 (ausgezeichnet) |
Konformität: 5 (ausgezeichnet) |
Node.js-Tutorium Hello World
Übersicht: Teil 1: Konsole | Teil 2: HTTP | Teil 3: TCP
Use Cases
Es soll ein einfacher Node.js-Web-Server erstellt werden, der
unter der URL http://localhost:7777/ eine HTML-Seite mit dem
Inhalt Hallo, Welt! als Ergebnis liefert.
Auf der Seite soll sich außerdem ein Eingabefeld und ein Butoon befinden.
Wenn der Benutzer seinen Namen eingibt und auf den Button klickt, wird
er zusätzlich mit seinem Namen begrüßt: Hallo, <BENUTZERNAME>!.
Realsierung mit yeoman/generator-webapp
Stellen Sie zunächst sicher, dass Yeoman installiert worden ist.
Erstellen Sie ein neues Projektverzeichnis und wechseln Sie in der Konsole in dieses Verzeichnis:
mkdir -p <Projektverzeichnis>cd <Projektverzeichnis>
Installieren Sie nun die webapp-Verzeichnisstruktur:
npm install -g generator-webappyo webapp
Die erste Frae, ob Sie anonyme Daten am Yeoman schicken wollen, können Sie beantworten, wie es Ihnen beliebt.
Danach sollten Sie zumindest die beiden Optionen Bootstrap und
Sass auswählen. Modernizr benötigen Sie nur, wenn sie
browserspezifischen Code erstellen möchten.
Die folgende Frage nach Sass beantworten Sie mit y, die Frage nach dem Versand
anonymer Daten beantworten Sie wieder nach Gutdünken.
Zum Schluss können Sie die Webanwendung mittels
grunt
erstellen und mittels
grunt serve
starten.
Quellen
- Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)
