Einsatz von Polymer unter Linux: Unterschied zwischen den Versionen
K (→Polymer Starter-Kit) |
|||
(9 dazwischenliegende Versionen von einem anderen Benutzer werden nicht angezeigt) | |||
Zeile 1: | Zeile 1: | ||
[[Kategorie:Linux]] | [[Kategorie:Linux]] | ||
[[Kategorie:Software]] | [[Kategorie:Software]] | ||
+ | [[Kategorie:HTML]] | ||
+ | [[Kategorie:JavaScript]] | ||
− | Im vorliegenden Artikel wird kurz und knapp beschrieben, wie man auf einem Rechner mit einem Debian/Ubuntu-Derivat das von Google entwickelte Framework Polymer zur Erstellung von Web Components und Web-Applikationen installiert und in Betrieb nimmt. | + | Im vorliegenden Artikel wird kurz und knapp beschrieben, wie man auf einem Rechner mit einem Debian/Ubuntu-Derivat das von [https://www.google.de Google] entwickelte Framework [https://www.polymer-project.org/ Polymer] zur Erstellung von Web Components und Web-Applikationen installiert und in Betrieb nimmt. |
=Installation von Node.js= | =Installation von Node.js= | ||
− | Grundlage für alle weiteren Installationen ist die | + | Grundlage für alle weiteren Installationen ist die serverseitige Plattform für Netzwerkanwendungen [https://nodejs.org Node.js], mit der insbesondere [[Webserver]] realisiert werden können. Die Installation wird folgendermaßen durchgeführt: |
sudo apt-get install nodejs nodejs-legacy | sudo apt-get install nodejs nodejs-legacy | ||
+ | ==Node.js testen== | ||
Um zu testen, ob Node.js nun auch funktioniert wird ''node'' auf der Console gestartet: | Um zu testen, ob Node.js nun auch funktioniert wird ''node'' auf der Console gestartet: | ||
Zeile 35: | Zeile 38: | ||
Die Installation von Polymer wird mittels ''Node Package Manager'' durchgeführt. Dieser wurde bereits im ersten Schritt auf dem System installiert. | Die Installation von Polymer wird mittels ''Node Package Manager'' durchgeführt. Dieser wurde bereits im ersten Schritt auf dem System installiert. | ||
− | In einem ersten Teilschritt wird nun | + | In einem ersten Teilschritt wird nun [https://bower.io/ Bower], ein Paketverwaltungstool für clientseitige Webentwicklung, installiert: |
− | npm install -g bower | + | sudo npm install -g bower |
Anschließend installieren wir das Polymer Framework. Folgender Befehl auf der Console wird nun zur Installation von Polymer eingegeben: | Anschließend installieren wir das Polymer Framework. Folgender Befehl auf der Console wird nun zur Installation von Polymer eingegeben: | ||
Zeile 44: | Zeile 47: | ||
=Polymer Starter-Kit= | =Polymer Starter-Kit= | ||
− | Auf der Webseite von [https://www.polymer-project.org/1.0/ Polymer] wird ein Starter-Kit bereit gestellt, mit dem sich einen ersten Eindruck von den Möglichkeiten von Polymer verschaffen kann. | + | Auf der Webseite von [https://www.polymer-project.org/1.0/ Polymer] wird ein Starter-Kit bereit gestellt, mit dem man sich einen ersten Eindruck von den Möglichkeiten von Polymer verschaffen kann. |
+ | ==Projekt-Verzeichnis vorbereiten== | ||
Für das von Polymer zu erzeugende Starter-Kit erzeugen wir auf der Console in einem passenden Verzeichnis ein neues Projekt-Verzeichnis namens ''my-app'' In diesem Verzeichnis lassen wir uns anschließend das Projekt des Starter-Kits erzeugen. | Für das von Polymer zu erzeugende Starter-Kit erzeugen wir auf der Console in einem passenden Verzeichnis ein neues Projekt-Verzeichnis namens ''my-app'' In diesem Verzeichnis lassen wir uns anschließend das Projekt des Starter-Kits erzeugen. | ||
Zeile 51: | Zeile 55: | ||
cd my-app | cd my-app | ||
− | Damit haben wir das Verzeichnis erzeugt und sind in dieses gewechselt. Nun lassen wir uns das Projekt erzeugen: | + | Damit haben wir das Verzeichnis erzeugt und sind in dieses gewechselt. |
+ | |||
+ | ==Projekt erzeugen== | ||
+ | Nun lassen wir uns das Projekt erzeugen: | ||
polymer init starter-kit | polymer init starter-kit | ||
+ | ==Projekt testen== | ||
Nach wenigen Sekunden ist das Projekt fertig erzeugt und wir können es nun zum Testen ausführen: | Nach wenigen Sekunden ist das Projekt fertig erzeugt und wir können es nun zum Testen ausführen: | ||
Zeile 62: | Zeile 70: | ||
So lange die Console noch geöffnet ist, ist auch der Webserver, der mit Polymer ausgeliefert wurde aktiv. | So lange die Console noch geöffnet ist, ist auch der Webserver, der mit Polymer ausgeliefert wurde aktiv. | ||
− | Das Projekt kann nun editiert werden und jederzeit erneut im Browser ausgeführt werden. Dazu muss die lokale URL des Rechners mit dem Port des Webservers in die | + | Das Projekt kann nun editiert werden und jederzeit erneut im Browser ausgeführt werden. Dazu muss die lokale URL des Rechners mit dem Port des Webservers in die Adresszeile des Browsers getippt werden: |
http://localhost:8080 | http://localhost:8080 |
Aktuelle Version vom 11. Oktober 2017, 17:47 Uhr
Im vorliegenden Artikel wird kurz und knapp beschrieben, wie man auf einem Rechner mit einem Debian/Ubuntu-Derivat das von Google entwickelte Framework Polymer zur Erstellung von Web Components und Web-Applikationen installiert und in Betrieb nimmt.
Inhaltsverzeichnis
Installation von Node.js
Grundlage für alle weiteren Installationen ist die serverseitige Plattform für Netzwerkanwendungen Node.js, mit der insbesondere Webserver realisiert werden können. Die Installation wird folgendermaßen durchgeführt:
sudo apt-get install nodejs nodejs-legacy
Node.js testen
Um zu testen, ob Node.js nun auch funktioniert wird node auf der Console gestartet:
node
Daraufhin wird eine Javascript-Console gestartet, in die wir Javascript-Code eingeben, der uns ein einfaches Hello World ausgibt.
console.log("Hallo Welt")
Die Ausgabe wird bei korrketer Funktionalität lauten:
Hallo Welt
Um die Javascript-Console wieder zu schließen, drücken wir 2x nacheinander die Tastenkombination [STRG]+[C]
Installation von Git
Im nun folgenden Schritt ist die Installation der Versionsverwaltung Git notwendig. Sollte diese bereits auf dem System installiert sein (Test durch Eingabe von git auf der Console), kann gleich zum nächsten Schritt gesprungen werden.
Wenn Git noch nicht installiert ist, holen wir das gleich nach. In unsere Console geben wir nun ein:
sudo apt-get install git
Damit sind alle Voraussetzungen geschaffen um nun die das Kommandozeilen-Interface (CLI) von Polymer zu installieren.
Installation des Polymer-CLI
Die Installation von Polymer wird mittels Node Package Manager durchgeführt. Dieser wurde bereits im ersten Schritt auf dem System installiert.
In einem ersten Teilschritt wird nun Bower, ein Paketverwaltungstool für clientseitige Webentwicklung, installiert:
sudo npm install -g bower
Anschließend installieren wir das Polymer Framework. Folgender Befehl auf der Console wird nun zur Installation von Polymer eingegeben:
sudo npm install -g polymer-cli
Polymer Starter-Kit
Auf der Webseite von Polymer wird ein Starter-Kit bereit gestellt, mit dem man sich einen ersten Eindruck von den Möglichkeiten von Polymer verschaffen kann.
Projekt-Verzeichnis vorbereiten
Für das von Polymer zu erzeugende Starter-Kit erzeugen wir auf der Console in einem passenden Verzeichnis ein neues Projekt-Verzeichnis namens my-app In diesem Verzeichnis lassen wir uns anschließend das Projekt des Starter-Kits erzeugen.
mkdir my-app cd my-app
Damit haben wir das Verzeichnis erzeugt und sind in dieses gewechselt.
Projekt erzeugen
Nun lassen wir uns das Projekt erzeugen:
polymer init starter-kit
Projekt testen
Nach wenigen Sekunden ist das Projekt fertig erzeugt und wir können es nun zum Testen ausführen:
polymer serve --open
Mit diesem Befehl wird zunächst der mitgelieferte Webserver gestartet. Anschließend wird automatisch der Standard-Browser geöffnet und das Projekt geladen.
So lange die Console noch geöffnet ist, ist auch der Webserver, der mit Polymer ausgeliefert wurde aktiv. Das Projekt kann nun editiert werden und jederzeit erneut im Browser ausgeführt werden. Dazu muss die lokale URL des Rechners mit dem Port des Webservers in die Adresszeile des Browsers getippt werden:
http://localhost:8080
Webserver beenden
Der Webserver kann mit der Tastenkombination [STRG]+[C] oder einfach durch Schließen der Console beendet werden