Skip to main content
Version: 3.7.0-beta.79 (Latest)

Build for Production

Build Machine Requirements

Getting the Code

With Git:

# Clone the remote repository to your local machine
git clone https://github.com/OHIF/Viewers.git

More on: git clone, git checkout

From .zip:

OHIF/Viewers: master.zip

Restore Dependencies & Build

Open your terminal, and navigate to the directory containing the source files. Next run these commands:

# If you haven't already, enable yarn workspaces
yarn config set workspaces-experimental true

# Restore dependencies
yarn install

# Build source code for production
yarn run build

If everything worked as expected, you should have a new dist/ directory in the platform/app/dist folder. It should roughly resemble the following:

<root>platform/app/dist/
├── app-config.js
├── app.bundle.js
├── app.css
├── index.html
├── manifest.json
├── service-worker.js
└── ...

By default, the build output will connect to OHIF's publicly accessible PACS. If this is your first time setting up the OHIF Viewer, it is recommended that you test with these default settings. After testing, you can find instructions on how to configure the project for your own imaging archive below.

Configuration

The configuration for our viewer is in the <root>platform/app/public/config directory. Our build process knows which configuration file to use based on the APP_CONFIG environment variable. By default, its value is [config/default.js][default-config]. The majority of the viewer's features, and registered extension's features, are configured using this file.

The easiest way to apply your own configuration is to modify the default.js file. For more advanced configuration options, check out our configuration essentials guide.

Next Steps

Deploying Build Output

Drag-n-drop

Easy

Advanced

Testing Build Output Locally

A quick way to test your build output locally is to spin up a small webserver. You can do this by running the following commands in the dist/ output directory:

# Install http-server as a globally available package
yarn global add http-server

# Change the directory to the platform/app

# Serve the files in our current directory
# Accessible at: `http://localhost:8080`
npx http-server ./dist
caution

In the video below notice that there is platform/viewer which has been renamed to platform/app in the latest version

Build for non-root path

If you would like to access the viewer from a non-root path (e.g., /my-awesome-viewer instead of /), You can achieve so by using the PUBLIC_URL environment variable AND the routerBasename configuration option.

  1. use a config (e.g. config/myConfig.js) file that is using the routerBasename of your choice /my-awesome-viewer (note there is only one / - it is not /my-awesome-viewer/).
  2. build the viewer with PUBLIC_URL=/my-awesome-viewer/ APP_CONFIG=config/myConfig.js yarn build (note there are two / - it is not /my-awesome-viewer).
tip

The PUBLIC_URL tells the application where to find the static assets and the routerBasename will tell the application how to handle the routes

tip

Testing, you can use npx http-server to serve the files in the generated dist folder and access the viewer from http://localhost:8080/my-awesome-viewer. To achieve so, you should first rename the dist folder to my-awesome-viewer and then change the working directory to the platform/app folder and run npx http-server ./. Then on the browser, you can access the viewer from http://localhost:8080/my-awesome-viewer

Automating Builds and Deployments

If you found setting up your environment and running all of these steps to be a bit tedious, then you are in good company. Thankfully, there are a large number of tools available to assist with automating tasks like building and deploying web application. For a starting point, check out this repository's own use of: