SCOGT-82: Latest Discovery UI Dockerized

.gitignore

@@ -10,3 +10,5 @@ dist/
 
 lib/
 *.tgz
+
+.idea/

Dockerfile

@@ -0,0 +1,13 @@
+FROM node:12.13.1 AS builder
+COPY . /app/src
+WORKDIR /app/src
+RUN export NODE_OPTS="--max-old-space-size=8192"
+RUN npm ci
+RUN npm run build
+
+FROM nginx
+COPY --from=builder /app/src/dist /usr/share/nginx/html
+COPY --from=builder /app/src/run.sh /run.sh
+COPY --from=builder /app/src/nginx-default.conf /etc/nginx/conf.d/default.conf
+WORKDIR /usr/share/nginx/html
+CMD ["/run.sh"]

README.md

@@ -80,3 +80,23 @@ export default class App extends Component {
   }
 }
 ```
+
+## Using the Dockerfile
+
+### Building the Container
+
+`docker build . -t <image_name:tag>`
+
+### Running the Container
+
+```bash
+docker run -p 8089:80  \
+  -e API_HOST="https://data.smartcolumbusos.com" \
+  -e GTM_ID="GTM-EXAMPLE" \
+  -e BASE_URL="localhost" \
+  -e STREETS_TILE_LAYER_URL="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" \
+  -e AUTH_0_DOMAIN="smartcolumbusos-demo.auth0.com" \
+  -e AUTH_0_CLIENT_ID="YOUR_AUTH_0_CLIENT_ID" \
+  -e AUTH_0_AUDIENCE="discovery_api" \
+  smartcitiesdata/react_discovery_ui:0.0.1
+```

config/config.js

@@ -1,6 +1,6 @@
 window.API_HOST = 'http://localhost:4000'
 window.GTM_ID = ''
-window.BASE_URL = 'example.com'
+window.BASE_URL = 'localhost'
 window.STREETS_TILE_LAYER_URL = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
 window.LOGO_URL = 'https://placekitten.com/530/530'
 window.MAPBOX_ACCESS_TOKEN = ''

nginx-default.conf

@@ -0,0 +1,23 @@
+server {
+    listen       80;
+    server_name  localhost;
+    add_header X-Content-Type-Options nosniff;
+    add_header X-XSS-Protection "1; mode=block";
+    gzip on;
+    gzip_static on;
+    gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
+    gzip_proxied  any;
+    gzip_vary on;
+    gzip_comp_level 6;
+    gzip_buffers 16 8k;
+    gzip_http_version 1.1;
+    location / {
+        root   /usr/share/nginx/html;
+        index  index.html index.htm;
+        try_files $uri /index.html;
+    }
+    error_page   500 502 503 504  /50x.html;
+    location = /50x.html {
+        root   /usr/share/nginx/html;
+    }
+}

run.sh

@@ -0,0 +1,15 @@
+#!/bin/bash
+
+cat > /usr/share/nginx/html/config.js <<EOL
+window.API_HOST = '${API_HOST}'
+window.GTM_ID = '${GTM_ID}'
+window.BASE_URL = '${BASE_URL}'
+window.STREETS_TILE_LAYER_URL = '${STREETS_TILE_LAYER_URL}'
+window.MAPBOX_ACCESS_TOKEN = '${MAPBOX_ACCESS_TOKEN}'
+window.LOGO_URL = '${LOGO_URL}'
+window.AUTH0_DOMAIN = '${AUTH0_DOMAIN}'
+window.AUTH0_CLIENT_ID = '${AUTH0_CLIENT_ID}'
+window.AUTH0_AUDIENCE = '${AUTH0_AUDIENCE}'
+EOL
+
+nginx -g "daemon off;"

webpack.config.js

@@ -22,7 +22,7 @@ module.exports = (env, argv) => {
   ]
 
   return {
-    watch: true,
+    watch: false,
     entry: {
       main: ['@babel/polyfill', path.join(__dirname, 'src', 'index.js')]
     },