fix: Docker build time was very slow on a tiny change (#4559)

Co-authored-by: sedghi <ar.sedghi@gmail.com>

.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,18 @@ 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
+  # Removes the old compressed app-config file, then compresses the replacement
+  # and finally creates a new empty file so that gunzip works correctly.
+  # This code is correct despite the AI warning otherwise about order of create/delete
+  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 +49,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/
+**/dist/
-build/
+**/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 @@
 #
 
 
+# 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.
+#
+
+
 # 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
-
-# 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
-
 # 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 lerna@7.4.2
+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 bun install
-RUN yarn install --frozen-lockfile --verbose
+# 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 . .
+# Build here
-
+# After install it should hopefully be stable until the local directory changes
-# To restore workspaces symlinks
-RUN yarn install --frozen-lockfile --verbose
-
-ENV PATH /usr/src/app/node_modules/.bin:$PATH
 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 yarn run build
+RUN bun run show:config
+RUN bun 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
+  // Uses the ohif datasource as the default - this requires that KHEOPS be
-  defaultDataSourceName: 'dicomwebproxy',
+  // 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/config/local_orthanc.js

@@ -29,7 +29,6 @@ window.config = {
         enableStudyLazyLoad: true,
         supportsFuzzyMatching: true,
         supportsWildcard: true,
-        dicomUploadEnabled: true,
         omitQuotationForMultipartRequest: true,
         bulkDataURI: {
           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 id="root"></div>
-    </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}${
+                    to={`${publicUrl}${mode.routeName}${dataPath || ''}?${query.toString()}`}
-                      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.

platform/app/src/routes/buildModeRoutes.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import ModeRoute from '@routes/Mode';
+import publicUrl from '../utils/publicUrl';
 
 /*
   Routes uniquely define an entry point to:
@@ -42,7 +43,7 @@ export default function buildModeRoutes({
   modes.forEach(mode => {
     // todo: for each route. add route to path.
     dataSourceNames.forEach(dataSourceName => {
-      const path = `/${mode.routeName}/${dataSourceName}`;
+      const path = `${publicUrl}${mode.routeName}/${dataSourceName}`;
 
       // TODO move up.
       const children = () => (
@@ -65,7 +66,7 @@ export default function buildModeRoutes({
 
     // Add active DataSource route.
     // This is the DataSource route for the active data source defined in ExtensionManager.getActiveDataSource
-    const path = `/${mode.routeName}`;
+    const path = `${publicUrl}${mode.routeName}`;
 
     // TODO move up.
     const children = () => (

platform/app/src/routes/index.tsx

@@ -12,6 +12,7 @@ import buildModeRoutes from './buildModeRoutes';
 import PrivateRoute from './PrivateRoute';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
+import publicUrl from '../utils/publicUrl';
 
 const NotFoundServer = ({
   message = 'Unable to query for studies at this time. Check your data source configuration or network connection',
@@ -55,23 +56,23 @@ NotFoundStudy.propTypes = {
 // TODO: Include "routes" debug route if dev build
 const bakedInRoutes = [
   {
-    path: '/notfoundserver',
+    path: `${publicUrl}notfoundserver`,
     children: NotFoundServer,
   },
   {
-    path: '/notfoundstudy',
+    path: `${publicUrl}notfoundstudy`,
     children: NotFoundStudy,
   },
   {
-    path: '/debug',
+    path: `${publicUrl}debug`,
     children: Debug,
   },
   {
-    path: '/local',
+    path: `${publicUrl}local`,
     children: Local.bind(null, { modePath: '' }), // navigate to the worklist
   },
   {
-    path: '/localbasic',
+    path: `${publicUrl}localbasic`,
     children: Local.bind(null, { modePath: 'viewer/dicomlocal' }),
   },
 ];
@@ -102,7 +103,7 @@ const createRoutes = ({
   const { customizationService } = servicesManager.services;
 
   const WorkListRoute = {
-    path: '/',
+    path: publicUrl,
     children: DataSourceWrapper,
     private: true,
     props: { children: WorkList, servicesManager, extensionManager },
@@ -112,6 +113,8 @@ const createRoutes = ({
   const allRoutes = [
     ...routes,
     ...(showStudyList ? [WorkListRoute] : []),
+    // This next line adds a route on / to allow loading from the route and redirecting to the public url
+    ...(publicUrl !== '/' && showStudyList ? [{ ...WorkListRoute, path: '/' }] : []),
     ...(customRoutes?.routes || []),
     ...bakedInRoutes,
     customRoutes?.notFoundRoute || notFoundRoute,

platform/app/src/utils/publicUrl.ts

@@ -0,0 +1,4 @@
+const publicUrl = (window as any).PUBLIC_URL || '/';
+
+export default publicUrl;
+export { publicUrl };

platform/docs/docs/deployment/docker/docker.md

@@ -0,0 +1,210 @@
+---
+sidebar_position: 4
+---
+
+# Docker
+
+The OHIF source code provides a [Dockerfile](https://github.com/OHIF/Viewers/blob/master/Dockerfile) to create and run a Docker image that containerizes an [nginx](https://www.nginx.com/) web server serving the OHIF Viewer.
+
+:::info
+This Dockerfile is the same used to generate the [OHIF image(s) on Docker Hub](https://hub.docker.com/r/ohif/app/tags).
+:::
+
+
+## Running the Docker Container with our pre-built images from Docker Hub
+
+
+To run the Docker container, use the following command based on whether you're targeting a release or beta version. (Learn more about versioning [here](../../development/getting-started.md#branches).)
+
+```sh
+#  beta version
+docker run -d -p 3000:80 ohif/app:v3.10.0-beta.33
+
+# release version
+docker run -d -p 3000:80 ohif/app:v3.9.2
+```
+
+This will run the Docker container and serve the OHIF Viewer at `http://localhost:3000`. You can name the container anything you want by adding the `--name` flag (e.g., `docker run -d -p 3000:80 --name ohif-viewer-container ohif/app:v3.10.0-beta.33`).
+
+
+## Building the Docker Image From Source
+
+:::tip
+Building a Docker image comes in handy when OHIF has been customized (e.g. with custom extensions, modes, hanging protocols, etc.). For convenience, there are basic OHIF images built in Docker Hub. Find the latest [release](https://hub.docker.com/r/ohif/app/tags?page=1&name=latest) and [dev](https://hub.docker.com/r/ohif/app/tags?page=1&name=beta) images all in Docker Hub.
+:::
+
+### Prerequisites
+The machine on which to build and run the Docker container must have:
+1. All of the [requirements](./build-for-production.md#build-for-production) for building a production version of OHIF.
+2. A checked out branch of the OHIF Viewer.
+3. [Docker](https://docs.docker.com/get-docker/) installed.
+
+### Building the Docker Image
+
+:::info
+In this tutorial, we will build the Docker image for the OHIF Viewer and OHIF server as defined in the `default.js` config which points to our server and our studies.
+
+If you need the Viewer to show your own server studies, you need to build the viewer with a custom configuration that points to your server and your studies.
+
+You can set build arguments to point to your custom configuration file. For more information on data sources, see [here](../../platform/extensions/modules/data-source.md).
+
+:::
+
+
+
+
+To build the Docker image from the terminal:
+
+- Navigate to the OHIF Viewer code root directory (base of the monorepo).
+- Run a basic Docker build command:
+
+    ```sh
+    docker build . -t ohif-viewer-image
+    ```
+
+  *Note*: The name `ohif-viewer-image` is an example. You can replace it with any name and tag of your choice by changing the `-t` value (e.g., `-t my-image:latest`). This naming is arbitrary for local Docker images.
+
+- To customize the build, you can include optional build arguments to set defaults for the app configuration, public path, or port:
+
+    ```sh
+    docker build . -t ohif-viewer-image \
+      --build-arg APP_CONFIG=config/e2e.js \
+      --build-arg PUBLIC_URL=/ohif/ \
+      --build-arg PORT=6000
+    ```
+
+#### Available Build Arguments (Optional)
+You can use the following build arguments to customize the Docker image:
+
+- `APP_CONFIG`: (Optional) Sets the default app configuration (e.g., `config/e2e.js`). This value can be overridden later by setting an environment variable (you can set it in the docker run command).
+- `PUBLIC_URL`: (Optional) Specifies the public path for serving the OHIF Viewer (e.g., `/ohif/`). This value is baked into the build and cannot be changed without rebuilding the image.
+- `PORT`: (Optional) Sets the application’s port.
+
+#### Examples of Using Build Arguments
+Here are examples of how to use the `--build-arg` option:
+
+- Set the public path:
+
+    ```sh
+    docker build . --build-arg PUBLIC_URL=/ohif/
+    ```
+
+- Set a custom app configuration:
+
+    ```sh
+    docker build . --build-arg APP_CONFIG=config/kheops.js
+    ```
+
+- Specify a port:
+
+    ```sh
+    docker build . --build-arg PORT=6000
+    ```
+
+- Combine multiple arguments:
+
+    ```sh
+    docker build . --build-arg PUBLIC_URL=/ohif/ --build-arg APP_CONFIG=config/kheops.js --build-arg PORT=6000
+    ```
+
+:::info PUBLIC_URL Explanation
+The `PUBLIC_URL` build argument sets the public path for serving the OHIF Viewer. For example, using `--build-arg PUBLIC_URL=/ohif/` will serve the worklist at `http://host/ohif/` and the viewer at `http://host/ohif/viewer`. While the worklist is also accessible at `http://host/`, it redirects to the `PUBLIC_URL`.
+:::
+
+---
+
+## Running the Docker Container
+
+After building the Docker image, you can run it as a container using the following command. The name of the Docker image (`ohif-viewer-image`) is specified at the end, while the flags control various runtime settings.
+
+```sh
+docker run -d -p 3000:80/tcp --name ohif-viewer-container ohif-viewer-image
+```
+
+- `-d`: Runs the container in the background and prints the container ID.
+
+- `-p {host-port}:{nginx-port}/tcp`: Maps the container's `nginx` port to a port on the host machine. For example, `3000:80` maps host port 3000 to container port 80.
+
+- `--name`: Assigns an arbitrary name to the container for easy identification (e.g., `ohif-viewer-container`).
+
+
+
+### Configuring the `nginx` Listen Port
+
+The `nginx` server uses the `{PORT}` environment variable to determine the listening port inside the container. By default, this is set to `80`. You can override it during runtime or build:
+
+#### Setting the Port at Runtime
+
+Use the `-e PORT={container-port}` flag to set the listening port and publish it with `-p`. For example, the following command sets the container port to `8080` and maps it to host port `3000`:
+
+```sh
+docker run -d -e PORT=8080 -p 3000:8080/tcp --name ohif-viewer-container ohif-viewer-image
+```
+
+#### Setting the Port During Build
+
+To bake the port configuration into the Docker image, use the `--build-arg PORT={container-port}` flag when building the image:
+
+```sh
+docker build . --build-arg PORT=8080
+```
+
+then you can run the container with the following command:
+
+```sh
+docker run -d -p 3000:8080/tcp --name ohif-viewer-container ohif-viewer-image
+```
+
+---
+
+### Specifying the OHIF Configuration File
+
+You can specify the OHIF configuration file for the container in three ways:
+
+1. **[Build Default](#build-default)**: Set the default configuration file during the build process.
+2. **[Volume Mounting](#volume-mounting)**: Mount a local configuration file into the container.
+3. **[Environment Variable](#environment-variable)**: Pass the configuration file contents directly as an environment variable.
+
+#### Build Default
+
+Set the configuration file during the build process using the `--build-arg APP_CONFIG={config-path}` flag. For example:
+
+```sh
+docker build . --build-arg APP_CONFIG=config/kheops
+```
+
+---
+
+#### Volume Mounting
+
+To use a local configuration file, mount it as a volume during runtime. For example, to use a file located at `/path/to/config/file.js`, use the `-v` flag:
+
+```sh
+docker run -d -p 3000:80/tcp -v /path/to/config/file.js:/usr/share/nginx/html/app-config.js --name ohif-viewer-container ohif-viewer-image
+```
+
+:::tip
+Ensure the path to the local configuration file is absolute, as some Docker versions require it.
+:::
+
+---
+
+#### Environment Variable
+
+Alternatively, you can specify the configuration file contents directly as an environment variable (`APP_CONFIG`). This method is useful in environments like Google Cloud.
+
+**Important**: The `APP_CONFIG` variable must contain the file's contents, not its file path. Use the `cat` command to read the file and pass its contents as the environment variable:
+
+```sh
+docker run -d -p 3000:80/tcp -e APP_CONFIG="$(cat /path/to/the/config/file)" --name ohif-viewer-container ohif-viewer-image
+```
+
+:::tip
+- Remove single-line comments (`//`) from the configuration file to prevent issues when serving the file to the OHIF client.
+- As an alternative to the `cat` command, you can convert the file to a single line and copy-paste it directly. Tools like [Visual Studio Code](https://stackoverflow.com/questions/46491061/shortcut-for-joining-two-lines) and [Notepad++](https://superuser.com/questions/518229/how-do-i-remove-linebreaks-in-notepad) offer "Join Lines" commands to help with this.
+- If both the [Volume Mounting](#volume-mounting) and [Environment Variable](#environment-variable) methods are used, the Volume Mounting method takes precedence.
+:::
+
+---
+
+This rewrite improves readability by reorganizing information into smaller, clear sections and providing consistent formatting for examples and tips.

platform/docs/docs/deployment/docker/ssl.md

@@ -1,129 +1,9 @@
 ---
-sidebar_position: 5
+sidebar_position: 2
+title: SSL
 ---
 
-# Docker
+# SSL
-
-The OHIF source code provides a [Dockerfile](https://github.com/OHIF/Viewers/blob/master/Dockerfile) to create and run a Docker image that containerizes an [nginx](https://www.nginx.com/) web server serving the OHIF Viewer.
-
-:::info
-This Dockerfile is the same used to generate the [OHIF image(s) on Docker Hub](https://hub.docker.com/r/ohif/app/tags).
-:::
-
-
-## Prerequisites
-The machine on which to build and run the Docker container must have:
-1. All of the [requirements](./build-for-production.md#build-for-production) for building a production version of OHIF.
-2. A checked out branch of the OHIF Viewer.
-3. [Docker](https://docs.docker.com/get-docker/) installed.
-
-## Building the Docker Image
-
-:::info
-In this tutorial, we will build the Docker image for the OHIF Viewer and OHIF server as defined in the `default.js` config. If you need a custom build, you can modify the configuration file to include your data sources and then build the Docker image. For more information on data sources, see [here](../platform/extensions/modules/data-source.md).
-
-Below we show how to point the Docker image to a custom configuration file.
-:::
-
-
-The docker image can be built from a terminal window as such:
-1. Switch to the OHIF Viewer code root directory.
-2. Issue the following Docker command. Note that what follows `-t` flag is the `{name}:{tag}` for the Docker image and is arbitrary when creating a local Docker image.
-
-    ```sh
-    docker build . -t ohif-viewer-image
-    ```
-
-:::tip
-Building a Docker image comes in handy when OHIF has been customized (e.g. with custom extensions, modes, hanging protocols, etc.). For convenience, there are basic OHIF images built in Docker Hub. Find the latest [release](https://hub.docker.com/r/ohif/app/tags?page=1&name=latest) and [dev](https://hub.docker.com/r/ohif/app/tags?page=1&name=beta) images all in Docker Hub.
-:::
-
-## Running the Docker Container
-Once the Docker image has been built, it can be run as a container from the command line as in the block below. Note that the last argument to the command is the name of the Docker image and the table below describes the other arguments.
-
-|Flag|Description|
-|----|-----------|
-|-d|Run the container in the background and print the container ID|
-|-p `{host-port}:{nginx-port}/tcp`|Publish the `nginx` listen port on the given host port|
-|--name|An arbitrary name for the container.|
-
-
-```sh
-docker run -d -p 3000:80/tcp --name ohif-viewer-container ohif-viewer-image
-```
-
-:::tip
-Any of the [Docker Hub images](https://hub.docker.com/r/ohif/app/tags) can be easily run as a Docker container.
-
-The following is the command to run the Docker container using the latest released OHIF Docker Hub image.
-
-```sh
-docker run -d -p 3000:80/tcp --name LatestReleasedOHIF ohif/app:latest
-```
-
-Simply replace `latest` at the end of the command with any of the tags for a specific version.
-:::
-
-### Configuring the `nginx` Listen Port
-
-The Dockerfile and entry point use the `{PORT}` environment variable as the port that the `nginx` server uses to serve the web server. The default value for `{PORT}` is `80`. One way to set this environment variable is to use the `-e` switch when running the container with `docker run`. The block below gives an example where the listen port is set to `8080` and published on the host as `3000`.
-
-```sh
-docker run -d -e PORT=8080 -p 3000:8080/tcp --name ohif-viewer-container ohif-viewer-image
-```
-
-### Specifying the OHIF config File
-
-There are two approaches for specifying the OHIF configuration file for a Docker container:
-
-- [Volume Mounting](#volume-mounting)
-- [Environment Variable](#environment-variable)
-
-#### Volume Mounting
-
-The OHIF [config file](../configuration/configurationFiles.md) can be specified by mounting it as a volume for the Docker container using the `-v` flag. If the OHIF config file is on the local file system then it can be specified as below.
-
-```sh
-docker run -d -p 3000:80/tcp -v /path/to/config/file.js:/usr/share/nginx/html/app-config.js --name ohif-viewer-container ohif-viewer-image
-```
-:::tip
- Depending on the version of Docker, an absolute path to the local source config file might be required.
-:::
-#### Environment Variable
-
-In certain scenarios, such as deploying the Docker container to Google Cloud, it might be convenient to specify the configuration file (contents) as an environment variable. That environment variable is `{APP_CONFIG}` and it can be set in the `docker run` command using the `-e` switch.
-
-:::tip
-It is important to stress here that the environment variable is the contents of the configuration file and NOT the path to the config file as is [typically specified](https://docs.ohif.org/configuration/configurationFiles#configuration-files) for development and build environments or for the [volume mounting method](#volume-mounting).
-:::
-
-Below the `cat` command is used to convert the configuration file to a string and its result set as the `{APP_CONFIG}` environment variable.
-
-```sh
-docker run -d -p 3000:80/tcp -e APP_CONFIG="$(cat /path/to/the/config/file)" --name ohif-viewer-container ohif-viewer-image
-```
-
-:::tip
-To be safe, remove single line comments (i.e. `//`) from the configuration file because the presence of these comments might cause the configuration file to be prematurely truncated when it is served to the OHIF client.
-:::
-
-:::tip
-As an alternative to the `cat` command, convert the configuration file to a single line and copy and paste it as the value to the `{APP_CONFIG}` environment variable on the `docker run` line. Editors such as [Visual Studio Code](https://stackoverflow.com/questions/46491061/shortcut-for-joining-two-lines) and [Notepad++](https://superuser.com/questions/518229/how-do-i-remove-linebreaks-in-notepad) have 'Join Lines' commands to facilitate this.
-:::
-
-:::tip
-If both the [volume mounting method](#volume-mounting) and the [environment variable method](#environment-variable) are used, the volume mounting method will take precedence.
-:::
-
-### Embedding in an iframe
-
-If the OHIF instance served by the Docker image is to be embedded in an `iframe`, and if  [cross-origin isolation](./cors.md#cross-origin-isolation) is required, then the [Cross Origin Resource Policy (CORP) header value](https://github.com/OHIF/Viewers/blob/8a8ae237d26faf123abeb073cbf0cd426c3e9ef2/.docker/Viewer-v3.x/default.conf.template#L10) that OHIF is served with will have to be updated accordingly. More information on CORP and `iframe`s can be found [here](./cors.md#ohif-as-a-cross-origin-resource-in-an-iframe).
-
-:::tip
-For SSL Docker deployments, the CORP header value is set [here](https://github.com/OHIF/Viewers/blob/8a8ae237d26faf123abeb073cbf0cd426c3e9ef2/.docker/Viewer-v3.x/default.ssl.conf.template#L12).
-:::
-
-## SSL
 
 :::caution
 We make no claims or guarantees regarding this section concerning security. If in doubt, enlist the help of an expert and conduct proper audits.
@@ -194,11 +74,11 @@ According to [Entrust](https://www.entrust.com/resources/faq/what-is-a-self-sign
 
 Browsers will treat self-signed certificates as not secure because the signer is not publicly recognized and trusted. When visiting a site encrypted with a self-signed certificate, the browser will present a screen similar to the following warning about the potential risk.
 
-![Self-signed certificate warning](../assets/img/self-signed-cert-warning.png)
+![Self-signed certificate warning](../../assets/img/self-signed-cert-warning.png)
 
 For a self-signed certificate this is normal and expected. Clicking the `Advanced` button displays further information as well as a link for proceeding to site that the certificate is encrypting.
 
-![Self-signed certificate warning](../assets/img/self-signed-cert-advanced-warning.png)
+![Self-signed certificate warning](../../assets/img/self-signed-cert-advanced-warning.png)
 
 
 Self-signed certificates might be appropriate for testing or perhaps deploying a site within an organization's internal LAN. In any case, consult an expert prior to deploying OHIF over SSL.