# 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>
// ...
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',
// ...
]
}
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 }
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:
- 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'
];
...
2
3
4
5
6
- 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'
],
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
- 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
}
},
...
2
3
4
5
6
7
8
9
10
11
12
13
14
- 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
}
],
2
3
4
5
6
7
8
9
10
11
12
13
14