fix: Docker build time was very slow on a tiny change

.circleci/config.yml

@@ -229,6 +229,36 @@ jobs:
               docker push ohif/app:latest
             fi
 
+  DOCKER_RELEASE_PUBLISH_ARM:
+    <<: *defaults
+    resource_class: arm.large
+    steps:
+      - attach_workspace:
+          at: ~/repo
+      - setup_remote_docker:
+          docker_layer_caching: false
+      - run:
+          name: Build and push ARM64 Docker image from the release branch
+          command: |
+            # This file will exist if a new version was published by
+            # our command in the previous job.
+            if [[ ! -e version.txt ]]; then
+              exit 0
+            else
+              # Remove npm config
+              rm -f ./.npmrc
+              # Set our version number using vars
+              export IMAGE_VERSION=$(cat version.txt)
+              export IMAGE_VERSION_FULL=v$IMAGE_VERSION
+              echo $IMAGE_VERSION
+              echo $IMAGE_VERSION_FULL
+              # Build our ARM64 image, auth, and push
+              docker build --tag ohif/app:$IMAGE_VERSION_FULL-arm64 --tag ohif/app:latest-arm64 .
+              echo $DOCKER_PWD | docker login -u $DOCKER_LOGIN --password-stdin
+              docker push ohif/app:$IMAGE_VERSION_FULL-arm64
+              docker push ohif/app:latest-arm64
+            fi
+
   DOCKER_BETA_PUBLISH:
     <<: *defaults
     resource_class: large
@@ -265,6 +295,41 @@ jobs:
               docker push ohif/app:$IMAGE_VERSION_FULL
             fi
 
+  DOCKER_BETA_PUBLISH_ARM:
+    <<: *defaults
+    resource_class: arm.large
+    steps:
+      - attach_workspace:
+          at: ~/repo
+      - setup_remote_docker:
+          docker_layer_caching: false
+      - run:
+          name: Build and push ARM64 Docker image from the master branch (beta releases)
+          command: |
+            echo $(ls -l)
+
+            # This file will exist if a new version was published by
+            # our command in the previous job.
+            if [[ ! -e version.txt ]]; then
+              echo "don't have version txt"
+              exit 0
+            else
+              echo "Building and pushing ARM64 Docker image from the master branch (beta releases)"
+              rm -f ./.npmrc
+              # Set our version number using vars
+              export IMAGE_VERSION=$(cat version.txt)
+              export IMAGE_VERSION_FULL=v$IMAGE_VERSION
+              echo $IMAGE_VERSION
+              echo $IMAGE_VERSION_FULL
+              # Build our ARM64 image, auth, and push
+              echo "starting docker build"
+              docker build --tag ohif/app:$IMAGE_VERSION_FULL-arm64 .
+              echo $DOCKER_PWD | docker login -u $DOCKER_LOGIN --password-stdin
+
+              echo "starting docker push"
+              docker push ohif/app:$IMAGE_VERSION_FULL-arm64
+            fi
+
   CYPRESS:
     <<: *defaults
     resource_class: large
@@ -316,6 +381,9 @@ workflows:
       - DOCKER_BETA_PUBLISH:
           requires:
             - NPM_PUBLISH
+      - DOCKER_BETA_PUBLISH_ARM:
+          requires:
+            - NPM_PUBLISH
 
   # viewer.ohif.org
   DEPLOY_RELEASE:
@@ -334,3 +402,6 @@ workflows:
       - DOCKER_RELEASE_PUBLISH:
           requires:
             - NPM_PUBLISH
+      - DOCKER_RELEASE_PUBLISH_ARM:
+          requires:
+            - NPM_PUBLISH

.docker/Viewer-v3.x/default.conf.template

@@ -1,4 +1,7 @@
 server {
+  gzip_static  always;
+  gzip_proxied expired no-cache no-store private auth;
+  gunzip       on;
   listen ${PORT} default_server;
   listen [::]:${PORT} default_server;
   location / {

.docker/Viewer-v3.x/entrypoint.sh

@@ -7,9 +7,15 @@ if [ -n "$SSL_PORT" ]
     envsubst '${PORT}' < /usr/src/default.conf.template > /etc/nginx/conf.d/default.conf
 fi
 
-if [ -n "$APP_CONFIG" ]
+if [ -n "$APP_CONFIG" ] ; then
+  echo "$APP_CONFIG" > /usr/share/nginx/html${PUBLIC_URL}app-config.js
+  rm /usr/share/nginx/html${PUBLIC_URL}app-config.js.gz
+  gzip /usr/share/nginx/html${PUBLIC_URL}app-config.js
+  touch /usr/share/nginx/html${PUBLIC_URL}app-config.js
+fi
+if [ ! -n "$APP_CONFIG" ]
   then
-    echo "$APP_CONFIG" > /usr/share/nginx/html/app-config.js
+    echo "Not using custom app config"
 fi
 
 if [ -n "$CLIENT_ID" ] || [ -n "$HEALTHCARE_API_ENDPOINT" ]
@@ -40,6 +46,6 @@ if [ -n "$CLIENT_ID" ] || [ -n "$HEALTHCARE_API_ENDPOINT" ]
 	  cp /usr/share/nginx/html/google.js /usr/share/nginx/html/app-config.js
 fi
 
-echo "Starting Nginx to serve the OHIF Viewer..."
+echo "Starting Nginx to serve the OHIF Viewer on ${PUBLIC_URL}"
 
 exec "$@"

.docker/compressDist.sh

@@ -0,0 +1,4 @@
+find platform/app/dist -name "*.js" -exec gzip -9 "{}" \; -exec touch "{}" \;
+find platform/app/dist -name "*.map" -exec gzip -9 "{}" \; -exec touch "{}" \;
+find platform/app/dist -name "*.css" -exec gzip -9 "{}" \; -exec touch "{}" \;
+find platform/app/dist -name "*.svg" -exec gzip -9 "{}" \; -exec touch "{}" \;

.dockerignore

@@ -8,11 +8,11 @@
 # have this file as their .dockerignore.
 
 # Output
-dist/
-build/
+**/dist/
+**/build/
 
 # Dependencies
-node_modules/
+**/node_modules/
 
 # Root
 README.md
@@ -33,5 +33,5 @@ dockerfile
 .scripts/
 .vscode/
 coverage/
-docs/
+platform/docs/
 testdata/

Dockerfile

@@ -1,3 +1,4 @@
+# syntax=docker/dockerfile:1.7-labs
 # This dockerfile is used to publish the `ohif/app` image on dockerhub.
 #
 # It's a good example of how to build our static application and package it
@@ -19,61 +20,79 @@
 #
 
 
-# Stage 1: Build the application
-# docker build -t ohif/viewer:latest .
-FROM node:20.18.1-slim as json-copier
-
-RUN mkdir /usr/src/app
-WORKDIR /usr/src/app
-
-COPY ["package.json", "yarn.lock", "preinstall.js", "./"]
-COPY extensions /usr/src/app/extensions
-COPY modes /usr/src/app/modes
-COPY platform /usr/src/app/platform
+# syntax=docker/dockerfile:1.7-labs
+# This dockerfile is used to publish the `ohif/app` image on dockerhub.
+#
+# It's a good example of how to build our static application and package it
+# with a web server capable of hosting it as static content.
+#
+# docker build
+# --------------
+# If you would like to use this dockerfile to build and tag an image, make sure
+# you set the context to the project's root directory:
+# https://docs.docker.com/engine/reference/commandline/build/
+#
+#
+# SUMMARY
+# --------------
+# This dockerfile is used as an input for a second stage to make things run faster.
+#
 
-# Find and remove non-package.json files
-#RUN find extensions \! -name "package.json" -mindepth 2 -maxdepth 2 -print | xargs rm -rf
-#RUN find modes \! -name "package.json" -mindepth 2 -maxdepth 2 -print | xargs rm -rf
-#RUN find platform \! -name "package.json" -mindepth 2 -maxdepth 2 -print | xargs rm -rf
 
+# Stage 1: Build the application
+# docker build -t ohif/viewer:latest .
 # Copy Files
 FROM node:20.18.1-slim as builder
 RUN apt-get update && apt-get install -y build-essential python3
 RUN mkdir /usr/src/app
 WORKDIR /usr/src/app
+RUN npm install -g bun
+# RUN npm install -g [email protected]
+ENV PATH=/usr/src/app/node_modules/.bin:$PATH
 
-COPY --from=json-copier /usr/src/app .
-
+# Do an initial install and then a final install
+COPY package.json yarn.lock preinstall.js lerna.json ./
+COPY --parents ./addOns/package.json ./addOns/*/*/package.json ./extensions/*/package.json ./modes/*/package.json ./platform/*/package.json ./
 # Run the install before copying the rest of the files
-RUN yarn config set workspaces-experimental true
-RUN yarn install --frozen-lockfile --verbose
+RUN bun install
+# Copy the local directory
+COPY --link --exclude=yarn.lock --exclude=package.json --exclude=Dockerfile . .
+# Do a second install to finalize things after the copy
+RUN bun run show:config
+RUN bun install
 
-COPY . .
-
-# To restore workspaces symlinks
-RUN yarn install --frozen-lockfile --verbose
-
-ENV PATH /usr/src/app/node_modules/.bin:$PATH
+# Build here
+# After install it should hopefully be stable until the local directory changes
 ENV QUICK_BUILD true
 # ENV GENERATE_SOURCEMAP=false
-# ENV REACT_APP_CONFIG=config/default.js
+ARG APP_CONFIG=config/default.js
+ARG PUBLIC_URL=/
+
+RUN bun run show:config
+RUN bun run build
 
-RUN yarn run build
+# Precompress files
+RUN chmod u+x .docker/compressDist.sh
+RUN ./.docker/compressDist.sh
 
 # Stage 3: Bundle the built application into a Docker container
 # which runs Nginx using Alpine Linux
-FROM nginxinc/nginx-unprivileged:1.25-alpine as final
+FROM nginxinc/nginx-unprivileged:1.27-alpine as final
 #RUN apk add --no-cache bash
-ENV PORT=80
+ARG PORT=80
+ENV PORT=${PORT}
+ARG PUBLIC_URL=/
+ENV PUBLIC_URL=${PUBLIC_URL}
 RUN rm /etc/nginx/conf.d/default.conf
 USER nginx
 COPY --chown=nginx:nginx .docker/Viewer-v3.x /usr/src
 RUN chmod 777 /usr/src/entrypoint.sh
-COPY --from=builder /usr/src/app/platform/app/dist /usr/share/nginx/html
+COPY --from=builder /usr/src/app/platform/app/dist /usr/share/nginx/html${PUBLIC_URL}
+COPY --from=builder /usr/src/app/platform/app/dist/index.html /usr/share/nginx/html
 # In entrypoint.sh, app-config.js might be overwritten, so chmod it to be writeable.
 # The nginx user cannot chmod it, so change to root.
 USER root
-RUN chmod 666 /usr/share/nginx/html/app-config.js
+RUN chown -R nginx:nginx /usr/share/nginx/html
 USER nginx
 ENTRYPOINT ["/usr/src/entrypoint.sh"]
 CMD ["nginx", "-g", "daemon off;"]

extensions/default/src/ViewerLayout/ViewerHeader.tsx

@@ -10,6 +10,7 @@ import { hotkeys } from '@ohif/core';
 import { Toolbar } from '../Toolbar/Toolbar';
 import HeaderPatientInfo from './HeaderPatientInfo';
 import { PatientInfoVisibility } from './HeaderPatientInfo/HeaderPatientInfo';
+import { preserveQueryParameters, publicUrl } from '@ohif/app';
 
 const { availableLanguages, defaultLanguage, currentLanguage } = i18n;
 
@@ -41,7 +42,7 @@ function ViewerHeader({
     }
 
     navigate({
-      pathname: '/',
+      pathname: publicUrl,
       search: decodeURIComponent(searchQuery.toString()),
     });
   };

package.json

@@ -30,6 +30,7 @@
     "build:demo": "lerna run build:viewer:demo --stream",
     "build:package-all": "lerna run build:package --parallel --stream",
     "build:package-all-1": "lerna run build:package-1 --parallel --stream",
+    "show:config": "echo Config is $APP_CONFIG on $PUBLIC_URL",
     "dev": "lerna run dev:viewer --stream",
     "dev:no:cache": "lerna run dev:no:cache --stream",
     "dev:project": ".scripts/dev.sh",

platform/app/public/config/default.js

@@ -1,6 +1,7 @@
 /** @type {AppTypes.Config} */
 
 window.config = {
+  name: 'config/default.js',
   routerBasename: '/',
   // whiteLabeling: {},
   extensions: [],

platform/app/public/config/kheops.js

@@ -1,8 +1,8 @@
 /** @type {AppTypes.Config} */
 
 window.config = {
+  name: 'config/kheops.js',
   routerBasename: '/',
-  // whiteLabeling: {},
   extensions: [],
   modes: [],
   customizationService: {},
@@ -24,8 +24,9 @@ window.config = {
     prefetch: 25,
   },
   // filterQueryParam: false,
-  // Uses the dicomweb proxy as the default URL
-  defaultDataSourceName: 'dicomwebproxy',
+  // Uses the ohif datasource as the default - this requires that KHEOPS be
+  // configured with an OHIF path to .../viewer/dicomwebproxy
+  defaultDataSourceName: 'ohif3',
   /* Dynamic config allows user to pass "configUrl" query string this allows to load config without recompiling application. The regex will ensure valid configuration source */
   // dangerouslyUseDynamicConfig: {
   //   enabled: true,

platform/app/public/html-templates/index.html

@@ -214,8 +214,9 @@
       function browserImportFunction(moduleId) {
         return import(moduleId);
       }
-    </script>
 
+      window.PUBLIC_URL = '<%= PUBLIC_URL %>';
+    </script>
 
     <!-- EXTENSIONS -->
     <!-- <script type="text/javascript" src="path/to/some-extension.js"></script>
@@ -236,7 +237,6 @@
   <body>
     <noscript> You need to enable JavaScript to run this app. </noscript>
     <div id="react-portal"></div>
-    <div id="root">
-    </div>
+    <div id="root"></div>
   </body>
 </html>

platform/app/src/index.js

@@ -6,6 +6,7 @@ import { createRoot } from 'react-dom/client';
 import App from './App';
 import React from 'react';
 import { history } from './utils/history';
+export { publicUrl } from './utils/publicUrl';
 
 /**
  * EXTENSIONS AND MODES

platform/app/src/routes/WorkList/WorkList.tsx

@@ -11,6 +11,7 @@ import filtersMeta from './filtersMeta.js';
 import { useAppConfig } from '@state';
 import { useDebounce, useSearchParams } from '@hooks';
 import { utils, hotkeys } from '@ohif/core';
+import publicUrl from '../../utils/publicUrl';
 
 import {
   Icon,
@@ -205,7 +206,7 @@ function WorkList({
     });
 
     navigate({
-      pathname: '/',
+      pathname: publicUrl,
       search: search ? `?${search}` : undefined,
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -396,9 +397,7 @@ function WorkList({
                   <Link
                     className={isValidMode ? '' : 'cursor-not-allowed'}
                     key={i}
-                    to={`${dataPath ? '../../' : ''}${mode.routeName}${
-                      dataPath || ''
-                    }?${query.toString()}`}
+                    to={`${publicUrl}${mode.routeName}${dataPath || ''}?${query.toString()}`}
                     onClick={event => {
                       // In case any event bubbles up for an invalid mode, prevent the navigation.
                       // For example, the event bubbles up when the icon embedded in the disabled button is clicked.