Laravel: Installation (Version 8; inkl. Erweiterungen)

Marco Linke
LaravelPHPWeb

Laravel: Übersicht

Voraussetzung

  1. MAMP oder XAMPP muss auf dem Rechner installiert sein
  2. Composer installieren. Siehe hierzu: Installation & Update: Composer
  3. Node.js installieren: Download Node.js
  4. Mailtrap.io nutzen / vorbereiten (Free-Account anlegen; für Test Mail-Versand und Prüfung Funktion).
  5. Wenn gewünscht, GIT installieren.
  6. Grafische Benutzeroberfläche für GIT -> SourceTree-App + Konto bei Bitbucket (Voraussetzung zur Nutzung von SourceTree

Komplett-Installation Laravel mit den relevanten Funktionen

  1. Laravel installieren
  2. Laravel UI installieren
  3. Bootstrap, VUE und Login-System installieren
  4. Font Awesome installieren
  5. Eigene CSS- und JS-Dateien einbinden
    1. Während der Entwicklung
    2. Für die Produktion / Veröffentlichung
  6. Datenbank verbinden
  7. Mailtrap.io für Mail-Tests integrieren
  8. Eigene Fehlerseiten

1. Laravel installieren

  1. Öffnen Sie das Terminal.
  2. Navigieren Sie in das gewünschte Verzeichnis.
    Wenn z.B. Composer unter XAMPP in den Ordner test installiert werden soll, navigieren Sie wie folgt:

    cd /Applications/XAMPP/xamppfiles/htdocs/test

    Für MAMP:

    cd /Applications/MAMP/htdocs/test
  3. Mit folgenden Befehl installieren Sie nun Laravel:

    php composer.phar create-project --prefer-dist laravel/laravel

Hinweis

Der Befehl zur Installation setzt sich aus folgenden Bestandteilen zusammen:

php composer.phar create-project --prefer-dist laravel/laravel Test 7.28.0

php composer phar = startet Composer
create project = neues Projekt anlegen
--prefer-dist = Installation ohne GIT
laravel/laravel = Hersteller/Paket
Test = Name des Projektes / Ordner, indem Laravel installiert werden soll
7.28.0 = zu installierende Laravel-Version. Ohne Parameter, immer die Neuste.

Weiteres hier: https://www.5balloons.info/how-to-install-laravel-5-5-with-xampp/

Beispiel:

/Applications/MAMP/bin/php/php7.4.21/bin/php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');“
/Applications/MAMP/bin/php/php7.4.21/bin/php composer-setup.php
/Applications/MAMP/bin/php/php7.4.21/bin/php -r "unlink('composer-setup.php');“
/Applications/MAMP/bin/php/php7.4.21/bin/php composer.phar create-project --prefer-dist laravel/laravel test
cd test
/Applications/MAMP/bin/php/php7.4.21/bin/php artisan serve

2. Laravel UI installieren

Hinweis:
Nur installieren, wird aber anschließend so nicht verwendet, wenn Bootstrap genutzt werden soll!

/Applications/MAMP/bin/php/php7.4.21/bin/php composer.phar require laravel/ui

Wird installiert nach Vendor/Laravel/ui

Ergänzend könnte noch die Version angehängt werden:

/Applications/MAMP/bin/php/php7.4.21/bin/php composer.phar require laravel/ui 2.4.0

3. Bootstrap, VUE und Login-System installieren

Bootstrap, VUE.js und Login-System installieren mit folgenden Befehl:

/Applications/MAMP/bin/php/php7.4.21/bin/php artisan ui vue --auth

Im Frontend sind nun Login und Register rechts oben verfügbar, aber noch ohne Styles.

Anschließend folgenden Befehl im Terminal ausführen, um die Node Modules von Node.js herunterzuladen:

npm install

Danach noch folgenden Befehl ausführen, um die Module ins Frontend zu kompilieren:

npm run dev

4. Font Awesome installieren

Den richtigen Terminal-Befehl findet man auf der Website von Font Awesome unter
-> Docs -> Using a Package Manager

Dieser lautet:

npm install --save @fortawesome/fontawesome-free

Font Awesome muss nun auch noch in Webpack integriert werden. Dazu in der Datei
-> resources -> sass -> app.scss
Font Awesome ergänzen

// Fontawesome
@import '~@fortawesome/fontawesome-free/css/all.css';

Danach noch folgenden Befehl ausführen, um das Modul ins Frontend zu kompilieren:

npm run dev

5. Eigene CSS- und JS-Dateien einbinden

Es gibt zwei Möglichkeiten, eigene CSS- und JS-Dateien einzubinden.
Beide haben Vor- und Nachteile bzw. sind für unterschiedliche Anwendungsfälle geeignet.

Während der Entwicklung empfiehlt es sich, die Dateien direkt ins Public-Verzeichnis einzubinden. Dadurch werden Änderungen sofort übernommen (Punkt 5.2).

Wird die Anwendungen/Webseite jedoch produktiv geschaltet, empfiehlt es sich, die Dateien nach Resources zu verschieben und über den Compiler / Webpack packen zu lassen (Punkt 5.1).
Dies bringt eine deutlich bessere Performance als mehrere einzelne Dateien.

5.1 Während der Entwicklung

Wie beschrieben, empfiehlt es sich für die Entwicklung die Dateien direkt in den Public-Ordner zu packen.

Hierfür legen wir nun die zwei Dateien im Public-Ordner unter
-> css
und
-> js
an.

Jetzt müssen diese zwei Dateien aber noch im normalen HTML-Header integriert werden.

Hierfür die Datei
-> resources -> views -> layouts -> app.blade.php
öffnen und die zwei Dateien im Header ergänzen:

<script src="{{ asset('js/custom.js') }}" defer></script>
und
<link href="{{ asset('css/custom.css') }}" rel="stylesheet">

Damit die Änderungen übernommen werden, noch den einmal den Cache erneuern:

/Applications/MAMP/bin/php/php7.4.21/bin/php artisan config:cache

5.2 Für die Produktion / Veröffentlichung

Für die Produktiv-Umgebung / Veröffentlichung empfiehlt es sich, die Dateien in den Resource-Order zu verschieben und die Dateien mit Webpack zusammenlegen zu lassen.

Hierfür die JS-Datei nach
-> resources->js
verschieben

und anschließend in die app.js mit require einbinden, damit die eigene JS-Datei mitgepackt wird:

require('./custom');

Das Gleiche machen wir nun auch noch mit der CSS-Datei.

Hierfür die CSS-Datei nach
-> resources->sass
verschieben

und anschließend in die app.sass einbinden, damit die eigene JS-Datei mitgepackt wird:

//Eigene CSS-Datei
@import './custom.css';

Um die Dateien nun zu veröffentlichen, diese über den Befehl ins Frontend zu kompilieren lassen:

npm run dev

6. Datenbank verbinden

Leere neue Datenbank und zugehörigen Benutzer über PHPMyAdmin anlegen.

Danach diese in der .env-Datei die Werte bei den entsprechenden Zeilen hinterlegen.

Damit die Einstellungen aus der .env-Datei ziehen, einmal den Cache erneuern über den Terminal-Befehl:

/Applications/MAMP/bin/php/php7.4.21/bin/php artisan config:cache

Anschließend die Standard-Tabellen über die Migration in die Datenbank schreiben lassen:

/Applications/MAMP/bin/php/php7.4.21/bin/php artisan migrate

7. Mailtrap.io für Mail-Tests integrieren

Mailtrap bietet sich an, wenn man die Mail-Funktionen sowie gesendeten Mails testen möchte, diese aber nicht direkt an den Empfänger schicken möchte.

Mailtrap sendet und empfängt Mails – das bedeutet der Ausgang der Mail wird gleichzeitig zum Eingang – und wird nicht weiter zum echten Empfänger geschickt.

Um Mailtrap nutzen zu können, genügt ein kostenloser Account beim Anbieter.

Ist man angemeldet, finden wir auch dort unter den SMTP-Settings alle Angaben die relevant sind, um Mailtrap mit Laravel zu verbinden. Unter Integrations findet sich ein eigener Eintrag für Laravel:

Diese tragen wir einfach bei uns in die .env-Datei ein und speichern diese ab.

Damit die Einstellungen aus der .env-Datei ziehen, einmal noch den Cache erneuern:

/Applications/MAMP/bin/php/php7.4.21/bin/php artisan config:cache

8. Eigene Fehlerseiten

Um eigene Fehlerseiten zu nutzen, einfach die Standard-Seiten über das Terminal ins Projekt kompilieren.

Danach können diese nach Wunsch angepasst werden.

Diese sind anschließend unter resources -> views -> errors verfügbar.

/Applications/MAMP/bin/php/php7.4.21/bin/php artisan vendor:publish --tag=laravel-errors

Merkwürde Fehler? Autoload Dateien neu erzeugen

Sollte mal ein merkwürdiger Fehler auftauchen, dass Module oder Dateien nicht gefunden wurden, ihr euch aber sicher seit, dass diese vorhanden sind, so kann versucht werden, die Autoload Dateien neu zu erzeugen. Dies geht über folgenden Terminal-Befehl:

/Applications/MAMP/bin/php/php7.4.21/bin/php composer.phar dump-autoload -o  

Ähnliche Beiträge