hubble Documentation

# Konfiguration

Um das Projekt erfolgreich zu starten, gibt es eine Pflichtkonfiguration vorzunehmen: Damit eine Verbindung des Shop-Backends mit dem hubble Frontend möglich ist, gilt es einige Zugangswerte in der ~/.env zu definieren. Diese werden im Folgenden als Umgebungsvariablen bezeichnet. Generell lassen sich API Keys im Admin-Bereich des jeweiligen Services ablesen. Aus Sicherheitsgründen ist es empfehlenswert, die im Folgenden beschriebenen Richtlinien bei der Konfiguration zu beachten.

# Konfiguration von Umgebungsvariablen

Damit die Umgebungsvariablen aus der ~/.env nun also im Applikationskontext zur Verfügung stehen, benutzt hubble das @nuxtjs/dotenv (opens new window) Modul. Dieses ermöglicht den Zugriff auf die Variablen in der ~/.env Datei über die Referenzierung von process.env.

Da die ~/.env sensitive Informationen enthält, sollten diese nicht Teil des Bundles sein, welches an den Client im Applikationsrahmen übermittelt wird. Damit Secret Keys und Datenbankschlüssel nicht im Client Kontext verfügbar sind, müssen explizit die Werte, die über process.env verfügbar sein sollen auf eine Whitelist gesetzt werden: Die Werte, die an den Client gesendet werden können, müssen in der ~/nuxt.config.js unter dem Feld only der Toplevel Optionen des dotenv Moduls eingetragen werden. Dabei sollte beachtet werden, dass es bereits defaultmäßig clientseitig zugelassene Umgebungsvariablen gibt, die durch das hubble Modul eingetragen werden (im hubble Modul unter utils/config.js). Diese werden gemerged mit den Einträgen unter dotenv in der ~/nuxt.config.js, welches ebenfalls analog für die Einträge unter den Toplevel Optionen für env gilt.

  • Schritt 1: Hinzufügen von Keys zur ~/.env
// .env
API_TYPE = 'api' // can be 'sw' or 'api'
API_CLIENT_ID = <API_CLIENT_ID>
STORE_ID = <STORE_ID>
// ...
1
2
3
4
5
  • Schritt 2: Whitelisting der Client-seitig erlaubten Werte in der ~/nuxt.config.js, insofern nicht bereits durch das hubble Modul konfiguriert
// nuxt.config.js
dotenv: {
    only: [
        'API_CLIENT_ID',
        'STORE_ID',
        // ...
    ]
}
1
2
3
4
5
6
7
8
  • Schritt 3: Zugriff auf die Client-seitig verfügbaren Werte per Referenz auf process.env
// store/modApi.js
{ storeId: process.env.STORE_ID }
1
2

WARNING

Es ist wichtig, dass nur Werte in die Whitelist innerhalb der ~/nuxt.config.js eingetragen werden, die keine sensitiven Daten enthalten und damit sicher sind zur Versendung an den Client.

# Konfiguration vom hubble Core Modul

# Überschreiben von Werten in der nuxt.config.js

Folgende Properties der nuxt.config.js werden von hubble mit Standardwerten versehen:

  • env
  • serverMiddleware
  • css
  • router
  • build

diese Werte können einfach in der nuxt.config.js überschrieben werden. Allerdings werden dabei die von hubble gesetzten Standardwerte komplett überschrieben und müssen ggf. mit übertragen werden. Die Standardkonfiguration befindet sich unter: hubble/core/utils/config.js.

Neue Servermiddleware via nuxt.config.js hinzufügen:

  1. Unter hubble/core/utils/config.js die Standardwerte für serverMiddleware ausfindig machen:


 
 



export const defaultServerMiddleware = function (srcDir) {
    const middlewares = [
        'api/hubble-logger',
        'api/server-side-api-auth-call'
    ];
...
1
2
3
4
5
6
  1. Standardwerte in nuxt.config.js übertragen und mit eigenen Werten ergänzen:



 


serverMiddleware: [
    '~/api/hubble-logger',
    '~/api/server-side-api-auth-call'
    '~/api/my-custom-middleware.js'
],
1
2
3
4
5

# Überschreiben von Modulkonfigurationen

Das hubble Modul bringt eine Reihe von NuxtJs Modulen mit sich und setzt entsprechende Konfigurationen. Konfigurationen dieser Module lassen sich wie gewohnt über die nuxt.config.js definieren. Dabei werden jedoch die von hubble gesetzten Standard-Konfigurationen für dieses Modul überschrieben. Eine Übersicht über die Standardkonfiguration befindet sich unter: hubble/core/utils/config.js

  1. Unter hubble/core/utils/config.js die Standardwerte eines Moduls ausfindig machen:




 
 
 
 
 
 
 
 



export const defaultModules = [
    ...
    {
        name: 'nuxt-mq',
        options: {
            breakpoints: {
                sm: 768,
                md: 1024,
                lg: Infinity,
            },
            defaultBreakpoint: 'md', // Default breakpoint for SSR
        }
    },
...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
  1. Standardwerte in nuxt.config.js übertragen und mit eigenen Werten ergänzen:








 
 





modules: [
    ...
    [
        'nuxt-mq',
        {
            breakpoints: {
                sm: 768,
                md: 1025,
                lg: 1440,
                xlg: Infinity
            },
            defaultBreakpoint: 'md' // Default breakpoint for SSR
        }
    ],
1
2
3
4
5
6
7
8
9
10
11
12
13
14

← Routing / URL Handling →