b4um Generator – Grundeinrichtung und erste Root-Seite

Im ersten Teil unserer Tutorial-Serie haben wir den b4um Generator als Gem in unsere Rails-Anwendung aufgenommen.

Jetzt richten wir ihn innerhalb der Anwendung ein.

Dazu besitzt b4um_generators einen eigenen Installationsgenerator. Dieser legt die grundlegenden Dateien und Komponenten an, die wir für die weiteren Generatoren benötigen.

Anschließend erstellen wir unsere erste statische Seite und richten sie direkt als Root-Seite der Anwendung ein.

Für dieses Tutorial verwenden wir:

b4um_generators 0.1.0

1. In die Rails-Anwendung wechseln

Öffne zunächst das Terminal und wechsle in das Hauptverzeichnis deiner Rails-Anwendung:

cd meine_app

Aus dem ersten Tutorial sollte sich bereits folgender Eintrag in unserer Gemfile befinden:

gem "b4um_generators"

und Bundler sollte ausgeführt worden sein:

bundle install

Jetzt können wir mit der eigentlichen Einrichtung beginnen.

2. Den b4um Installer starten

Der b4um Generator besitzt einen eigenen Installationsgenerator.

Wir starten ihn mit:

bin/rails generate b4um:install

Dieser Schritt sollte durchgeführt werden, bevor wir mit den einzelnen Generatoren und unseren Seiten beginnen.

Der Installer richtet zunächst die grundlegenden Bestandteile von b4um in unserer Rails-Anwendung ein.

Dazu gehören unter anderem:

die b4um Styles und Komponenten
die Navigation
benötigte Stimulus-Controller
Helper für die Views und Navigation
die b4um Konfiguration
die Integration in das Application Layout

Zusätzlich bietet der Installer verschiedene optionale Funktionen an.

3. Optionale Funktionen auswählen

Während der Installation fragt der b4um Generator verschiedene zusätzliche Funktionen ab.

Wir müssen nicht alle davon installieren. Welche Funktionen benötigt werden, hängt von unserer Anwendung ab.

Die Abfragen erfolgen nacheinander.

bcrypt

Zunächst kann bcrypt für Passwortfunktionen eingerichtet werden.

Die Abfrage lautet:

Install bcrypt for password support? (y/n)

Benötigen wir Passwortunterstützung, antworten wir:

Benötigen wir sie für unsere Anwendung nicht, verwenden wir:

Ist bcrypt bereits in der Gemfile vorhanden, erkennt der Installer dies entsprechend.

Active Storage

Als Nächstes können wir Active Storage für Dateiuploads und Bildanhänge einrichten.

Die Abfrage lautet:

Install Active Storage for image attachments? (y/n)

Möchten wir später beispielsweise Bilder an Datensätze anhängen, können wir hier

wählen.

Für unsere einfache statische Startseite benötigen wir Active Storage zunächst nicht zwingend.

Hero

Der Installer bietet außerdem die Möglichkeit, einen Hero-Bereich einzurichten.

Ein Hero ist ein hervorgehobener Bereich einer Seite, der sich beispielsweise für eine große Überschrift, einen kurzen Einführungstext oder einen Call-to-Action eignet.

Wählen wir diese Option aus, installiert b4um die dafür vorgesehenen Bestandteile.

Für eine sehr einfache Anwendung können wir diese Funktion zunächst überspringen. Sie lässt sich später gezielt einsetzen.

Footer

Als weitere Option kann ein Footer eingerichtet werden.

Der Footer bildet den unteren Bereich unserer Seiten und eignet sich beispielsweise für zusätzliche Navigation, rechtliche Seiten oder weitere Informationen.

Wenn wir den Footer direkt verwenden möchten, bestätigen wir die entsprechende Abfrage.

Wir werden uns in einem späteren Tutorial noch ausführlicher mit dem Footer beschäftigen.

Cookie Consent

Zum Schluss kann der Installer eine Cookie-Consent-Komponente einrichten.

Bestätigen wir diese Option, werden die dafür benötigte View und der zugehörige Stimulus-Controller installiert und die Komponente in das Layout eingebunden.

Ob diese Funktion für eine konkrete Anwendung benötigt wird, hängt davon ab, welche Cookies oder entsprechenden Dienste dort tatsächlich eingesetzt werden.

4. Die Installation überprüfen

Nach Abschluss des Installers können wir uns zunächst ansehen, welche Dateien neu angelegt oder verändert wurden:

git status

Hier sollten nun verschiedene von b4um hinzugefügte beziehungsweise angepasste Dateien erscheinen.

Dazu gehören – abhängig von den gewählten Optionen – unter anderem Dateien aus den Bereichen:

app/assets/stylesheets/
app/views/
app/javascript/controllers/
app/helpers/
config/

Auch das Application Layout wird bei der Grundeinrichtung angepasst.

5. Bevor wir weitere Seiten erstellen: eine Root-Seite

Nachdem die b4um-Grundausstattung installiert ist, kümmern wir uns als Erstes um die Startseite.

Dieser Schritt ist bei b4um_generators 0.1.0 besonders wichtig.

Hinweis für Version 0.1.0: Wir sollten zunächst eine funktionierende Root-Seite einrichten, bevor wir mit weiteren statischen Seiten arbeiten. Fehlt die passende Root-Seite beziehungsweise verweist die Navigation noch auf den bisherigen Root-Pfad, kann die Anwendung auf einer Fehlerseite landen.

Deshalb erstellen wir jetzt nicht zuerst „Über uns“, „Kontakt“ oder „Impressum“.

Unsere erste statische Seite wird die Startseite.

6. Die Startseite erstellen

Wir verwenden einen PagesController und nennen unsere Startseite home.

Dazu führen wir aus:

bin/rails generate b4um:controller Pages home

Dabei steht

Pages

für unseren Controller und

home

für die Action beziehungsweise unsere neue statische Seite.

Nach der Grundeinrichtung erstellen wir mit dem b4um Controller-Generator unsere erste statische Seite.

7. Unsere neue View

Die View unserer Startseite befindet sich anschließend unter:

app/views/pages/home.html.erb

Hier können wir den Inhalt unserer Startseite eintragen.

Für einen ersten Test genügt:

<% content_for :title, "Home" %>

<div class="page-header">
  <h1>Willkommen</h1>
</div>

<div class="b4um-grid">
  <section class="b4um-card b4um-card--full">
    <h2 class="b4um-card__title">
      Willkommen
    </h2>

    <p class="b4um-card__text">
      Willkommen auf unserer neuen Rails-Anwendung.
    </p>

    <p class="b4um-card__text">
      Diese Startseite wurde mit dem b4um Generator erstellt.
    </p>
  </section>
</div>

Speichere anschließend die Datei.

8. Die Seite als Root-Seite einrichten

Jetzt öffnen wir:

config/routes.rb

Unsere home-Seite soll angezeigt werden, wenn lediglich die Hauptadresse der Anwendung aufgerufen wird.

Dafür legen wir sie als Root-Route fest:

root "pages#home"

Ein entsprechender Ausschnitt kann beispielsweise so aussehen:

Rails.application.routes.draw do
  root "pages#home"

  # weitere Routen ...
end

Damit verweist

auf:

PagesController#home

Mit root "pages#home" legen wir unsere neue home-Seite als Startseite der Rails-Anwendung fest.

9. Die Root-Route überprüfen

Im Terminal können wir kontrollieren, ob Rails die neue Route erkannt hat:

bin/rails routes | grep root

Die Root-Route sollte jetzt auf

pages#home

verweisen.

Die Rails-Routen bestätigen, dass unsere Root-Route jetzt auf pages#home verweist.

10. Wichtig: Navigation auf die neue Root-Seite umstellen

Mit der Änderung in routes.rb sind wir bei b4um_generators 0.1.0 noch nicht vollständig fertig.

Der b4um Installer hat bereits eine Navigation eingerichtet. Auch dort müssen wir den Eintrag für die Startseite auf unsere neue Root-Seite abstimmen.

Für unsere home-Seite verwenden wir in der b4um Navigation:

<%= navigation_link_to "Home", root_path, controller: :pages, action: :home %>

Dieser Eintrag enthält mehrere wichtige Informationen.

Mit

"Home"

legen wir den sichtbaren Namen des Menüpunktes fest.

Mit

root_path

verweisen wir auf die zuvor eingerichtete Root-Route.

Und mit

controller: :pages, action: :home

teilen wir dem b4um Navigation-Helper mit, zu welchem Controller und zu welcher Action dieser Navigationseintrag gehört.

Der vollständige Eintrag lautet deshalb:

<%= navigation_link_to "Home", root_path, controller: :pages, action: :home %>

Diese Angaben ermöglichen es der b4um Navigation außerdem, zu erkennen, wann sich der Besucher auf dieser Seite befindet und der entsprechende Menüpunkt aktiv dargestellt werden soll.

Der Home-Eintrag der b4um Navigation verwendet root_path und erhält zusätzlich den zugehörigen Controller und die Action.

11. Anwendung starten

Jetzt haben wir:

den b4um Installer ausgeführt,
die gewünschte Grundausstattung gewählt,
unsere erste statische Seite erstellt,
die Root-Route eingerichtet und
den Home-Link der Navigation angepasst.

Jetzt starten wir unsere Anwendung:

bin/rails server

Anschließend öffnen wir:

http://localhost:3000

Unsere home-Seite sollte jetzt direkt erscheinen.

12. Navigation testen

Jetzt testen wir zusätzlich den Menüpunkt Home.

Ein Klick auf Home muss ebenfalls wieder zu unserer Startseite führen.

Damit greifen alle Bestandteile korrekt ineinander:

http://localhost:3000
        ↓
        /
        ↓
root "pages#home"
        ↓
PagesController#home
        ↓
home.html.erb

und innerhalb der Navigation:

Home
 ↓
navigation_link_to
 ↓
root_path
 ↓
pages#home

Die b4um Grundeinrichtung ist abgeschlossen. Unsere erste statische Seite ist als Root-Seite eingerichtet und über den Home-Eintrag der Navigation erreichbar.

Was haben wir in diesem Tutorial gemacht?

Nach der Installation des Gems aus Teil 1 haben wir zunächst den eigentlichen b4um Installer gestartet:

bin/rails generate b4um:install

Dabei wurde die Grundausstattung des b4um Generators in unsere Rails-Anwendung integriert und wir konnten zusätzliche Funktionen auswählen.

Erst anschließend haben wir mit

bin/rails generate b4um:controller Pages home

unsere erste statische Seite erstellt.

Diese haben wir mit

root "pages#home"

als Root-Seite der Anwendung eingerichtet.

Zum Schluss haben wir den entsprechenden Eintrag der b4um Navigation angepasst:

<%= navigation_link_to "Home", root_path, controller: :pages, action: :home %>

Damit besitzen wir jetzt eine funktionierende Ausgangsbasis für die nächsten Schritte.

Im nächsten Tutorial können wir weitere statische Seiten wie „Über uns“, „Kontakt“ oder „Impressum“ erstellen und in unsere bestehende Navigation aufnehmen.

Meld dich an und schreibe ein Kommentar