dockerize front-end and pass env vars to npm build (#614)

* Revert "dockerize front end (#558)"

This reverts commit 89c23faf7a.

* dockerize frontend
- adds score server and website docker compose
- creates docker ignore
- adds .env.* for dev, prod and local
- adds dockerfile for website
- adds env to gatsby-config
- adds hostaddress to develop / start script
- adds istructions in README for running docker
- replaces fixed URLS with ones based on env vars
- creates a score server dockerfile

* updates README to change map tiles source

* adds env DATA_SOURCE:development to deploy GHA

* capitalize readme

.github/workflows/build_deploy.yml

@@ -46,6 +46,8 @@ jobs:
         run: npm ci
       - name: Build
         run: npm run build --if-present
+        env:
+          DATA_SOURCE: development
       - name: Get directory contents
         run: ls -la public
       - name: Lint

client/.dockerignore

@@ -0,0 +1 @@
+node_modules

client/.env.development

@@ -0,0 +1,11 @@
+# WARNING:
+# THIS FILE IS CHECKED INTO VERSION CONTROL! DO NOT ADD ANY SECRET INFO. IF SECRETS ARE ADDED, PLEASE ADD TO # GIT IGNORE FILE
+
+GATSBY_DATA_ROOT_PATH=https://d3jqyw10j8e7p9.cloudfront.net
+GATSBY_DATA_PIPELINE_SCORE_PATH=data-pipeline/data/score
+GATSBY_SCORE_DOWNLOAD_FILE_PATH=downloadable/Screening+Tool+Data.zip
+GATSBY_MAP_TILES_PATH=tiles
+
+# These may be used in the future:
+# WEB_APP_CDN_BASE_URL=https://d2zjid6n5ja2pt.cloudfront.net
+# S3_BASE_URL=https://justice40-data.s3.amazonaws.com

client/.env.local

@@ -0,0 +1,11 @@
+# WARNING:
+# THIS FILE IS CHECKED INTO VERSION CONTROL! DO NOT ADD ANY SECRET INFO. IF SECRETS ARE ADDED, PLEASE ADD TO # GIT IGNORE FILE
+
+GATSBY_DATA_ROOT_PATH=http://localhost:5000/data/data-pipeline
+GATSBY_DATA_PIPELINE_SCORE_PATH=data_pipeline/data/score
+GATSBY_SCORE_DOWNLOAD_FILE_PATH=downloadable/Screening+Tool+Data.zip
+GATSBY_MAP_TILES_PATH=tiles
+
+# These may be used in the future:
+# WEB_APP_CDN_BASE_URL=https://d2zjid6n5ja2pt.cloudfront.net
+# S3_BASE_URL=https://justice40-data.s3.amazonaws.com

client/.gitignore

@@ -5,3 +5,4 @@ public
 cypress/screenshots/
 cypress/videos/
 .DS_Store
+.env.*

client/Dockerfile

@@ -0,0 +1,22 @@
+FROM node:14
+
+# Set working directory like 'cd' command, any subsequent instructions in this docker file, will start from 
+# this working directory
+WORKDIR /client
+
+# Copy the package.json and package_lock.json files from local to the docker image / container
+COPY package*.json ./
+
+# install all packages as a layer in the docker image / container
+RUN npm install
+
+# copy all local files from the working directory to the docker image/container however we must use 
+# dockerignore to ignore node_modules so that the image can use what what was just installed from the above
+# step.
+COPY . .
+
+ENV PORT=6000
+
+EXPOSE 6000
+
+CMD [ "npm", "start"]

client/README.md

@@ -11,6 +11,7 @@ This README contains the following content:
 
 ## Installing and running the client site
 
+### Via npm
 1. Confirm you have the base required software installed. See [INSTALLATION](INSTALLATION.md) for more details.
 1. Install yarn if you do not have it yet. Open your terminal and run `sudo npm install -global yarn`. This works on MacOS and Win10. To confirm it is installed, run `yarn -v`. A version number should be returned.
 1. Navigate to the base directory of this repository, and go to the `client` directory (`cd client`).
@@ -20,6 +21,22 @@ This README contains the following content:
 
 _Note that while this app uses npm as the package manager, yarn is required to build the [uswds](https://github.com/uswds/uswds) library._
 
+### Via docker
+- Launch VS code in the top level directory (above client)
+- Install the Microsoft docker VS code extension
+- Type `docker-compose up`
+- Running this on MacBook Pro with a 2.6GHz 6-core i7 with 16 GB of memory can take upto 20 minutes to complete.
+
+#### Changing the source of tile / map layer
+If you don't want to use the local data-pipeline location for getting the tile / map layers, you can change the 
+DATA_SOURCE env variable in the docker-compose.yml file to development and it will point to the CDN for the tile / 
+map layer.
+
+#### Troubleshooting docker
+
+- If an error is thrown about [running out of space](https://medium.com/@wlarch/no-space-left-on-device-when-using-docker-compose-why-c4a2c783c6f6) on device see this for ways to reclaim space.
+
+
 ### Viewing data on the map
 
 See [VIEW_MAP_DATA](./VIEW_MAP_DATA) for more details on this.

client/gatsby-config.js

@@ -1,3 +1,7 @@
+require('dotenv').config({
+  path: `.env.${process.env.DATA_SOURCE}`,
+});
+
 module.exports = {
   siteMetadata: {
     title: 'Justice40',

client/package.json

@@ -9,8 +9,8 @@
   ],
   "license": "CC0-1.0",
   "scripts": {
-    "develop": "gatsby develop",
+    "develop": "gatsby develop -H 0.0.0.0",
-    "start": "gatsby develop",
+    "start": "gatsby develop -H 0.0.0.0",
     "build": "gatsby build --prefix-paths",
     "serve": "gatsby serve",
     "clean": "gatsby clean",

client/src/data/constants.tsx

@@ -2,22 +2,21 @@ import {LngLatBoundsLike} from 'maplibre-gl';
 import {isMobile as isMobileReactDeviceDetect} from 'react-device-detect';
 import {defineMessages} from 'react-intl';
 
-// URLS
+export const DOWNLOAD_ZIP_URL = [
-export const DOWNLOAD_ZIP_URL = 'https://justice40-data.s3.amazonaws.com/data-pipeline/data/score/downloadable/Screening+Tool+Data.zip';
+  process.env.GATSBY_DATA_ROOT_PATH,
+  process.env.GATSBY_DATA_PIPELINE_SCORE_PATH,
+  process.env.GATSBY_SCORE_DOWNLOAD_FILE_PATH,
+].join('/');
 
-// This is the URL for the origin S3 bucket:
-// export const ORIGIN_BASE_URL = 'https://justice40-data.s3.amazonaws.com';
-
-// This is the URL for the CDN that delivers the tile data
-export const FEATURE_TILE_BASE_URL = 'https://d3jqyw10j8e7p9.cloudfront.net';
-const FEATURE_TILE_PATH = 'data-pipeline/data/score/tiles';
-
-// This is the URL for the CDN that delivers the application
-// const APP_BASE_URL = 'https://d2zjid6n5ja2pt.cloudfront.net';
 const XYZ_SUFFIX = '{z}/{x}/{y}.pbf';
-
 export const featureURLForTilesetName = (tilesetName :string ) : string => {
-  return `${FEATURE_TILE_BASE_URL}/${FEATURE_TILE_PATH}/${tilesetName}/${XYZ_SUFFIX}`;
+  return [
+    process.env.GATSBY_DATA_ROOT_PATH,
+    process.env.GATSBY_DATA_PIPELINE_SCORE_PATH,
+    process.env.GATSBY_MAP_TILES_PATH,
+    tilesetName,
+    XYZ_SUFFIX,
+  ].join('/');
 };
 export const FEATURE_TILE_HIGH_ZOOM_URL = featureURLForTilesetName('high');
 export const FEATURE_TILE_LOW_ZOOM_URL = featureURLForTilesetName('low');

data/data-serve/Dockerfile

@@ -0,0 +1,3 @@
+FROM node:latest
+RUN npm install -g http-server
+CMD http-server ./ --cors

docker-compose.yml

@@ -1,5 +1,6 @@
 version: "3.4"
 services:
+  # The j40_data_pipeline service runs the ETL pipeline to create the score
   score:
     image: j40_data_pipeline
     container_name: j40_data_pipeline_1
@@ -13,3 +14,27 @@ services:
     environment:
       ENV_FOR_DYNACONF: development
       PYTHONUNBUFFERED: 1
+
+  # The score_server serves the data-pipeline volume as a URL   
+  j40_score_server:
+    image: j40_score_server
+    container_name: j40_score_server_1
+    build: data/data-serve/.
+    volumes:
+      - ./data/data-pipeline/data_pipeline/data/score:/data/data-pipeline/data_pipeline/data/score
+    ports:
+      - 5000:8080
+  
+  #The j40_website service runs the web app / map / site
+  j40_website:
+    image: j40_website
+    container_name: j40_website_1
+    build: ./client
+    environment:
+      DATA_SOURCE: local
+    volumes:
+      - ./client/src:/client/src
+    ports: 
+      - 8000:6000
+    depends_on:
+      - "j40_score_server"