Skip to main content
Version: Version 2.0 - Master branch

Configuration

This step assumes you have an imaging archive. If you need assistance setting one up, check out the Data Source Guide or a deployment recipe that contains an open Image Archive

Configuration Files

The configuration for our viewer is in the <root>platform/viewer/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. The majority of the viewer's features, and registered extension's features, are configured using this file.

Embedded Use Note:

Alternatively, when using the umd bundle for embedded use cases, these same values are what you'll pass to installViewer method:

OHIFStandaloneViewer.installViewer(window.config)

Environment Variables

We use environment variables at build and dev time to change the Viewer's behavior. We can update the HTML_TEMPLATE to easily change which extensions are registered, and specify a different APP_CONFIG to connect to an alternative data source (or even specify different default hotkeys).

Environment VariableDescriptionDefault
HTML_TEMPLATEWhich HTML template to use as our web app's entry point. Specific to PWA builds.index.html
PUBLIC_URLThe route relative to the host that the app will be served from. Specific to PWA builds./
APP_CONFIGWhich [configuration file][config-file] to copy to output as app-config.jsconfig/default.js
PROXY_TARGETWhen developing, proxy requests that match this pattern to PROXY_DOMAINundefined
PROXY_DOMAINWhen developing, proxy requests from PROXY_TARGET to PROXY_DOMAINundefined

How do I configure my project?

The simplest way is to update the existing default config:

/platform/viewer/public/config/default.js
window.config = {
routerBasename: '/',
servers: {
dicomWeb: [
{
name: 'DCM4CHEE',
wadoUriRoot: 'https://server.dcmjs.org/dcm4chee-arc/aets/DCM4CHEE/wado',
qidoRoot: 'https://server.dcmjs.org/dcm4chee-arc/aets/DCM4CHEE/rs',
wadoRoot: 'https://server.dcmjs.org/dcm4chee-arc/aets/DCM4CHEE/rs',
qidoSupportsIncludeField: true,
imageRendering: 'wadors',
thumbnailRendering: 'wadors',
},
],
},
};

The configuration can also be written as a JS Function in case you need to inject dependencies like external services:

window.config = ({ servicesManager } = {}) => {
const { UIDialogService } = servicesManager.services;
return {
cornerstoneExtensionConfig: {
tools: {
ArrowAnnotate: {
configuration: {
getTextCallback: (callback, eventDetails) => UIDialogService.create({...
}
}
},
},
routerBasename: '/',
servers: {
dicomWeb: [
{
name: 'DCM4CHEE',
wadoUriRoot: 'https://server.dcmjs.org/dcm4chee-arc/aets/DCM4CHEE/wado',
qidoRoot: 'https://server.dcmjs.org/dcm4chee-arc/aets/DCM4CHEE/rs',
wadoRoot: 'https://server.dcmjs.org/dcm4chee-arc/aets/DCM4CHEE/rs',
qidoSupportsIncludeField: true,
imageRendering: 'wadors',
thumbnailRendering: 'wadors',
},
],
},
};
};

You can also create a new config file and specify its path relative to the build output's root by setting the APP_CONFIG environment variable. You can set the value of this environment variable a few different ways:

After updating the configuration, yarn run build to generate updated build output.