Related Github Documents
Document Properties
Kbid294H39
Last Modified22-Apr-2020
Added to KB18-Jun-2020
Public AccessEveryone
StatusOnline
Doc TypeGuidelines, Concepts & Cookbooks
ProductIntershop Progressive Web App

Guide - Intershop Progressive Web App - Propagating Environment Variables

Propagating Environment Variables

This guide describes how to propagate additional configuration from the outside into the PWA client application to be used on the storefront.

Configuration parameters can be provided from different sources.

Angular CLI Environment Files

If properties just have to be provided as compile time settings in the Angular CLI environment files like src/environments/environment.ts, you can theoretically access them in any source file directly.
However we recommend creating InjectionTokens and providing them in modules like the ConfigurationModule.

This option provides the easiest approach.
Different configurations can be provided while building the sources with Angular CLI.

URL Parameters

Specific properties can also be supplied by URL parameters (i.e. shop.de/home;foo=bar).
The multi-channel configuration handling basically uses this method of configuration to dynamically provision a PWA server-side rendering run for a specific channel.

Currently all of those properties are transferred into src/app/core/store/configuration.
If you want to add another property, add it to the ConfigurationState and add the extraction handling in ConfigurationEffects.

Runtime Environment Properties

It gets more complicated, when properties from environment variables have to be transferred to the Angular client application.
Environment parameters from the browser cannot be accessed as the browsers basically sandbox all websites for security reasons.
What can be accessed are environment parameters of the environment the server-side rendering process is running in.
This can be the Docker environment (arguments passed by an orchestrator like Kubernetes or Docker Swarm) or the local environment for debug purposes.
See also Guide - Building and Running Server-Side Rendering

In general the extraction is as follows:

  1. The environment variable is accessed by the SSR process running with node.js (via process.env).
  2. An effect running in Angular Universal extracts these properties and puts them into the state management.
  3. Upon completing the initial page response, the NgRx state is dehydrated and appended to the HTML document.
  4. The browser boots up angular and rehydrates the state, effectively completing the transfer of the property.

For extracting the environment property, you can use the methods of the StatePropertiesService.

Further References

Disclaimer

The information provided in the Knowledge Base may not be applicable to all systems and situations. Intershop Communications will not be liable to any party for any direct or indirect damages resulting from the use of the Customer Support section of the Intershop Corporate Web site, including, without limitation, any lost profits, business interruption, loss of programs or other data on your information handling system.

Customer Support
Knowledge Base
Product Resources
Tickets