Video Tutorial - Building and Running PWA SSR and NGINX Docker Images

1 Introduction

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

1.1 References

2 Video Tutorial

3 Guidance

3.1 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

3.2 Walkthrough

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

3.2.1 Make Necessary Preparations

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

3.2.2 Clone the PWA Project from GitHub

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

3.2.3 Make Adjustments to the PWA Project

  1. Open the environment.ts file under src | environments | environment.ts.
  2. 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 is located in the environment.model.ts under src/environments/environment.model.ts.

3.2.4 Build and Run the PWA SSR Docker Images Manually

  1. Open a command line by clicking: Terminal | New Terminal.
  2. Build the PWA Docker image by running the following command: docker build --no-cache -t pwa_image
  3. 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.

  4. Open a web browser and enter the following URL: https://localhost:4200.

3.2.5 Build and Run the PWA NGINX Docker Images Manually

  1. 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.

  2. Copy the server.crt and the server.key file under the dist folder and paste them into the nginx folder.
  3. 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/
  4. Build the NGINX Docker image by running the following command: docker build --no-cache -t nginx_image nginx

  5. List all Docker containers by running the following command: docker ps

  6. Copy the CONTAINER ID of the PWA container and run: docker inspect <CONTAINER ID>
  7. Copy the IP address under IPAddress.
  8. 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
  9. Open a web browser and enter the following URL: https://localhost.

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

  1. Stop the PWA Docker container by running the following command: docker stop pwa_container
  2. Stop the NGINX Docker container by running the following command: docker stop nginx_container
  3. Open the docker-compose.yaml file in the root directory of the PWA project.
  4. 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'
        environment:
          - LOGGING=on
          - ICM_BASE_URL
          - TRUST_ICM=true
          - SSL=1
      nginx:
        build: nginx
        depends_on:
          - pwa
        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.

  5. Run the command: docker-compose up -d  --build

  6. Open a web browser and enter the following URL: https://localhost.
  7. 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.

Customer Support
Knowledge Base
Product Resources
Tickets