Setup for development

[Daniel Matthews]

Hi

Not sure if this is the place for this but I am attempting to extend the XNAT OHIF Viewer and need some help getting my development environment setup. I’m trying to deploy the Viewer without having to build the plugin. There are some instructions on editing the .env file in the ohif-viewer-xnat repo but I’m still having trouble.

I have a dev xnat running using Vagrant. I’ve modified it’s nginx conf for CORS but I am now getting a null response from this URL

http://localhost:3000/VIEWER/?subjectId=XNAT_S00001&projectId=test

I can see that the API call is

GET /xnat-dev/data/archive/projects/test/subjects/XNAT_S00001/experiments?format=json

‌

I’ve also tried without XNAT by running:

yarn run dev

Instead of

yarn run dev:xnat

I can see the list of studies coming from dcmjs.org but when I try to view one I see:

The stylesheet http://localhost:3000/viewer/ConnectedStandaloneRouting~ConnectedXNATStandaloneRouting~IHEInvokeImageDisplay~ViewerLocalFileData~~e8534976.css was not loaded because its MIME type, "text/html", is not "text/css".

Followed by this error:

Uncaught SyntaxError: expected expression, got '<'

‌

Any suggestions (or a redirection to better place to ask these questions) would be gratefully received!

[Mo Alsad]

Hi Dan,

Could you please confirm which version and configuration are using for the XNAT Vagrant VM? xnat-release or xnat-dev?

A couple of notes for accessing XNAT in ohif-viewer-xnat development mode:

• Make sure to create the .env file in platform/viewer/ not at the project root.
• XNAT_DOMAIN value should be in this example format http://10.1.1.17 without path or trailing '/'. So, http://10.1.1.17/XNAT will not work.

For CORS, it is not required to make any changes to the nginx configuration. This is already handled by webpack in platform/viewer/.webpack/webpack.pwa.js (lines 132-162)

With regard to running the default dev (yarn run dev): please replace the following line in platform/viewer/package.json

"dev": "cross-env NODE_ENV=development webpack-dev-server --config .webpack/webpack.pwa.js --watch",

with

"dev": "cross-env NODE_ENV=development PUBLIC_URL=/ APP_CONFIG=config/default.js webpack-dev-server --config .webpack/webpack.pwa.js --watch",

‌

[Daniel Matthews]

Hi Mo

Thanks for getting back to me so quickly!

I’m using the latest version of XNAT (1.8.2) and xnat-dev for the Vagrant VM.

I tried running without mods to the nginx conf and that was when I ran into CORS errors - these went away after the mods.

I can confirm that the changes to platform/viewers/package.json you suggested did the trick when running yarn run dev.

[Mo Alsad]

Hi Dan,

I will test connecting the ohif-viewer-xnat development environment with the xnat-dev VM. I usually use xnat-release.

Having a null response from

http://localhost:3000/VIEWER/?subjectId=XNAT_S00001&projectId=test

may suggest that the viewer plugin is not installed, i.e. copied in /data/xnat/home/plugins.

Accessing XNAT in development mode still requires to install the viewer plugin in order to initialize and enable the XAPI endpoint relevant to the viewer.

You can use the recent build from ohif-viewer-XNAT-plugin.

[Daniel Matthews]

Hi Mo

Just wanted to update you to let you know that I’ve now tried with the xnat-release Vagrant VM. As-is, with no modifications to the nginx config I get the following:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://10.1.1.17/app/template/Login.vm. (Reason: CORS header 'Access-Control-Allow-Origin' missing).

When I visit

http://localhost:3000/VIEWER?subjectId=XNAT_S00001&projectId=test

My .env file (in platform/viewer ) is as follows:

‌

XNAT_DOMAIN=http://10.1.1.17
XNAT_USERNAME=admin
XNAT_PASSWORD=admin

Thanks for your help! Much appreciated!

[Mo Alsad]

Hi Dan,

I set up a fresh development environment in an attempt to reproduce the issue.

• Installed new Vagrant instances for both xnat-release and xnat-dev (v1.8.2),
• deployed the viewer plugin inside each XNAT instance, and
• build a fresh clone of OHIF-Viewer-XNAT with yarn run dev:xnat

The Viewer connects successfully to both XNAT instances without any CORS issues.

I am not sure what exactly causing the issue in your local setup.

[Daniel Matthews]

Hi Mo

I finally figured out my problem. I had XNAT_USERNAME and XNAT_PASSWORD set in my env variables already (and totally forgot). The values in the .env did not override these and so the authentication was failing. The CORS errors were a bit of a red herring.

Thanks for your help!

Dan.

[Mo Alsad]

Great that you have managed to resolve the issue