Docker compose

.dockerignore

@@ -0,0 +1,2 @@
+packages/**/node_modules
+packages/**/dist

.gitignore

@@ -15,3 +15,4 @@ lerna-debug.log
 yarn-error.log
 # Packages that build partially transpiled ES modules put them here
 packages/*/esm/*
+docker/certs

Dockerfile

@@ -0,0 +1,58 @@
+##############################################################
+# This file is intended to be used with ./docker-compose.yml #
+##############################################################
+
+FROM node:10.14.1-alpine as build
+# working directory
+WORKDIR /usr/src/app
+
+# global environment setup : yarn + dependencies needed to support node-gyp
+RUN apk --no-cache --virtual add \
+    python \
+    make \
+    g++ \
+    yarn 
+
+# copy just the dependency files and configs needed for install
+COPY packages/peregrine/package.json ./packages/peregrine/package.json
+COPY packages/pwa-buildpack/package.json ./packages/pwa-buildpack/package.json
+COPY packages/upward-js/package.json ./packages/upward-js/package.json
+COPY packages/upward-spec/package.json ./packages/upward-spec/package.json
+COPY packages/venia-concept/package.json ./packages/venia-concept/package.json
+COPY package.json yarn.lock babel.config.js browserslist.js magento-compatibility.js ./
+
+# install dependencies with yarn
+RUN yarn install
+
+# copy over the rest of the package files
+COPY packages ./packages
+
+# 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 #
+#######################################################################################
+# # MULTI-STAGE BUILD
+# FROM node:10.14.1-alpine
+# # working directory
+# WORKDIR /usr/src/app
+# # copy build from previous stage
+# COPY --from=build /usr/src/app .
+# # create and set non-root USER
+# RUN addgroup -g 1001 appuser && \
+#     adduser -S -u 1001 -G appuser appuser
+# 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", "-- --host ${WEBPACK_HOST}"]

docker-compose.yml

@@ -0,0 +1,48 @@
+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
+    ports:
+      - "80:80"
+      - "443:443"
+    volumes:
+      - ./docker/certs:/etc/nginx/certs
+      - /var/run/docker.sock:/tmp/docker.sock:ro
+    restart: unless-stopped
+
+  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
+      - ./packages/peregrine/scripts:/usr/src/app/packages/peregrine/scripts:rw
+      - ./packages/peregrine/src:/usr/src/app/packages/peregrine/src:rw
+      - ./packages/pwa-buildpack/src:/usr/src/app/packages/pwa-buildpack/src:rw
+      - ./packages/upward-js/lib:/usr/src/app/packages/upward-js/lib:rw
+      - ./packages/venia-concept/.storybook:/usr/src/app/packages/venia-concept/.storybook:rw
+      - ./packages/venia-concept/esm:/usr/src/app/packages/venia-concept/esm:rw
+      - ./packages/venia-concept/src:/usr/src/app/packages/venia-concept/src:rw
+      - ./packages/venia-concept/static:/usr/src/app/packages/venia-concept/static:rw
+    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:
+      - ${PWA_STUDIO_PORTS_DEVELOPMENT}

docker/.env.docker

@@ -0,0 +1,16 @@
+########## .env.docker ########################################################
+#
+# See packages/venia-concept/.env.dist file for full option details
+#
+###############################################################################
+
+PWA_STUDIO_PUBLIC_PATH=pwa-docker.localhost
+PWA_STUDIO_PORTS_DEVELOPMENT=8080
+ENABLE_SERVICE_WORKER_DEBUGGING=0
+PWA_STUDIO_HOT_RELOAD_WITH_POLLING=0
+MAGENTO_BACKEND_URL=https://release-dev-231-npzdaky-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
+BRAINTREE_TOKEN=sandbox_8yrzsvtm_s2bg8fs563crhqzk

docker/README.md

@@ -0,0 +1,39 @@
+# Docker Directory
+
+This directory stores certificates for local SSL/TLS, created by running `run-docker` script, as well as configuration for docker environment setup.
+
+Run the `docker/run-docker` script from the root of the repository to create a container running PWA with a secure https protocol.
+
+This script will:
+
+* copy the `.env.docker` environment variables to `.env` to be easily consumable by `docker-compose`
+* add a custom domain, configured in `.env.docker`
+* generate a self-signed ssl/tls certificate and trust the certificate using `devcert` in the `makeHostAndCert.js` script
+* run `docker-compose build` to build the container network
+* run `docker-compose up` to start the container running PWA at the custom domain with https
+
+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 custom domain
+
+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.
+
+## 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
+
+Service workers are disabled by default when running the `docker/run-docker` script, but they can easily be turned on by changing the default value of `ENABLE_SERVICE_WORKER_DEBUGGING=0` to `ENABLE_SERVICE_WORKER_DEBUGGING=1` in `.env.docker`.
+
+Hot reloading is enabled by default when running the `docker/run-docker` script and automatically refreshes the browser on changes made in the container as well as on the host machine, ie your local file system. 
+
+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 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).
+
+### Hot Reloading is not working
+
+If you find that hot reloading is not working for you the webpack docs recommend using [polling](https://webpack.js.org/configuration/watch/#watchoptionspoll) as watching does not work with network file systems and machines in VirtualBox. To enable polling, set `PWA_STUDIO_HOT_RELOAD_WITH_POLLING=1` in `.env.docker`.

docker/makeHostAndCert.js

@@ -0,0 +1,16 @@
+const devcert = require('devcert');
+const domain = process.argv[2];
+const fs = require('fs');
+
+const makeFile = (name, content) => {
+    fs.writeFile(name, content, err => {
+        if (err) throw err;
+        console.log(`${name} CREATED SUCCESSFULLY`);
+    });
+};
+const ssl = async function (domain) {
+    const s = await devcert.certificateFor(domain);
+    makeFile(`./docker/certs/${domain}.crt`, s.cert);
+    makeFile(`./docker/certs/${domain}.key`, s.key);
+};
+ssl(domain);

docker/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "pwa-docker",
+  "version": "1.0.0",
+  "description": "run pwa in a container with https",
+  "author": "Kayden Althen",
+  "license": "ISC",
+  "dependencies": {
+    "devcert": "~1.0.0"
+  }
+}

docker/run-docker

@@ -0,0 +1,92 @@
+#!/usr/bin/env sh
+
+####################################################################################
+#   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 provide the relative path to your environment file.\nExample: $CONFIG_ENV_FILE"
+        exit 1
+      fi
+      ;;
+  esac
+done
+
+main () {
+  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
+  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
+}
+
+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=$?
+}
+
+start_docker () {
+  message "Building PWA image"
+  BUILD_STATUS=0
+  docker-compose build || BUILD_STATUS=$?
+
+  clean_up_env &    # clean up the environment in the background
+
+  if [ "$BUILD_STATUS" == 0 ]; then
+    message "Starting Docker network and containers"
+    docker-compose up
+  else
+    message "Build failed. See output for details."
+  fi
+}
+
+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 dev environment 
+  # when switching git branches or running the application outside of docker
+  if [ -f .env ]; then
+    sleep 20
+    rm .env
+  fi
+}
+
+message () {
+  echo ""
+  echo "==========================================================================="
+  echo ""
+  echo -e "        " "$1"
+  echo ""
+  echo "==========================================================================="
+  echo ""
+}
+
+main