Merge pull request #8 from bcgsc/feature/support-subdir-deployment

Feature/support subdir deployment

.gitignore

@@ -43,4 +43,3 @@ Thumbs.db
 !/public/mainfest.json
 /stats.json
 /dist
-src/static/graphkb-env-config.js

config/.env

@@ -5,3 +5,5 @@ KEYCLOAK_URL=https://keycloakdev.bcgsc.ca/auth
 API_BASE_URL=https://graphkbdev-api.bcgsc.ca
 CONTACT_EMAIL=[email protected]
 CONTACT_TICKET_URL=https://www.bcgsc.ca/jira/projects/KBDEV
+PUBLIC_PATH=/
+IS_DEMO=

config/env.sh

@@ -4,11 +4,12 @@
 
 echo "Creating env variables script: ./graphkb-env-config.js"
 # Recreate config file
-rm -rf ./graphkb-env-config.js
-touch ./graphkb-env-config.js
+ENVJS_FILE=./graphkb-env-config.js
+rm -rf $ENVJS_FILE
+touch $ENVJS_FILE
 
 # Add assignment
-echo "window._env_ = {" >> ./graphkb-env-config.js
+echo "window._env_ = {" >> $ENVJS_FILE
 
 ENV_FILE=.env
 
@@ -37,9 +38,20 @@ do
     echo "$varname=$value (CUSTOM)"
   fi
   # Append configuration property to JS file
-  echo "  $varname: \"$value\"," >> ./graphkb-env-config.js
+  echo "  $varname: '$value'," >> $ENVJS_FILE
 done < $ENV_FILE
 
-echo "}" >> ./graphkb-env-config.js
+echo "};" >> $ENVJS_FILE
 
-cat ./graphkb-env-config.js
+chmod a+x $ENVJS_FILE
+cat $ENVJS_FILE
+
+export INDEX_FILE="index.html"
+
+# now replace the static file instances of PUBLIC_PATH
+# adapted from here: https://dev.to/n1ru4l/configure-the-cra-public-url-post-build-with-node-js-and-express-4n8
+if [ -f $INDEX_FILE ];
+then
+  echo "REPLACE %PUBLIC_PATH% with $PUBLIC_PATH in $INDEX_FILE"
+  sed -i "s,\%PUBLIC_PATH\%,$PUBLIC_PATH,g" $INDEX_FILE
+fi

config/webpack/common.js

@@ -9,19 +9,11 @@ const CompressionPlugin = require('compression-webpack-plugin');
 const ManifestPlugin = require('webpack-manifest-plugin');
 const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
 const TerserWebpackPlugin = require('terser-webpack-plugin');
-
-
-const stripToBaseUrl = (url) => {
-  const match = /^(https?:\/\/[^/]+)/.exec(url);
-  const baseAuthUrl = match
-    ? match[1]
-    : url;
-  return baseAuthUrl;
-};
+const CopyPlugin = require('copy-webpack-plugin');
 
 
 const createBaseConfig = ({
-  env = {}, mode = 'production', sourceMap = false, outputPath,
+  define = {}, mode = 'production', sourceMap = false, outputPath, baseUrl = '/',
 } = {}) => {
   const BASE_DIR = path.resolve(__dirname, '../..');
   const SRC_PATH = path.resolve(BASE_DIR, 'src');
@@ -30,18 +22,6 @@ const createBaseConfig = ({
     SRC_PATH,
   ];
 
-  const ENV_VARS = {
-    KEYCLOAK_CLIENT_ID: process.env.KEYCLOAK_CLIENT_ID || 'GraphKB',
-    KEYCLOAK_ROLE: process.env.KEYCLOAK_ROLE || 'GraphKB',
-    KEYCLOAK_REALM: process.env.KEYCLOAK_REALM || 'PORI',
-    KEYCLOAK_URL: process.env.KEYCLOAK_URL || 'http://localhost:8888/auth',
-    API_BASE_URL: process.env.API_BASE_URL ||  'http://localhost:8080',
-    CONTACT_EMAIL: process.env.CONTACT_EMAIL || '[email protected]',
-    CONTACT_TICKET_URL: process.env.CONTACT_TICKET_URL || 'https://www.bcgsc.ca/jira/projects/KBDEV',
-    ...env
-  };
-
-
   const moduleSettings = {
     rules: [
       {
@@ -107,6 +87,15 @@ const createBaseConfig = ({
 
   const plugins = [
     new webpack.HotModuleReplacementPlugin(),
+    // copy the dynamic env js file
+    new CopyPlugin({
+      patterns: [
+        {
+          from: path.resolve(SRC_PATH, 'static/graphkb-env-config.js'),
+          to: outputPath,
+        },
+      ],
+    }),
     // separate the css from the main js bundle
     new MiniCssExtractPlugin({
       filename: 'static/style/[name].css',
@@ -117,14 +106,16 @@ const createBaseConfig = ({
     // Copy values of ENV variables in as strings using these defaults (null = unset)
     new webpack.DefinePlugin({
       'process.env.npm_package_version': JSON.stringify(process.env.npm_package_version),
-      'process.NODE_ENV': JSON.stringify(env.NODE_ENV || process.env.NODE_ENV)
+      'process.env.NODE_ENV': JSON.stringify('production'),
+      ...define,
     }),
     // template index.html. Required for running the dev-server properly
     new HtmlWebpackPlugin({
-      template: path.resolve(SRC_PATH, 'static/index.html'),
+      template: path.resolve(SRC_PATH, 'static/index.ejs'),
       filename: 'index.html',
       inject: true,
       favicon: path.resolve(SRC_PATH, 'static/favicon/favicon.ico'),
+      baseUrl,
       minify: {
         removeComments: false,
       },
@@ -141,7 +132,7 @@ const createBaseConfig = ({
       ],
       'connect-src': [
         "'self'",
-        '*'
+        '*',
       ],
       // TODO: Remove google charts requirement since it requires external load which cannot include nonce/hash
       // Then re-add the nonce/hash to scripts
@@ -226,7 +217,7 @@ const createBaseConfig = ({
       path: outputPath,
       filename: 'static/js/[name].bundle.js',
       chunkFilename: 'static/js/[name].[chunkhash].chunk.js',
-      publicPath: '/',
+      publicPath: '',
     },
     devServer: {
       host: process.env.HOSTNAME || 'localhost',

config/webpack/dev.js

@@ -7,11 +7,19 @@ const DIST = path.resolve(__dirname, '../../dist/development');
 
 module.exports = createBaseConfig({
   outputPath: DIST,
-  env: {
-    API_BASE_URL: 'https://graphkbdev-api.bcgsc.ca',
-    KEYCLOAK_URL: 'https://keycloakdev.bcgsc.ca/auth',
-    KEYCLOAK_REALM: 'GSC',
-    NODE_ENV: 'development',
+  define: {
+    'window._env_': JSON.stringify({
+      API_BASE_URL: 'https://graphkbdev-api.bcgsc.ca',
+      KEYCLOAK_URL: 'https://keycloakdev.bcgsc.ca/auth',
+      KEYCLOAK_REALM: 'GSC',
+      KEYCLOAK_CLIENT_ID: 'GraphKB',
+      KEYCLOAK_ROLE: 'GraphKB',
+      CONTACT_EMAIL: '[email protected]',
+      CONTACT_TICKET_URL: 'https://www.bcgsc.ca/jira/projects/KBDEV',
+      PUBLIC_PATH: '/',
+      IS_DEMO: false,
+    }),
+    'process.env.NODE_ENV': JSON.stringify('development'),
   },
   sourceMap: true,
   mode: 'development',

config/webpack/docker.js

@@ -8,7 +8,5 @@ module.exports = createBaseConfig({
   outputPath: DIST,
   mode: 'production',
   sourceMap: false,
-  env: {
-    NODE_ENV: 'production'
-  },
+  baseUrl: '%PUBLIC_PATH%',
 });

config/webpack/local.js

@@ -6,11 +6,19 @@ const DIST = path.resolve(__dirname, '../../dist/production');
 
 module.exports = createBaseConfig({
   outputPath: DIST,
-  env: {
-    API_BASE_URL: `http://${process.env.HOSTNAME}:8080`,
-    KEYCLOAK_URL: 'https://keycloakdev.bcgsc.ca/auth',
-    KEYCLOAK_REALM: 'GSC',
-    NODE_ENV: 'local',
+  define: {
+    'window._env_': JSON.stringify({
+      API_BASE_URL: `http://${process.env.HOSTNAME}:8080`,
+      KEYCLOAK_URL: 'https://keycloakdev.bcgsc.ca/auth',
+      KEYCLOAK_REALM: 'GSC',
+      KEYCLOAK_CLIENT_ID: 'GraphKB',
+      KEYCLOAK_ROLE: 'GraphKB',
+      CONTACT_EMAIL: '[email protected]',
+      CONTACT_TICKET_URL: 'https://www.bcgsc.ca/jira/projects/KBDEV',
+      PUBLIC_PATH: '/',
+      IS_DEMO: false,
+    }),
+    'process.env.NODE_ENV': JSON.stringify('local'),
   },
   sourceMap: true,
   mode: 'development',

config/webpack/prod.js

@@ -8,11 +8,18 @@ const DIST = path.resolve(__dirname, '../../dist/production');
 module.exports = createBaseConfig({
   outputPath: DIST,
   mode: 'production',
-  env: {
-    API_BASE_URL: 'https://graphkb-api.bcgsc.ca',
-    KEYCLOAK_URL: 'https://sso.bcgsc.ca/auth',
-    KEYCLOAK_REALM: 'GSC',
-    NODE_ENV: 'production',
+  define: {
+    'window._env_': JSON.stringify({
+      API_BASE_URL: 'https://graphkb-api.bcgsc.ca',
+      KEYCLOAK_URL: 'https://sso.bcgsc.ca/auth',
+      KEYCLOAK_REALM: 'GSC',
+      KEYCLOAK_CLIENT_ID: 'GraphKB',
+      KEYCLOAK_ROLE: 'GraphKB',
+      CONTACT_EMAIL: '[email protected]',
+      CONTACT_TICKET_URL: 'https://www.bcgsc.ca/jira/projects/KBDEV',
+      PUBLIC_PATH: '/',
+      IS_DEMO: false,
+    }),
   },
   sourceMap: false,
 });

config/webpack/staging.js

@@ -7,11 +7,18 @@ const DIST = path.resolve(__dirname, '../../dist/staging');
 module.exports = createBaseConfig({
   outputPath: DIST,
   mode: 'production',
-  env: {
-    API_BASE_URL: 'https://graphkbstaging-api.bcgsc.ca',
-    KEYCLOAK_URL: 'https://keycloakdev.bcgsc.ca/auth',
-    KEYCLOAK_REALM: 'GSC',
-    NODE_ENV: 'production',
+  define: {
+    'window._env_': JSON.stringify({
+      API_BASE_URL: 'https://graphkbstaging-api.bcgsc.ca',
+      KEYCLOAK_URL: 'https://keycloakdev.bcgsc.ca/auth',
+      KEYCLOAK_REALM: 'GSC',
+      KEYCLOAK_CLIENT_ID: 'GraphKB',
+      KEYCLOAK_ROLE: 'GraphKB',
+      CONTACT_EMAIL: '[email protected]',
+      CONTACT_TICKET_URL: 'https://www.bcgsc.ca/jira/projects/KBDEV',
+      PUBLIC_PATH: '/',
+      IS_DEMO: false,
+    }),
   },
   sourceMap: false,
 });

docs/CONTRIBUTING.md

@@ -40,21 +40,20 @@ Building the Docker Image with the default HTTP URLs. The Image builds http by d
 need HTTPS you will need your own certs etc.
 
 ```bash
-docker build  \
-  -t pori/graphkb-client \
-  -f Dockerfile  \
-  .
+docker build --file Dockerfile --tag bcgsc/pori-graphkb-client:latest .
 ```
 
 Now to start the static nginx server
 
 ```bash
 docker run \
   -p 5000:80 \
-  -e API_BASE_URL='http://localhost:8080' \
+  -d \
+  -e API_BASE_URL='https://pori-demo.bcgsc.ca/graphkb-api' \
   -e KEYCLOAK_REALM=PORI \
-  -e KEYCLOAK_URL='http://localhost:8888/auth' \
-  pori/graphkb-client:latest
+  -e KEYCLOAK_URL='https://pori-demo.bcgsc.ca/auth' \
+  -e PUBLIC_PATH=/graphkb \
+  bcgsc/pori-graphkb-client:latest
 ```
 
 ## Tests