Introduction

This video tutorial shows how to build and run Intershop PWA SSR (Server Side Rendering) images and NGINX Docker images.

References

Video Tutorial

Guidance

Tasks

This video tutorial shows the relevant steps to build and run PWA SSR images and NGINX Docker images. This includes the following tasks:

Making necessary preparations
Cloning the PWA project from GitHub
Making adjustments to the PWA Git project
Building and running the PWA SSR Docker images manually
Building and running the PWA NGINX Docker images manually
Building and running the PWA SSR and NGINX Docker images with the docker-compose command

Walkthrough

For this tutorial we will use Visual Studio Code, but the implementations could, for example, also be done through a command line alone.

Make Necessary Preparations

Install Docker in the LTS version.
Check the requirements for the Intershop PWA.
Have an ICM server running.

Clone the PWA Project from GitHub

Open Visual Studio Code.
Open a command line by clicking: Terminal | New Terminal.
Clone the Intershop PWA from GitHub by running the following command: git clone https://github.com/intershop/intershop-pwa.git
Open the Project by clicking: File | Open Folder...

Make Adjustments to the PWA Project

Open the environment.ts file under src | environments | environment.ts.
Adjust the icmBaseURL to the running ICM 7.10 server.

The demo server for the PWA version 7.10 can be used for testing purposes: "https://jxdemoserver6.intershop.de"

Since PWA version 1.0 the icmBaseURL needs to be defined in src/environments/environment.model.ts.

Build and Run the PWA SSR Docker Images Manually

Open a command line by clicking: Terminal | New Terminal.
Build the PWA Docker image by running the following command: docker build --no-cache -t pwa_image .
Run the PWA Docker image with the following command: docker run -d -p 4200:4200/tcp -e SSL=1 -e TRUST_ICM=true --restart always --name pwa_container pwa_image
The multi PWA proxy listening with https is not working with PWA version 1.0 due to the issue HTTPS on SSR container is not working anymore #851. To avoid this issue with PWA 1.0, run the PWA Docker image without the environment variable SSL=1.
Open a web browser and enter the following URL: https://localhost:4200.

Build and Run the PWA NGINX Docker Images Manually

If you want a multi-channel approach to be enabled, open the multi-channel.yaml file under nginx | multi-channel.yaml and adjust it according to your own environment.
multi-channel.yaml configuration used in the video
```
.+:
  - baseHref: /b2c
    lang: en_US
    channel: inSPIRED-inTRONICS-Site
  - baseHref: /b2b
    lang: en_US
    channel: inSPIRED-inTRONICS_Business-Site
    features: quoting,businessCustomerRegistration,advancedVariationHandling,quickorder,orderTemplates,punchout
    theme: "blue|688dc3"
```
Since PWA version 1.0 the multi-channel setup has changed. For further information, please take a look at Guide - Intershop Progressive Web App - Multiple Themes.
Copy the server.crt and the server.key file under the dist folder and paste them into the nginx folder.
Open the Dockerfile under nginx | Dockerfile and add the copy instructions for both files:
copy instructions used in the video
```
COPY server.crt /etc/nginx/
COPY server.key /etc/nginx/
```
Build the NGINX Docker image by running the following command: docker build --no-cache -t nginx_image nginx .
List all Docker containers by running the following command: docker ps -a -s
Copy the CONTAINER ID of the PWA container and run: docker inspect <CONTAINER ID>
Copy the IP address under IPAddress.
Run the NGINX Docker image by running the following command: docker run -d --name "nginx_container" --restart always -e SSL=1 -e TRUST_ICM=true -p 443:443 -e UPSTREAM_PWA=https://<IPAddress>:4200 nginx_image
Open a web browser and enter the following URL: https://localhost.

Build and Run the PWA SSR and NGINX Docker Images with the Docker-Compose Command

Stop the PWA Docker container by running the following command: docker stop pwa_container
Stop the NGINX Docker container by running the following command: docker stop nginx_container
Open the docker-compose.yaml file in the root directory of the PWA project.

Adjust the content of the file according to your needs.

docker-compose.yml file used in the video (without comments)

version: '3'
services:
  pwa:
    build:
      context: .
      args:
        configuration: production
        serviceWorker: 'false'
    restart: always 
    environment:
      - LOGGING=on
      - ICM_BASE_URL
      - TRUST_ICM=true
      - SSL=1
  nginx:
    build: nginx
    depends_on:
      - pwa
    restart: always 
    environment:
      UPSTREAM_PWA: 'https://pwa:4200'
      CACHE: 1
      PAGESPEED: 1
      PROMETHEUS: 0
      COMPRESSION: 1
      DEVICE_DETECTION: 1
      MULTI_CHANNEL: |
        .+:
          - baseHref: /b2c
            lang: en_US
            channel: inSPIRED-inTRONICS-Site
          - baseHref: /b2b
            lang: en_US
            channel: inSPIRED-inTRONICS_Business-Site
            features: quoting,businessCustomerRegistration,advancedVariationHandling,quickorder,orderTemplates,punchout
            theme: "blue|688dc3"

    ports:
      - '443:443'

Since PWA version 1.0 the multi-channel setup has changed. For further information, please take a look at Guide - Intershop Progressive Web App - Multiple Themes.

Run the command: docker-compose up -d --build
Open a web browser and enter the following URL: https://localhost.
You can switch to the B2B application by entering the following URL: https://localhost/b2b/home.

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.

Table of Contents