replace hard coded host name and .env file path with variables

Dockerfile

@@ -27,11 +27,14 @@ RUN yarn install
 # copy over the rest of the package files
 COPY packages ./packages
 
-# copy .env.docker file to .env
-COPY ./docker/.env.docker ./packages/venia-concept/.env
+# set in docker-compose
+ARG ENVFILEPATH
+# copy configuration env file from host file system to venia-concept .env for build
+COPY ${ENVFILEPATH} ./packages/venia-concept/.env
 
 # build the app
 RUN yarn run build 
+
 #######################################################################################
 # UNCOMMENT FOR PRODUCTION BUILD - not as necessary for dev env to have non-root user #
 #######################################################################################
@@ -47,6 +50,9 @@ RUN yarn run build
 # RUN chown -R appuser:appuser /usr/src/app && \
 #     chmod 755 /usr/src/app
 # USER appuser
+#######################################################################################
 
+# Pass the `WEBPACK_HOST` arg from docker-compose args and set it to the HOST
+ARG WEBPACK_HOST
 # command to run application
-CMD [ "yarn", "workspace", "@magento/venia-concept", "run", "watch:docker"]
+CMD [ "yarn", "workspace", "@magento/venia-concept", "run", "watch", "-- --host ${WEBPACK_HOST}"]

docker-compose.yml

@@ -1,5 +1,9 @@
 version: '3'
 services:
+  # proxy service that creates a reverse proxy to the pwa container - https://bit.ly/2HpZJDI
+  # the reverse proxy connects the SSL/TLS certs created on the local file system into the nginx container
+  # this allows the pwa container to be accessible over HTTPS
+  # it also proxies requests to the configured domain running at the configured port for the pwa container
   nginx-proxy:
     image: jwilder/nginx-proxy:alpine
     hostname: nginx-proxy
@@ -13,9 +17,16 @@ services:
 
   pwa:
     hostname: ${PWA_STUDIO_PUBLIC_PATH}
+    # build pwa using the Dockerfile from the PWD
     build:
       context: .
       dockerfile: Dockerfile
+      args: 
+        WEBPACK_HOST: ${PWA_STUDIO_PUBLIC_PATH}
+        ENVFILEPATH: ${ENVFILEPATH}
+    # list of directories and files on the host system to volume mount into the container
+    # changes made to files in the container and on the host file system are mapped to one another
+    # this enables hot reloading from the container to detect changes made on the host file system
     volumes:
       - ./packages/peregrine/.storybook:/usr/src/app/packages/peregrine/.storybook:rw
       - ./packages/peregrine/esm:/usr/src/app/packages/peregrine/esm:rw
@@ -30,6 +41,7 @@ services:
     links:
       - nginx-proxy
     environment:
+      # environment variables consumed by the nginx-proxy service
       VIRTUAL_HOST: ${PWA_STUDIO_PUBLIC_PATH}
       VIRTUAL_PORT: ${PWA_STUDIO_PORTS_DEVELOPMENT}
     expose:

docker/.env.docker

@@ -4,12 +4,11 @@
 #
 ###############################################################################
 
-MAGENTO_BACKEND_URL=https://release-dev-rxvv2iq-zddsyhrdimyra.us-4.magentosite.cloud/
-MAGENTO_BUILDPACK_PROVIDE_SECURE_HOST=0
-PWA_STUDIO_PORTS_DEVELOPMENT=8080
-# match PWA_STUDIO_PUBLIC_PATH value with the --host value of the "watch:docker" script in packages/venia-concept/package.json
 PWA_STUDIO_PUBLIC_PATH=pwa-docker.localhost
+PWA_STUDIO_PORTS_DEVELOPMENT=8080
 ENABLE_SERVICE_WORKER_DEBUGGING=0
+MAGENTO_BACKEND_URL=https://release-dev-rxvv2iq-zddsyhrdimyra.us-4.magentosite.cloud/
+MAGENTO_BUILDPACK_PROVIDE_SECURE_HOST=0
 UPWARD_JS_UPWARD_PATH=venia-upward.yml
 UPWARD_JS_BIND_LOCAL=1
 UPWARD_JS_LOG_URL=1

docker/README.md

@@ -14,12 +14,13 @@ This script will:
 
 After `docker/run-docker` is executed from the root of the repository, the default configuration will have the PWA application running at `https://pwa-docker.localhost`.
 
-## Configure a new custom domain
+## Configure a custom domain
 
-The domain is configurable. Two changes are needed to configure a new domain name.
+The domain is configurable. Just set `PWA_STUDIO_PUBLIC_PATH` key to the new domain under `docker/.env.docker`, or pass a custom .env file with the `PWA_STUDIO_PUBLIC_PATH` key set. All required fields can be found in `docker/.env.docker`. See how to pass the custom .env file below.
 
-1. Change `PWA_STUDIO_PUBLIC_PATH` key to the new domain in `docker/.env.docker`.
-2. Change the `--host` value in the `watch:docker` script in `packages/venia-concept/package.json` to the new domain.
+## Pass custom .env file configuration through cli args (optional)
+
+To use a custom .env file for configuration, pass it to the `run-docker` script like so: `docker/run-docker -e path-from-project-root`. This file will take the place of the default `.env.docker` file.
 
 ## Service Workers and Hot Reloading
 
@@ -29,7 +30,6 @@ Hot reloading is enabled by default when running the `docker/run-docker` script
 
 If service workers are enabled during development, then service worker caching will affect the hot reloading and will require a manual refresh after the cached assets have fully reloaded.
 
-In order to avoid manual page refreshing and have hot reloading work as expected with service workers, it is recommended for developers to click the `Update on reload` checkbox in the `Service Workers` panel in Chrome developer tools. This feature in Chrome is helpful when developing with service workers because it ensures that the service worker is updated on every page reload and you will see changes immediately, avoiding the service worker cache.
+In order to avoid manual page refreshing and have hot reloading work as expected with service workers enabled, it is recommended for developers to click the `Update on reload` checkbox in the `Service Workers` panel in Chrome developer tools. This feature in Chrome is helpful when developing with service workers because it ensures that the service worker is updated on every page reload and you will see changes immediately, avoiding the service worker cache.
 
 For more details check out the [dev tools docs](https://bit.ly/2tTGWc0).
-

docker/run-docker

@@ -1,46 +1,65 @@
 #!/usr/bin/env sh
 
 ####################################################################################
-#
-#   Run this file from the root of the repository to build and run a PWA container
-#
+#   Run this file from the root of the repository to build and run a PWA container #
 ####################################################################################
+CONFIG_ENV_FILE=./docker/.env.docker
+STATUS=0
+
+# accepts -e <envfile_path> to set a separate environment variable file configuration
+while getopts ":e" opt; do
+  case ${opt} in
+    e )
+      # validate that the file path passed is valid
+      if [ -f $2 ]; then
+        CONFIG_ENV_FILE="$2"
+        echo "Configuration using environment variables from: $2"
+      else
+        echo -e "The env file you provided does not exist at this path: $2\nPlease enter the correct path to your environment file."
+        exit 1
+      fi
+      ;;
+  esac
+done
 
 main () {
-  message "Adding environment variables to .env for docker setup."
+  env_setup
+  create_certificate
+  # If cert setup failed then don't start docker
+  if [ "$STATUS" == 0 ]; then
+    start_docker
+  else
+    message "An error occurred during setup."
+    clean_up_env &     # clean up the environment in the background
+    exit 1
+  fi
+}
+
+env_setup () {
   ENVFILE=./.env
-  cp ./docker/.env.docker $ENVFILE 
+  message "Adding env vars from $CONFIG_ENV_FILE to $ENVFILE for docker setup."
+  cp $CONFIG_ENV_FILE $ENVFILE
+  echo "ENVFILEPATH=./$CONFIG_ENV_FILE" >> $ENVFILE
+  cat $ENVFILE
   . $ENVFILE
-
   DOMAIN=$PWA_STUDIO_PUBLIC_PATH
-  STATUS=0
+}
 
-  message "Creating SSL/TLS cert"
+create_certificate () {
+  message "Creating SSL/TLS certificate"
   # make docker/certs folder if one does not already exist
   [ -d ./docker/certs ] || mkdir ./docker/certs
   # install devcert dependency
   cd ./docker && yarn install && cd -
   node ./docker/makeHostAndCert $DOMAIN || STATUS=$?
-
-  # By this point in the setup the host file should have the $DOMAIN and the certificate should be created and trusted
-  if [ "$STATUS" == 0 ]; then
-    start_docker
-  else
-    message "An error occurred during setup."
-    exit 1
-  fi
 }
 
 start_docker () {
-  message "Clearing any running containers"
-  docker-compose down
-
   message "Building PWA image"
   BUILD_STATUS=0
   docker-compose build || BUILD_STATUS=$?
 
-  # clean up the environment in the background
-  clean_up_env &
+  clean_up_env &    # clean up the environment in the background
 
   if [ "$BUILD_STATUS" == 0 ]; then
     message "Starting Docker network and containers"
@@ -52,8 +71,8 @@ start_docker () {
 
 clean_up_env () {
   # the docker-compose command needs the .env file to be present in order to run
-  # but we want to remove it after execution so it doesn't pollute the user's environment 
-  # when they switch to other branches or do not want to use the docker environment anymore
+  # but we want to remove it after execution so it doesn't pollute the dev environment 
+  # when switching git branches or running the application outside of docker
   if [ -f .env ]; then
     sleep 20
     rm .env

packages/venia-concept/package.json

@@ -26,8 +26,7 @@
     "storybook": "start-storybook -p 9001 -c .storybook",
     "storybook:build": "build-storybook -c .storybook -o storybook-dist",
     "validate-queries": "node ./validate-queries.js",
-    "watch": "webpack-dev-server --progress --color --env.mode development",
-    "watch:docker": "webpack-dev-server --progress --color --env.mode development --host pwa-docker.localhost"
+    "watch": "webpack-dev-server --progress --color --env.mode development"
   },
   "repository": "github:magento-research/pwa-studio",
   "author": "Magento Commerce",

pwa-devdocs/_drafts/docker-setup.md

@@ -11,12 +11,13 @@
     ```
 4. Once the script completes, a locally running instance of pwa will be available at `https://pwa-docker.localhost`.
 
-## Configure a new domain
+## Configure a custom domain
 
-The domain is configurable. Two changes are needed to configure a new domain name.
+The domain is configurable. Just set `PWA_STUDIO_PUBLIC_PATH` key to the new domain under `docker/.env.docker`, or pass a custom .env file with the `PWA_STUDIO_PUBLIC_PATH` key set. All required fields can be found in `docker/.env.docker`. See how to pass the custom .env file below.
 
-1. Change `PWA_STUDIO_PUBLIC_PATH` key to the new domain under `docker/.env.docker`.
-2. Change the `--host` value in the `watch:docker` script under `packages/venia-concept/package.json` to the new domain.
+## Pass custom .env file configuration through cli args (optional)
+
+To use a custom .env file for configuration, pass it to the `run-docker` script like so: `docker/run-docker -e path-from-project-root`. This file will take the place of the default `.env.docker` file.
 
 ## Service Workers and Hot Reloading
 
@@ -26,6 +27,6 @@ Hot reloading is enabled by default when running the `docker/run-docker` script
 
 If service workers are enabled during development, then service worker caching will affect the hot reloading and will require a manual refresh after the cached assets have fully reloaded.
 
-In order to avoid manual page refreshing and have hot reloading work as expected with service workers, it is recommended for developers to click the `Update on reload` checkbox in the `Service Workers` panel in Chrome developer tools. This feature in Chrome is helpful when developing with service workers because it ensures that the service worker is updated on every page reload and you will see changes immediately, avoiding the service worker cache.
+In order to avoid manual page refreshing and have hot reloading work as expected with service workers enabled, it is recommended for developers to click the `Update on reload` checkbox in the `Service Workers` panel in Chrome developer tools. This feature in Chrome is helpful when developing with service workers because it ensures that the service worker is updated on every page reload and you will see changes immediately, avoiding the service worker cache.
 
 For more details check out the [dev tools docs](https://bit.ly/2tTGWc0).