One place for hosting & domains

      Verwenden von Font Awesome 5 mit React


      Einführung

      Font Awesome ist ein Toolkit für Websites, das Symbole und soziale Logos zur Verfügung stellt. React ist eine Programmierbibliothek, die zur Erstellung von Benutzeroberflächen verwendet wird. Obwohl das Font Awesome-Team eine React-Komponente zur Förderung der Integration entwickelt hat, gibt es einige Grundlagen über Font Awesome 5 und seine Strukturierung zu verstehen. In diesem Tutorial erfahren Sie, wie Sie die Komponente React Font Awesome verwenden können.

      Font Awesome-Website mit ihren Symbolen

      Voraussetzungen

      Für dieses Tutorial ist keine Programmierung erforderlich. Wenn Sie jedoch mit einigen der Beispiele experimentieren möchten, benötigen Sie Folgendes:

      Schritt 1 – Verwenden von Font Awesome

      Das Font Awesome-Team hat eine React-Komponente erstellt, damit Sie beide zusammen verwenden können. Mit dieser Bibliothek können Sie dem Tutorial folgen, nachdem Sie Ihr Symbol ausgewählt haben.

      In diesem Beispiel verwenden wir das Home-Symbol und führen alles in der Datei App.js aus:

      src/App.js

      import React from "react";
      import { render } from "react-dom";
      
      // get our fontawesome imports
      import { faHome } from "@fortawesome/free-solid-svg-icons";
      import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
      
      // create our App
      const App = () => (
        <div>
          <FontAwesomeIcon icon={faHome} />
        </div>
      );
      
      // render to #root
      render(<App />, document.getElementById("root"));
      

      Ihre Anwendung verfügt nun über ein kleines Home-Symbol. Sie werden feststellen, dass dieser Code nur das Home-Symbol auswählt, sodass nur ein Symbol zu unserer Bundle-Größe hinzugefügt wird.

      Code-Sandbox mit angezeigtem Home-Symbol

      Nun wird Font Awesome dafür sorgen, dass diese Komponente sich durch die SVG-Version dieses Symbols ersetzt, sobald diese Komponente installiert ist.

      Schritt 2 — Auswählen der Symbole

      Vor dem Installieren und Verwenden der Symbole ist es wichtig zu wissen, wie die Font Awesome Bibliotheken strukturiert sind. Da es viele Symbole gibt, hat das Team beschlossen, sie in mehrere Pakete aufzuteilen.

      Bei der Auswahl und Entscheidung über die gewünschten Symbole empfiehlt es sich, die Seite Font Awesome Icons zu besuchen, um Ihre Optionen zu erkunden. Auf der linken Seite der Seite sehen Sie verschiedene Filter, aus denen Sie auswählen können. Diese Filter sind sehr wichtig, da sie angeben, aus welchem Paket Ihr Symbol importiert werden soll.

      Im obigen Beispiel haben wir das Home-Symbol aus dem Paket @fortawesome/free-solid-svg-icons abgerufen.

      Bestimmen, zu welchem Paket ein Symbol gehört

      Sie können herausfinden, zu welchem Paket ein Symbol gehört, indem Sie sich die Filter auf der linken Seite ansehen. Sie können auch in ein Symbol klicken und das Paket sehen, zu dem es gehört.

      Sobald Sie wissen, zu welchem Paket eine Schriftart gehört, ist es wichtig, sich die dreibuchstabige Kurzform für dieses Paket zu merken:

      • Stil „Solid“ – fas
      • Stil „Regular“ – far
      • Stil „Light“ – fal
      • Stil „Duotone“ – fad

      Auf der Symbole-Seite können Sie nach einem bestimmten Typ suchen:

      Symbol-Seite mit einigen der Paketnamen auf der linken Seite

      Verwenden von Symbolen aus bestimmten Paketen

      Wenn Sie die Font Awesome Symbole-Seite durchblättern, werden Sie feststellen, dass es normalerweise mehrere Versionen desselben Symbols gibt. Sehen wir uns beispielsweise das Symbol boxing-glove an:

      Boxhandschuh-Symbol, drei verschiedene Versionen

      Um ein bestimmtes Symbol zu verwenden, müssen Sie <FontAwesomeIcon> anpassen. Im Folgenden werden mehrere Arten des gleichen Symbols aus verschiedenen Paketen angezeigt. Dazu gehören die bereits erwähnten dreibuchstabigen Kurzformen.

      Anmerkung: Die folgenden werden nicht funktionieren, bis wir in einigen Abschnitten eine Symbol-Bibliothek aufgebaut haben.

      Hier ist ein Beispiel für die „Solid“-Version:

      <FontAwesomeIcon icon={['fas', 'code']} />
      

      Wenn kein Typ angegeben ist, wird standardmäßig die „Solid“-Version verwendet:

      <FontAwesomeIcon icon={faCode} />
      

      Und die „Light“-Version, unter Verwendung von fal:

      <FontAwesomeIcon icon={['fal', 'code']} />;
      

      Wir mussten unser icon-Prop zu einem Array statt einer einfachen Zeichenfolge ändern.

      Schritt 3 — Installieren von Font Awesome

      Da es mehrere Versionen eines Symbols, mehrerer Pakete und kostenlose/Pro-Pakete gibt, erfordert das Installieren aller mehr als ein npm-Paket. Möglicherweise müssen Sie mehrere installieren und dann die gewünschten Symbole auswählen.

      Für diesen Artikel installieren wir alles, damit wir zeigen können, wie mehrere Pakete installiert werden.

      Führen Sie den folgenden Befehl aus, um die Basispakete zu installieren:

      • npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome

      Führen Sie die folgenden Befehle aus, um die regulären Symbole zu installieren:

      • # regular icons
      • npm i -S @fortawesome/free-regular-svg-icons
      • npm i -S @fortawesome/pro-regular-svg-icons

      Dadurch werden die „Solid“-Symbole (gefüllte Symbole) installiert:

      • # solid icons
      • npm i -S @fortawesome/free-solid-svg-icons
      • npm i -S @fortawesome/pro-solid-svg-icons

      Verwenden Sie diesen Befehl für „Light“-Symbole (Symbole mit dünnem Rand):

      • # light icons
      • npm i -S @fortawesome/pro-light-svg-icons

      Dies installiert die „Duotone“-Symbole (Symbole mit zwei Farben):

      • # duotone icons
      • npm i -S @fortawesome/pro-duotone-svg-icons

      Zum Schluss installiert dies die Marken-Symbole:

      • # brand icons
      • npm i -S @fortawesome/free-brands-svg-icons

      Oder, wenn Sie es vorziehen, alle auf einmal zu installieren, können Sie diesen Befehl verwenden, um die kostenlosen Symbol-Sätze zu installieren:

      • npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons

      Wenn Sie ein Pro-Konto mit Font Awesome haben, können Sie den folgenden Befehl verwenden, um alle Symbole zu installieren:

      • npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome @fortawesome/free-regular-svg-icons @fortawesome/pro-regular-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/pro-solid-svg-icons @fortawesome/pro-light-svg-icons @fortawesome/pro-duotone-svg-icons @fortawesome/free-brands-svg-icons

      Sie haben die Pakete installiert, aber sie noch nicht in Ihrer Anwendung verwendet oder zu unseren App-Bundles hinzugefügt. Sehen wir uns im nächsten Schritt an, wie Sie dies tun können.

      Schritt 4 — Erstellen einer Symbol-Bibliothek

      Es kann mühsam sein, das gewünschte Symbol in mehrere Dateien zu importieren. Angenommen, Sie verwenden das Twitter-Logo an mehreren Stellen, dann wollen Sie das nicht mehrfach schreiben müssen.

      Um alles an einem Ort zu importieren, anstatt jedes Symbol in jede separate Datei zu importieren, erstellen wir eine Font Awesome Bibliothek.

      Erstellen wir fontawesome.js im Ordner src und importieren diese dann in index.js. Es steht Ihnen frei, diese Datei an beliebiger Stelle hinzuzufügen, solange die Komponenten, in denen Sie die Symbole verwenden möchten, Zugriff haben (untergeordnete Komponenten sind). Sie können dies sogar direkt in Ihrer index.js oder App.js tun. Es kann jedoch besser sein, dies in eine separate Datei auszulagern, da es groß werden kann:

      src/fontawesome.js

      // import the library
      import { library } from '@fortawesome/fontawesome-svg-core';
      
      // import your icons
      import { faMoneyBill } from '@fortawesome/pro-solid-svg-icons';
      import { faCode, faHighlighter } from '@fortawesome/free-solid-svg-icons';
      
      library.add(
        faMoneyBill,
        faCode,
        faHighlighter
        // more icons go here
      );
      

      Wenn Sie dies in einer eigenen Datei getan haben, müssen Sie in index.js importieren:

      src/index.js

      import React from 'react';
      import { render } from 'react-dom';
      
      // import your fontawesome library
      import './fontawesome';
      
      render(<App />, document.getElementById('root'));
      

      Importieren eines kompletten Symbol-Pakets

      Das Importieren eines kompletten Pakets wird nicht empfohlen, da Sie jedes einzelne Symbol in Ihre Anwendung importieren, wodurch ein großes Bundle entstehen kann. Wenn Sie ein komplettes Paket importieren müssen, können Sie dies selbstverständlich tun.

      Nehmen wir in diesem Beispiel an, Sie wollen alle Marken-Symbole in @fortawesome/free-brands-svg-icons haben. Um das komplette Paket zu importieren, würden Sie Folgendes verwenden:

      src/fontawesome.js

      import { library } from '@fortawesome/fontawesome-svg-core';
      import { fab } from '@fortawesome/free-brands-svg-icons';
      
      library.add(fab);
      

      fab repräsentiert das gesamte Markensymbol-Paket.

      Importieren einzelner Symbole

      Es wird empfohlen, die Symbole von Font Awesome einzeln zu importieren, damit Ihre endgültigen Bundle-Größen so klein wie möglich sind, da Sie nur das importieren, was Sie benötigen.

      Auf diese Weise können Sie eine Bibliothek aus mehreren Symbolen aus den verschiedenen Paketen erstellen:

      src/fontawesome.js

      import { library } from '@fortawesome/fontawesome-svg-core';
      
      import { faUserGraduate } from '@fortawesome/pro-light-svg-icons';
      import { faImages } from '@fortawesome/pro-solid-svg-icons';
      import {
        faGithubAlt,
        faGoogle,
        faFacebook,
        faTwitter
      } from '@fortawesome/free-brands-svg-icons';
      
      library.add(
        faUserGraduate,
        faImages,
        faGithubAlt,
        faGoogle,
        faFacebook,
        faTwitter
      );
      

      Importieren desselben Symbols aus mehreren Stilen

      Wenn Sie alle Arten von boxing-glove für die Pakete fal, far und fas wünschen, können Sie sie alle unter einem anderen Namen importieren und dann hinzufügen.

      src/fontawesome.js

      import { library } from '@fortawesome/fontawesome-svg-core';
      import { faBoxingGlove } from '@fortawesome/pro-light-svg-icons';
      import {
        faBoxingGlove as faBoxingGloveRegular
      } from '@fortawesome/pro-regular-svg-icons';
      import {
        faBoxingGlove as faBoxingGloveSolid
      } from '@fortawesome/pro-solid-svg-icons';
      
      library.add(
          faBoxingGlove,
          faBoxingGloveRegular,
          faBoxingGloveSolid
      );
      

      Sie können sie dann verwenden, indem Sie die verschiedenen Präfixe implementieren:

      <FontAwesomeIcon icon={['fal', 'boxing-glove']} />
      <FontAwesomeIcon icon={['far', 'boxing-glove']} />
      <FontAwesomeIcon icon={['fas', 'boxing-glove']} />
      

      Schritt 5 — Verwenden von Symbolen

      Nachdem Sie nun alles Notwendige installiert haben und Ihre Symbole zu Ihrer Font Awesome Bibliothek hinzugefügt haben, können Sie sie verwenden und Größen zuweisen. In diesem Tutorial verwenden wir das Paket „light“ (fal).

      Dieses erste Beispiel verwendet die normale Größe:

      <FontAwesomeIcon icon={['fal', 'code']} />
      

      Das zweite Beispiel kann benannte Größenanpassung verwenden, wobei Abkürzungen für klein (sm), mittel (md), groß (lg) und extragroß (xl) verwendet werden:

      <FontAwesomeIcon icon={['fal', 'code']} size="sm" />
      <FontAwesomeIcon icon={['fal', 'code']} size="md" />
      <FontAwesomeIcon icon={['fal', 'code']} size="lg" />
      <FontAwesomeIcon icon={['fal', 'code']} size="xl" />
      

      Die dritte Möglichkeit ist die Verwendung der nummerierten Größenanpassung, die bis zu 6 gehen kann:

      <FontAwesomeIcon icon={['fal', 'code']} size="2x" />
      <FontAwesomeIcon icon={['fal', 'code']} size="3x" />
      <FontAwesomeIcon icon={['fal', 'code']} size="4x" />
      <FontAwesomeIcon icon={['fal', 'code']} size="5x" />
      <FontAwesomeIcon icon={['fal', 'code']} size="6x" />
      

      Wenn Sie die nummerierte Größenanpassung verwenden, können Sie auch Dezimalzahlen verwenden, um die perfekte Größe zu finden:

      <FontAwesomeIcon icon={['fal', 'code']} size="2.5x" />
      

      Font Awesome formatiert die von ihm verwendeten SVGs, indem es die Textfarbe der CSS übernimmt. Wenn Sie ein Tag <p> an der Stelle platzieren würden, an der das Symbol erscheinen soll, wäre die Farbe des Absatzes die Farbe des Symbols:

      <FontAwesomeIcon icon={faHome} style={{ color: 'red' }} />
      

      Font Awesome verfügt auch über eine Power Transforms-Funktion, mit der Sie verschiedene Transformationen aneinander reihen können:

      <FontAwesomeIcon icon={['fal', 'home']} transform="down-4 grow-2.5" />
      

      Sie können jede der Transformationen verwenden, die auf der Website Font Awesome zu finden sind. Damit können Sie Symbole nach oben, unten, links oder rechts verschieben, um eine perfekte Positionierung neben dem Text oder innerhalb von Schaltflächen zu erzielen.

      Symbole mit fester Breite

      Wenn Symbole an einer Stelle verwendet werden, an der sie alle gleich breit und einheitlich sein müssen, können wir mit Font Awesome das Prop fixedWidth verwenden. Nehmen wir zum Beispiel an, dass Sie feste Breiten für Ihre Navigation-Dropdown-Liste benötigen:

      Scotch Website mit Menü-Dropdown und „Courses“ hervorgehoben

      <FontAwesomeIcon icon={['fal', 'home']} fixedWidth />
      <FontAwesomeIcon icon={['fal', 'file-alt']} fixedWidth />
      <FontAwesomeIcon icon={['fal', 'money-bill']} fixedWidth />
      <FontAwesomeIcon icon={['fal', 'cog']} fixedWidth />
      <FontAwesomeIcon icon={['fal', 'usd-square']} fixedWidth />
      <FontAwesomeIcon icon={['fal', 'play-circle']} fixedWidth />
      <FontAwesomeIcon icon={['fal', 'chess-king']} fixedWidth />
      <FontAwesomeIcon icon={['fal', 'sign-out-alt']} fixedWidth />
      

      Sich drehende Symbole

      Das Implementieren von sich drehenden Symbolen auf Formularschaltflächen ist hilfreich, wenn ein Formular verarbeitet wird. Sie können das Dreh-Symbol verwenden, um einen schönen Ladeeffekt zu erzielen:

      <FontAwesomeIcon icon={['fal', 'spinner']} spin />
      

      Sie können das Prop spin auf allem Möglichen verwenden!

      <FontAwesomeIcon icon={['fal', 'code']} spin />
      

      Erweitert: Maskierende Symbole

      Mit Font Awesome können Sie zwei Symbole kombinieren, um Effekte mit Maskierung zu erzielen. Sie definieren Ihr normales Symbol und verwenden dann das Prop mask, um ein zweites Symbol zu definieren, das darüber gelegt wird. Das erste Symbol wird innerhalb des Maskierungssymbols beschränkt.

      In diesem Beispiel haben wir Tag-Filter mit Maskierung erstellt:

      Tag-Filter mit Font Awesome

      <FontAwesomeIcon
        icon={['fab', 'javascript']}
        mask={['fas', 'circle']}
        transform="grow-7 left-1.5 up-2.2"
        fixedWidth
      />
      

      Beachten Sie, wie Sie mehrere Props transform aneinanderketten können, um das innere Symbol so zu verschieben, dass es in das Maskierungssymbol passt.

      Wir färben und ändern mit Font Awesome sogar das Hintergrundlogo:

      Erneut die Tag-Filter, aber jetzt mit einem blauen Hintergrund

      Schritt 6 — Verwenden von react-fontawesome und Symbolen außerhalb von React

      Wenn Ihre gesamte Website keine einseitige Anwendung (Single Page Application, SPA) ist und Sie stattdessen eine traditionelle Website und React darüber hinzugefügt haben. Um den Import der SVG/JS-Hauptbibliothek und auch der Bibliothek react-fontawesome zu vermeiden, hat Font Awesome eine Möglichkeit geschaffen, die React-Bibliotheken zu verwenden, um auf Symbole außerhalb der React-Komponenten zu achten.

      Wenn Sie eine <i class="fas fa-stroopwafel"></i> haben, können wir Font Awesome mit dem Folgenden anweisen, diese zu überwachen und zu aktualisieren:

      import { dom } from '@fortawesome/fontawesome-svg-core'
      
      dom.watch() // This will kick off the initial replacement of i to svg tags and configure a MutationObserver
      

      MutationObserver ist eine Webtechnologie, die es uns ermöglicht, DOM auf Änderungen performant zu überwachen. Weitere Informationen über diese Technik finden Sie in den Dokumenten zu React Font Awesome.

      Zusammenfassung

      Die gemeinsame Verwendung von Font Awesome und React ist eine großartige Kombination, macht es jedoch erforderlich, mehrere Pakete zu verwenden und verschiedene Kombinationen zu berücksichtigen. In diesem Tutorial haben Sie einige der Möglichkeiten untersucht, wie Sie Font Awesome und React zusammen verwenden können.



      Source link

      Einrichten eines Node-Projekts mit TypeScript


      Einführung

      Node ist eine Laufzeitumgebung, die es ermöglicht, serverseitiges JavaScript zu schreiben. Seit ihrer Veröffentlichung im Jahr 2011 hat sie eine weite Verbreitung gefunden. Das Schreiben von serverseitigem JavaScript kann eine Herausforderung sein, da die Codebasis aufgrund der Art der JavaScript-Sprache – dynamisch und schwach typisiert – wächst.

      Entwickler, die aus anderen Sprachen zu JavaScript kommen, beklagen sich oft über den Mangel an starker statischer Typisierung, aber genau hier kommt TypeScript ins Spiel, um diese Lücke zu schließen.

      TypeScript ist eine typisierte (optionale) Obermenge von JavaScript, die bei der Erstellung und Verwaltung großer JavaScript-Projekte helfen kann. Man kann es sich als JavaScript mit zusätzlichen Funktionen wie starker statischer Typisierung, Kompilierung und objektorientierter Programmierung vorstellen.

      Anmerkung: TypeScript ist technisch gesehen eine Obermenge von JavaScript, wobei der gesamte JavaScript-Code gültiger TypeScript-Code ist.

      Hier sind einige Vorteile der Verwendung von TypeScript:

      1. Optionale statische Typisierung.
      2. Typinferenz.
      3. Fähigkeit zur Verwendung von Schnittstellen.

      In diesem Tutorial richten Sie ein Node-Projekt mit TypeScript ein. Sie werden eine Express-Anwendung mit TypeScript erstellen und diese in einen sauberen und zuverlässigen JavaScript-Code transpilieren.

      Voraussetzungen

      Bevor Sie mit diesem Leitfaden beginnen, muss Node.js auf Ihrem Computer installiert sein. Sie können dies erreichen, indem Sie dem Leitfaden Installieren von Node.js und Erstellen einer lokalen Entwicklungsumgebung für Ihr Betriebssystem folgen.

      Schritt 1 — Initialisieren eines npm-Projekts

      Erstellen Sie zunächst einen neuen Ordner namens node_project und wechseln Sie in dieses Verzeichnis.

      • mkdir node_project
      • cd node_project

      Initialisieren Sie es als npm-Projekt:

      Nach der Ausführung von npm init müssen Sie npm Informationen über Ihr Projekt bereitstellen. Wenn Sie es vorziehen, npm sinnvolle Standardeinstellungen annehmen zu lassen, können Sie das Flag y hinzufügen, um die Eingabeaufforderungen für zusätzliche Informationen zu überspringen:

      Nachdem Ihr Projektraum nun eingerichtet ist, können Sie mit der Installation der erforderlichen Abhängigkeiten fortfahren.

      Schritt 2 — Installieren der Abhängigkeiten

      Wenn ein blankes npm-Projekt initialisiert wurde, besteht der nächste Schritt darin, die Abhängigkeiten zu installieren, die zur Ausführung von TypeScript erforderlich sind.

      Führen Sie die folgenden Befehle aus Ihrem Projektverzeichnis aus, um die Abhängigkeiten zu installieren:

      • npm install -D typescript@3.3.3
      • npm install -D tslint@5.12.1

      Das Flag -D ist die Kurzform für: -save-dev. In der Dokumentation zu npmjs können Sie mehr über dieses Flag erfahren.

      Jetzt ist es an der Zeit, das Express-Framework zu installieren:

      • npm install -S express@4.16.4
      • npm install -D @types/express@4.16.1

      Der zweite Befehl installiert die Express-Typen für die TypeScript-Unterstützung. Typen in TypeScript sind Dateien, normalerweise mit einer Erweiterung von .d.ts. Die Dateien werden verwendet, um Typinformationen über eine API, in diesem Fall das Express-Framework, bereitzustellen.

      Dieses Paket ist erforderlich, da TypeScript und Express unabhängige Pakete sind. Ohne das Paket @types/express gibt es für TypeScript keine Möglichkeit, Informationen über die Typen von Express-Klassen zu erhalten.

      Schritt 3 — Konfigurieren von TypeScript

      In diesem Abschnitt richten Sie TypeScript ein und konfigurieren Linting für TypeScript. TypeScript verwendet eine Datei namens tsconfig.json, um die Compiler-Optionen für ein Projekt zu konfigurieren. Erstellen Sie eine Datei tsconfig.json im Stammverzeichnis des Projektverzeichnisses und fügen Sie das folgende Snippet ein:

      tsconfig.json

      {
        "compilerOptions": {
          "module": "commonjs",
          "esModuleInterop": true,
          "target": "es6",
          "moduleResolution": "node",
          "sourceMap": true,
          "outDir": "dist"
        },
        "lib": ["es2015"]
      }
      

      Sehen wir uns einige der Schlüssel im obigen JSON-Snippet an:

      • module: Gibt die Methode zur Erzeugung des Modulcodes an. Node verwendet commonjs.
      • target: Gibt das Ausgabe-Sprachniveau an.
      • moduleResolution: Dies hilft dem Compiler herauszufinden, worauf sich ein Import bezieht. Der Wert node imitiert den Mechanismus zur Auflösung des Node-Moduls.
      • outDir: Dies ist der Speicherort für die Ausgabe von .js-Dateien nach der Transpilation. In diesem Tutorial speichern Sie sie als dist.

      Eine Alternative zur manuellen Erstellung und Population der Datei tsconfig.json ist die Ausführung des folgenden Befehls:

      Dieser Befehl generiert eine gut kommentierte tsconfig.json-Datei.

      Um mehr über die verfügbaren Schlüsselwertoptionen zu erfahren, bietet die offizielle TypeScript-Dokumentation Erklärungen zu jeder Option.

      Jetzt können Sie TypeScript-Linting für das Projekt konfigurieren. Führen Sie den folgenden Befehl in einem Terminal im Stammverzeichnis Ihres Projektverzeichnisses aus, das in diesem Tutorial als node_project eingerichtet wurde, um eine tslint.json-Datei zu erzeugen:

      • ./node_modules/.bin/tslint --init

      Öffnen Sie die neu erzeugte tslint.json-Datei und fügen Sie die Regel no-console entsprechend hinzu:

      tslint.json

      {
        "defaultSeverity": "error",
        "extends": ["tslint:recommended"],
        "jsRules": {},
        "rules": {
          "no-console": false
        },
        "rulesDirectory": []
      }
      

      Standardmäßig verhindert der TypeScript-Linter die Verwendung von Debugging mittels der Anweisungen console, weshalb der Linter explizit angewiesen werden muss, die standardmäßige Regel no-console zu widerrufen.

      Schritt 4 — Aktualisieren der Datei package.json

      An diesem Punkt im Tutorial können Sie entweder Funktionen im Terminal einzeln ausführen oder ein npm-Skript erstellen, um sie auszuführen.

      In diesem Schritt erstellen Sie ein Skript start, das den TypeScript-Code kompiliert und transpiliert und dann die resultierende Anwendung .js ausführt.

      Öffnen Sie die Datei package.json und aktualisieren Sie sie entsprechend:

      package.json

      {
        "name": "node-with-ts",
        "version": "1.0.0",
        "description": "",
        "main": "dist/app.js",
        "scripts": {
          "start": "tsc && node dist/app.js",
          "test": "echo "Error: no test specified" && exit 1"
        },
        "author": "",
        "license": "ISC",
        "devDependencies": {
          "@types/express": "^4.16.1",
          "tslint": "^5.12.1",
          "typescript": "^3.3.3"
        },
        "dependencies": {
          "express": "^4.16.4"
        }
      }
      

      Im obigen Snippet haben Sie den Pfad main aktualisiert und den Befehl start dem Abschnitt scripts hinzugefügt. Wenn Sie sich den Befehl start ansehen, sehen Sie, dass zuerst der Befehl tsc ausgeführt wird, und dann der Befehl node. Dadurch wird die generierte Ausgabe mit node kompiliert und dann ausgeführt.

      Der Befehl tsc weist TypeScript an, die Anwendung zu kompilieren und die generierte Ausgabe .js im angegebenen Verzeichnis outDir zu platzieren, wie es in der Datei tsconfig.json festgelegt ist.

      Schritt 5 — Erstellen und Ausführen eines einfachen Express-Servers

      Nachdem TypeScript und dessen Linter konfiguriert sind, ist es an der Zeit, einen Node Express-Server zu erstellen.

      Erstellen Sie zunächst einen Ordner src im Stammverzeichnis Ihres Projektverzeichnisses:

      Erstellen Sie dann darin eine Datei namens app.ts:

      An diesem Punkt sollte die Ordnerstruktur wie folgt aussehen:

      ├── node_modules/
      ├── src/
        ├── app.ts
      ├── package-lock.json
      ├── package.json
      ├── tsconfig.json
      ├── tslint.json
      

      Öffnen Sie die Datei app.ts mit einem Texteditor Ihrer Wahl und fügen Sie das folgende Code-Snippet ein:

      src/app.ts

      import express from 'express';
      
      const app = express();
      const port = 3000;
      app.get('/', (req, res) => {
        res.send('The sedulous hyena ate the antelope!');
      });
      app.listen(port, err => {
        if (err) {
          return console.error(err);
        }
        return console.log(`server is listening on ${port}`);
      });
      

      Der obige Code erstellt einen Node-Server, der auf Port 3000 auf Anfragen lauscht. Führen Sie die Anwendung mit dem folgenden Befehl aus:

      Wenn sie erfolgreich ausgeführt wird, wird eine Nachricht im Terminal protokolliert:

      Output

      • server is listening on 3000

      Sie können nun http://localhost:3000 in Ihrem Browser besuchen, und Sie sollten die Nachricht sehen:

      Output

      • The sedulous hyena ate the antelope!

      Browserfenster mit der Nachricht: The sedulous hyena ate the antelope! (Die fleißige Hyäne fraß die Antilope!)

      Öffnen Sie die Datei dist/app.js und Sie finden die transpilierte Version des TypeScript-Codes:

      dist/app.js

      "use strict";
      
      var __importDefault = (this && this.__importDefault) || function (mod) {
          return (mod && mod.__esModule) ? mod : { "default": mod };
      };
      Object.defineProperty(exports, "__esModule", { value: true });
      const express_1 = __importDefault(require("express"));
      const app = express_1.default();
      const port = 3000;
      app.get('/', (req, res) => {
          res.send('The sedulous hyena ate the antelope!');
      });
      app.listen(port, err => {
          if (err) {
              return console.error(err);
          }
          return console.log(`server is listening on ${port}`);
      });
      
      //# sourceMappingURL=app.js.map
      

      An diesem Punkt haben Sie Ihr Node-Projekt erfolgreich für die Verwendung von TypeScript eingerichtet.

      Zusammenfassung

      In diesem Tutorial haben Sie erfahren, warum TypeScript nützlich ist, um zuverlässigen JavaScript-Code zu schreiben. Sie haben auch einige Vorteile der Arbeit mit TypeScript kennengelernt.

      Abschließend haben Sie ein Node-Projekt mit dem Express-Framework eingerichtet, das Projekt jedoch mit TypeScript kompiliert und ausgeführt.



      Source link

      Entwickeln einer Drupal 9-Website auf einem lokalen Rechner mit Docker und DDEV


      Der Autor hat den Diversity in Tech Fund dazu ausgewählt, eine Spende im Rahmen des Programms Write for DOnations zu erhalten.

      Einführung

      DDEV ist ein Open-Source-Tool, das Docker verwendet, um für viele verschiedene PHP-Frameworks lokale Entwicklungsumgebungen zu erstellen. Durch Verwendung der Vorteile von Containerisierung kann DDEV die Arbeit an mehreren Projekten, bei denen verschiedene Tech-Stacks und Cloud-Server zum Einsatz kommen, erheblich vereinfachen. DDEV enthält Vorlagen für WordPress, Laravel, Magento, TYPO3, Drupal und mehr.

      Drupal 9 wurde am 3. Juni 2020 für das Drupal CMS veröffentlicht. Drupal ist bekannt für seine hohe Benutzerfreundlichkeit und eine enorme Bibliothek an Modulen und Themen. Als PHP-Framework ist es beliebt für die Entwicklung und Pflege verschiedener Websites und Anwendungen aller Größen.

      In diesem Tutorial werden Sie mit DDEV auf Ihrem lokalen Rechner eine Drupal 9-Website erstellen. Damit können Sie zunächst Ihre Website einrichten und Ihr Projekt dann später, wenn Sie bereit sind, auf einem Produktionsserver bereitstellen.

      Voraussetzungen

      Um diesem Tutorial zu folgen, benötigen Sie:

      Anmerkung: Es ist möglich, Drupal 9 mit DDEV auf einem Remoteserver zu entwickeln; Sie benötigen jedoch eine Lösung, um in einem Webbrowser auf localhost zuzugreifen. Der DDEV-Befehl ddev share arbeitet mit ngrok zusammen, um für Sie und andere Stakeholder einen sicheren Tunnel zu Ihrem Server einzurichten und Ihre Entwicklungs-Site anzuzeigen. Zur persönlichen Verwendung können Sie auch eine GUI auf Ihrem Remoteserver installieren und über einen Webbrowser innerhalb dieser Oberfläche auf Ihre Entwicklungs-Site zugreifen. Folgen Sie dazu unserem Leitfaden Installieren und Konfigurieren von VNC unter Ubuntu 20.04. Für eine noch schnellere GUI-Lösung können Sie unserem Leitfaden zum Einrichten eines Remotedesktops mit X2Go unter Ubuntu 20.04 folgen.

      Schritt 1 — Installieren von DDEV

      In diesem Schritt installieren Sie DDEV auf Ihrem lokalen Rechner. Option 1 enthält Anweisungen für macOS, während Option 2 Anweisungen für Linux beinhaltet. Dieses Tutorial wurde mit DDEV Version 1.15.0 getestet.

      Option 1 — Installieren von DDEV unter macOS

      DDEV empfiehlt macOS-Benutzern, das Tool mit dem Homebrew-Paketmanager zu installieren. Verwenden Sie folgenden brew-Befehl zum Installieren der neuesten stabilen Version:

      • brew tap drud/ddev && brew install drud/ddev/ddev

      Wenn Sie die absolut neueste Version bevorzugen, können Sie brew zum Installieren von ddev-edge verwenden:

      • brew tap drud/ddev-edge && brew install drud/ddev-edge/ddev

      Wenn Sie bereits eine Version von DDEV installiert haben oder Ihre Version aktualisieren möchten, schließen Sie DDEV und verwenden brew zum Aktualisieren Ihrer Installation:

      • ddev poweroff
      • brew upgrade ddev

      Sobald Sie DDEV installiert oder aktualisiert haben, führen Sie ddev version aus, um Ihre Software zu überprüfen:

      Sie werden eine Ausgabe wie diese sehen:

      Output

      DDEV-Local version v1.15.0 commit v1.15.0 db drud/ddev-dbserver-mariadb-10.2:v1.15.0 dba phpmyadmin/phpmyadmin:5 ddev-ssh-agent drud/ddev-ssh-agent:v1.15.0 docker 19.03.8 docker-compose 1.25.5 os darwin router drud/ddev-router:v1.15.0 web drud/ddev-webserver:v1.15.0

      DDEV enthält eine leistungsstarke CLI oder Befehlszeilenschnittstelle. Führen Sie ddev aus, um sich über einige gängige Befehle zu informieren:

      Sie sehen die folgende Ausgabe:

      Output

      Create and maintain a local web development environment. Docs: https://ddev.readthedocs.io Support: https://ddev.readthedocs.io/en/stable/#support Usage: ddev [command] Available Commands: auth A collection of authentication commands composer Executes a composer command within the web container config Create or modify a ddev project configuration in the current directory debug A collection of debugging commands delete Remove all project information (including database) for an existing project describe Get a detailed description of a running ddev project. exec Execute a shell command in the container for a service. Uses the web service by default. export-db Dump a database to a file or to stdout help Help about any command hostname Manage your hostfile entries. import-db Import a sql file into the project. import-files Pull the uploaded files directory of an existing project to the default public upload directory of your project. list List projects logs Get the logs from your running services. pause uses 'docker stop' to pause/stop the containers belonging to a project. poweroff Completely stop all projects and containers pull Pull files and database using a configured provider plugin. restart Restart a project or several projects. restore-snapshot Restore a project's database to the provided snapshot version. sequelpro This command is not available since sequel pro.app is not installed share Share project on the internet via ngrok. snapshot Create a database snapshot for one or more projects. ssh Starts a shell session in the container for a service. Uses web service by default. start Start a ddev project. stop Stop and remove the containers of a project. Does not lose or harm anything unless you add --remove-data. version print ddev version and component versions Flags: -h, --help help for ddev -j, --json-output If true, user-oriented output will be in JSON format. -v, --version version for ddev Use "ddev [command] --help" for more information about a command.

      Weitere Informationen zur Verwendung der DDEV-CLI finden Sie in der offiziellen DDEV-Dokumentation.

      Nachdem DDEV auf Ihrem lokalen Rechner installiert wurde, sind Sie nun bereit, Drupal 9 zu installieren und mit der Entwicklung einer Website zu beginnen.

      Option 2 — Installieren von DDEV unter Linux

      In einem Linux-Betriebssystem können Sie DDEV mit Homebrew für Linux installieren oder das offizielle Installationsskript verwenden. Beginnen Sie unter Ubuntu mit dem Aktualisieren Ihrer Liste mit Paketen im apt-Paketmanager (Sie können apt in Debian bzw. den äquivalenten Paketmanager, der mit Ihrer Linux-Distribution verknüpft ist, verwenden):

      Installieren Sie nun einige Voraussetzungspakete aus dem offiziellen Repository von Ubuntu:

      • sudo apt install build-essential apt-transport-https ca-certificates software-properties-common curl

      Mit diesen Paketen können Sie das DDEV-Installationsskript aus dem offiziellen GitHub-Repository herunterladen.

      Laden Sie das Skript jetzt herunter:

      • curl -O https://raw.githubusercontent.com/drud/ddev/master/scripts/install_ddev.sh

      Öffnen Sie es vor dem Ausführen des Skripts in nano oder Ihrem bevorzugten Texteditor und inspizieren Sie den Inhalt:

      nano install_ddev.sh
      

      Sobald Sie die Inhalte des Skripts geprüft haben und damit zufrieden sind, speichern und schließen Sie die Datei. Jetzt sind Sie bereit, das Installationsskript auszuführen.

      Verwenden Sie den Befehl chmod, um das Skript ausführbar zu machen:

      Führen Sie das Skript jetzt aus:

      Im Installationsprozess werden Sie ggf. dazu aufgefordert, einige Einstellungen zu bestätigen oder Ihr sudo-Passwort einzugeben. Nach Abschluss der Installation wird DDEV in Ihrem Linux-Betriebssystem verfügbar sein.

      Führen Sie ddev version aus, um Ihre Software zu überprüfen:

      Sie werden eine Ausgabe wie diese sehen:

      Output

      DDEV-Local version v1.15.0 commit v1.15.0 db drud/ddev-dbserver-mariadb-10.2:v1.15.0 dba phpmyadmin/phpmyadmin:5 ddev-ssh-agent drud/ddev-ssh-agent:v1.15.0 docker 19.03.8 docker-compose 1.25.5 os linux router drud/ddev-router:v1.15.0 web drud/ddev-webserver:v1.15.0

      DDEV ist eine leistungsstarke CLI oder Befehlszeilenschnittstelle. Führen Sie ddev ohne etwas anderes aus, um sich über einige gängige Befehle zu informieren:

      Sie sehen die folgende Ausgabe:

      Output

      Create and maintain a local web development environment. Docs: https://ddev.readthedocs.io Support: https://ddev.readthedocs.io/en/stable/#support Usage: ddev [command] Available Commands: auth A collection of authentication commands composer Executes a composer command within the web container config Create or modify a ddev project configuration in the current directory debug A collection of debugging commands delete Remove all project information (including database) for an existing project describe Get a detailed description of a running ddev project. exec Execute a shell command in the container for a service. Uses the web service by default. export-db Dump a database to a file or to stdout help Help about any command hostname Manage your hostfile entries. import-db Import a sql file into the project. import-files Pull the uploaded files directory of an existing project to the default public upload directory of your project. list List projects logs Get the logs from your running services. pause uses 'docker stop' to pause/stop the containers belonging to a project. poweroff Completely stop all projects and containers pull Pull files and database using a configured provider plugin. restart Restart a project or several projects. restore-snapshot Restore a project's database to the provided snapshot version. sequelpro This command is not available since sequel pro.app is not installed share Share project on the internet via ngrok. snapshot Create a database snapshot for one or more projects. ssh Starts a shell session in the container for a service. Uses web service by default. start Start a ddev project. stop Stop and remove the containers of a project. Does not lose or harm anything unless you add --remove-data. version print ddev version and component versions Flags: -h, --help help for ddev -j, --json-output If true, user-oriented output will be in JSON format. -v, --version version for ddev Use "ddev [command] --help" for more information about a command.

      Weitere Informationen zur Verwendung der DDEV-CLI finden Sie in der offiziellen DDEV-Dokumentation.

      Nachdem DDEV auf Ihrem lokalen Rechner installiert ist, sind Sie nun bereit, Drupal 9 bereitzustellen und mit der Entwicklung einer Website zu beginnen.

      Schritt 2 — Bereitstellen einer neuen Drupal 9-Site mit DDEV

      Mit ausgeführtem DDEV werden Sie nun ein Drupal-spezifisches Dateisystem erstellen, Drupal 9 installieren und dann ein standardmäßiges Websiteprojekt initiieren.

      Zuerst erstellen Sie ein root-Verzeichnis für das Projekt und öffnen es. Von hier aus führen Sie alle verbleibenden Befehle aus. In diesem Tutorial wird d9test verwendet; Sie können Ihr Verzeichnis jedoch auch anders nennen. Beachten Sie jedoch, dass DDEV nicht gut mit Bindestrichen in Namen umgehen kann. Es gilt als bewährtes Verfahren, Verzeichnisnamen wie my-project oder drupal-site-1 zu vermeiden.

      Erstellen Sie das root-Verzeichnis für Ihr Projekt und navigieren Sie dort hin:

      DDEV eignet sich hervorragend zum Erstellen von Verzeichnisstrukturen, die mit bestimmten CMS-Plattformen übereinstimmen. Verwenden Sie den Befehl ddev config zum Einrichten einer Verzeichnisstruktur, die für Drupal 9 spezifisch ist:

      • ddev config --project-type=drupal9 --docroot=web --create-docroot

      Sie werden eine Ausgabe wie diese sehen:

      Output

      Creating a new ddev project config in the current directory (/Users/sammy/d9test) Once completed, your configuration will be written to /Users/sammy/d9test/.ddev/config.yaml Created docroot at /Users/sammy/d9test/web You have specified a project type of drupal9 but no project of that type is found in /Users/sammy/d9test/web Ensuring write permissions for d9new No settings.php file exists, creating one Existing settings.php file includes settings.ddev.php Configuration complete. You may now run 'ddev start'.

      Da Sie --project-type=drupal9 an Ihren Befehl ddev config übergeben haben, hat DDEV mehrere Unterverzeichnisse und Dateien erstellt, die die Standardorganisation für eine Drupal-Website darstellen. Die Verzeichnisstruktur Ihres Projekts wird nun wie folgt aussehen:

      A Drupal 9 directory tree

      .
      ├── .ddev
      │   ├── .gitignore
      │   ├── config.yaml
      │   ├── db-build
      │   │   └── Dockerfile.example
      │   └── web-build
      │       └── Dockerfile.example
      └── web
          └── sites
              └── default
                  ├── .gitignore
                  ├── settings.ddev.php
                  └── settings.php
      
      6 directories, 7 files
      

      .ddev/ wird der Hauptordner für die ddev-Konfiguration sein. web/ ist der docroot für Ihr neues Projekt; er enthält mehrere spezifische Dateien mit Einstellungen (settings). Sie verfügen nun über das Grundgerüst für Ihr neues Drupal-Projekt.

      Der nächste Schritt besteht darin, Ihre Plattform zu initialisieren, wodurch die erforderlichen Container und Networking-Konfigurationen erstellt werden. DDEV bindet sich an Ports 80 und 443. Wenn Sie also einen Webserver wie Apache auf Ihrem Rechner ausführen oder etwas anderes verwenden, das diese Ports nutzt, halten Sie diese Dienste vor dem Fortfahren an.

      Verwenden Sie den Befehl ddev start, um Ihre Plattform zu initialisieren:

      Dadurch werden alle Docker-basierten Container für Ihr Projekt erstellt, darunter ein Webcontainer, ein Datenbankcontainer und phpmyadmin. Nach Abschluss der Initialisierung sehen Sie eine Ausgabe wie diese (Ihre Portnummer kann sich davon unterscheiden):

      Output

      ... Successfully started d9test Project can be reached at http://d9test.ddev.site http://127.0.0.1:32773

      Anmerkung: Denken Sie daran, dass DDEV hier im Hintergrund Docker-Container startet. Wenn Sie diese Container anzeigen oder überprüfen möchten, ob sie ausgeführt werden, können Sie den Befehl docker ps verwenden:

      Neben anderen Containern, die Sie derzeit ausführen, finden Sie vier neue Container, die jeweils ein anderes Image ausführen: php-myadmin, ddev-webserver, ddev-router und ddev-dbserver-mariadb.

      ddev start hat Ihre Container erfolgreich erstellt und eine Ausgabe mit zwei URLs geliefert. Zwar steht in dieser Ausgabe, dass Ihr Projekt „unter http://d9test.ddev.site und http://127.0.0.1:32773 erreichbar ist“, doch wenn Sie diese URLs besuchen, wird ein Fehler ausgelöst. Ab Drupal 8 funktionieren der Drupal Core und die contrib-Module wie Abhängigkeiten. Deshalb müssen Sie Drupal zunächst mit Composer, dem Paketmanager für PHP-Projekte, installieren, bevor Sie etwas in Ihrem Webbrowser laden können.

      Eine der nützlichsten und elegantesten Funktionen von DDEV ist, dass Sie Composer-Befehle über die DDEV-CLI in Ihre containerisierte Umgebung übergeben können. Das bedeutet, dass Sie die spezifische Konfiguration Ihres Computers von Ihrer Entwicklungsumgebung trennen können. So müssen Sie die verschiedenen Probleme mit Dateipfaden, Abhängigkeiten und Versionen, die eine lokale PHP-Entwicklung im Allgemeinen begleiten, nicht mehr verwalten. Außerdem können Sie rasch und mit minimalem Aufwand zwischen verschiedenen Frameworks und Tech-Stacks wechseln.

      Verwenden Sie den Befehl ddev composer zum Herunterladen von drupal/recommended-project. Dadurch wird Drupal core mit seinen Bibliotheken und anderen verwandten Ressourcen heruntergeladen und ein Standardprojekt erstellt:

      • ddev composer create "drupal/recommended-project"

      Laden Sie nun eine abschließende Komponente namens Drush oder Drupal Shell herunter. In diesem Tutorial werden wir nur einen drush-Befehl nutzen. Das Tutorial bietet eine Alternative, doch ist drush eine leistungsstarke CLI für die Drupal-Entwicklung, die für zusätzliche Effizienz sorgt.

      Verwenden Sie ddev composer zum Installieren von drush:

      • ddev composer require "drush/drush"

      Sie haben nun ein standardmäßiges Drupal 9-Projekt erstellt und drush installiert. Jetzt werden Sie Ihr Projekt in einem Browser anzeigen und die Einstellungen Ihrer Website konfigurieren.

      Schritt 3 — Konfigurieren des Drupal-9-Projekts

      Nachdem Sie Drupal 9 installiert haben, können Sie Ihr neues Projekt nun in Ihrem Browser öffnen. Dazu können Sie ddev start erneut ausführen und eine der beiden ausgegebenen URLs kopieren. Alternativ können Sie folgenden Befehl verwenden, um Ihre Website in einem neuen Browserfenster automatisch zu starten:

      Der standardmäßige Drupal-Installationsassistent wird angezeigt.

      Drupal 9-Installationsprogramm über Browser

      Hier haben Sie zwei Optionen. Sie können diese Benutzeroberfläche verwenden und dem Assistenten durch die Installation folgen oder zu Ihrem Terminal zurückkehren und über ddev einen drush-Befehl übergeben. Die letztere Option automatisiert den Installationsprozess und setzt admin sowohl als Ihren Benutzernamen als auch als Passwort.

      Option 1 — Verwenden des Assistenten

      Kehren Sie zum Assistenten in Ihrem Browser zurück. Wählen Sie unter Sprache auswählen eine Sprache aus dem Drop-down-Menü aus und klicken Sie auf Speichern und fortfahren. Wählen Sie nun ein Installationsprofil aus. Sie können zwischen Standard, Minimal und Demo wählen. Treffen Sie Ihre Wahl und klicken Sie dann auf Speichern und fortfahren. Drupal überprüft automatisch Ihre Anforderungen, erstellt eine Datenbank und installiert Ihre Site. Ihr letzter Schritt besteht darin, einige Konfigurationen anzupassen. Fügen Sie für die Site einen Namen und eine E-Mail-Adresse, die auf Ihre Domäne endet, hinzu. Wählen Sie dann einen Benutzernamen und ein Passwort. Wählen Sie ein starkes Passwort aus und bewahren Sie Ihre Anmeldedaten an einem sicheren Ort auf. Fügen Sie schließlich eine private E-Mail-Adresse hinzu, die Sie regelmäßig überprüfen, füllen Sie die regionalen Einstellungen aus und klicken Sie auf Speichern und fortfahren.

      Drupal 9-Willkommensnachricht mit einer Warnung zu Berechtigungen

      Ihre neue Site wird mit einer Willkommensnachricht geladen.

      Option 2 — Verwenden der Befehlszeile

      Führen Sie im root-Verzeichnis Ihres Projekts den Befehl ddev exec aus, um mit drush eine standardmäßige Drupal-Site zu installieren:

      • ddev exec drush site:install --account-name=admin --account-pass=admin

      Dadurch wird Ihre Website wie beim Assistenten erstellt, jedoch mit verschiedenen Standardkonfigurationen. Ihr Benutzername und Passwort werden admin lauten.

      Starten Sie nun die Site, um sie in Ihrem Browser anzuzeigen:

      Sie sind nun bereit, mit dem Erstellen Ihrer Website zu beginnen. Es gilt jedoch als bewährte Methode zu überprüfen, ob Ihre Berechtigungen für das Verzeichnis /sites/web/default korrekt sind. Solange Sie lokal arbeiten, ist das kein großes Problem; wenn Sie diese Berechtigungen jedoch an einen Produktionsserver übertragen, stellen sie ein Sicherheitsrisiko dar.

      Schritt 4 — Überprüfen Ihrer Berechtigungen

      Während der Installation mit dem Assistenten oder dem ersten Laden Ihrer Willkommensseite sehen Sie ggf. eine Warnung zu den Berechtigungseinstellungen in Ihrem Verzeichnis /sites/web/default und eine Datei in diesem Verzeichnis: settings.php.

      Nach Ausführung des Installationsskripts wird Drupal versuchen, die Berechtigungen für das Verzeichnis web/sites/default festzulegen, um für alle Gruppen zu lesen und auszuführen: Dies ist eine 555-Berechtigungseinstellung. Außerdem wird es versuchen, Berechtigungen für default/settings.php auf schreibgeschützt oder 444 festzulegen. Wenn Sie auf diese Warnung stoßen, führen Sie im root-Verzeichnis Ihres Projekts diese zwei chmod-Befehle aus. Wenn Sie das nicht tun, besteht ein Sicherheitsrisiko:

      • chmod 555 web/sites/default
      • chmod 444 web/sites/default/settings.php

      Um zu überprüfen, ob Sie die richtigen Berechtigungen haben, führen Sie diesen ls-Befehl mit den Switches a, l, h und d aus:

      • ls -alhd web/sites/default web/sites/default/settings.php

      Überprüfen Sie, ob Ihre Berechtigungen mit der folgenden Ausgabe übereinstimmen:

      Output

      dr-xr-xr-x 8 sammy staff 256 Jul 21 12:56 web/sites/default -r--r--r-- 1 sammy staff 249 Jul 21 12:12 web/sites/default/settings.php

      Sie sind nun bereit, auf Ihrem lokalen Rechner eine Drupal 9-Website zu erstellen.

      Schritt 5 — Erstellen des ersten Beitrags in Drupal

      Um einige Funktionen von Drupal zu testen, erstellen Sie nun mit der Web-Benutzeroberfläche einen Beitrag.

      Klicken Sie auf der ersten Seite Ihrer Website auf die Schaltfläche Inhalt am linken Rand des oberen Menüs. Klicken Sie nun auf die Schaltfläche Inhalt hinzufügen. Eine neue Seite wird angezeigt. Klicken Sie auf Artikel, und eine weitere Seite wird angezeigt.

      Drupal 9-Eingabeaufforderung zum Erstellen eines Artikels

      Fügen Sie einen beliebigen Titel und Content hinzu. Sie können auch ein Bild wie eines der Hintergrundbilder von DigitalOcean hinzufügen. Klicken Sie dann auf die blaue Schaltfläche Speichern.

      Ihr erster Beitrag wird auf der Website angezeigt.

      Drupal 9 – Beitrag erstellt

      Sie entwickeln nun eine Drupal 9-Website auf Ihrem lokalen Rechner, ohne jemals mit einem Server zu interagieren (dank Docker und DDEV). Im folgenden Schritt verwalten Sie den DDEV-Container, der Ihren Workflow aufnehmen wird.

      Schritt 6 — Verwalten des DDEV-Containers

      Wenn Sie Ihr Projekt abgeschlossen haben oder eine Pause machen möchten, können Sie Ihren DDEV-Container anhalten, ohne sich Gedanken über Datenverluste machen zu müssen. DDEV kann zwischen vielen Projekten schnelle Kontextwechsel verwalten; dies ist eine der nützlichsten Funktionen. Ihr Code und Ihre Daten werden stets in Ihrem Projektverzeichnis gespeichert, auch wenn Sie den DDEV-Container angehalten oder gelöscht haben.

      Um Ressourcen freizugeben, können Sie DDEV jederzeit anhalten. Führen Sie im root-Verzeichnis Ihres Projekts folgenden Befehl aus:

      DDEV ist global verfügbar, sodass Sie ddev-Befehle von überall her ausführen können, solange Sie das DDEV-Projekt angeben:

      Außerdem können Sie mit ddev list alle Ihre Projekte auf einmal anzeigen:

      DDEV umfasst viele andere nützliche Befehle.

      Sie können DDEV neu starten und jederzeit lokal weiterentwickeln.

      Zusammenfassung

      In diesem Tutorial haben Sie Docker und die Vorteile von Containerisierung verwendet, um mit Hilfe von DDEV lokal eine Drupal-Site zu erstellen. DDEV lässt sich in zahlreiche IDEs einbinden und bietet natives PHP-Debugging für Atom, PHPStorm und Visual Studio Code (vscode). Nun können Sie mehr über das Erstellen von Entwicklungsumgebungen für Drupal mit DDEV oder das Entwickeln anderer PHP-Frameworks wie WordPress erfahren.



      Source link