Introduction

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

References

• Guide - Intershop Progressive Web App - Multiple Themes
• Guide - Intershop Progressive Web App - Building and Running NGINX Docker Image
• Guide - Intershop Progressive Web App - Building and Running Server-Side Rendering

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

Make Necessary Preparations

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

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

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.

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.

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 -a -s

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.
   

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

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.