othmane/ohif-viewer

Fork 0

dannyrb e90913b0a5 Fix link

2019-05-10 13:58:04 -04:00

6.0 KiB

Raw Blame History

Build for Production

If you've already followed the "Getting Started" Guide, you can skip ahead to Configuration

Overview

Build Machine Requirements

Getting the Code

With Git:

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

# Make sure the local code reflects the `react` version of the OHIF Viewer
git checkout react

Restore Dependencies & Build

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

// Restore dependencies
yarn install

// Build source code for production
yarn run build:web

If everything worked as expected, you should have a new build/ directory in the project's folder. It should roughly resemble the following:

build
├── config/
├── static/
├── 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

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 source Image Archive

How it Works

The configuration for our project is in the /public/config directory. Our build process knows which configuration file to use based on the REACT_APP_CONFIG environment variable. By default, its value is default.js. When we build, the %REACT_APP_CONFIG% value in our/public/index.html file is substituted for the correct configuration file's name. This sets thewindow.config equal to our configuration file's value.

How do I configure my project?

The simplest way is to update the existing default config:

/public/config/default.js

window.config = {
  routerBasename: '/',
  relativeWebWorkerScriptsPath: '',
  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',
        requestOptions: {
          requestFromBrowser: true,
        },
      },
    ],
  },
}

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

Add a temporary environment variable in your shell
Add environment specific variables in .env file(s)
Using the cross-env package in an npm script:
- "build": "cross-env REACT_APP_CONFIG=config/my-config.js react-scripts build"

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

Next Steps

Deploying Build Output

Drag-n-drop

Netlify: 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 build/ output directory:

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

// Serve the files in our current directory
// Accessible at: `http://localhost:8080`
http-server

Automating Builds and Deployments

If you found setting up your environmnent 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:

Troubleshooting

Issues and resolutions for common GitHub issues will be summarized here

...

6.0 KiB Raw Blame History