Document Properties
Kbid
30C736
Last Modified
22-Apr-2021
Added to KB
22-Feb-2023
Public Access
Everyone
Status
Online
Doc Type
Guidelines
Product
Intershop Progressive Web App
Guide - Intershop Progressive Web App - 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 re-hydrates 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.
The Intershop Knowledge Portal uses only technically necessary cookies. We do not track visitors or have visitors tracked by 3rd parties. Please find further information on privacy in the Intershop Privacy Policy and Legal Notice.
Home
Knowledge Base
Product Releases
Log on to continue
This Knowledge Base document is reserved for registered customers.
Log on with your Intershop Entra ID to continue.
Write an email to supportadmin@intershop.de if you experience login issues,
or if you want to register as customer.