diff --git a/platform/viewer/.recipes/Nginx-Orthanc/config/nginx.conf b/.docker/Nginx-Orthanc/config/nginx.conf similarity index 100% rename from platform/viewer/.recipes/Nginx-Orthanc/config/nginx.conf rename to .docker/Nginx-Orthanc/config/nginx.conf diff --git a/platform/viewer/.recipes/Nginx-Orthanc/config/orthanc.json b/.docker/Nginx-Orthanc/config/orthanc.json similarity index 100% rename from platform/viewer/.recipes/Nginx-Orthanc/config/orthanc.json rename to .docker/Nginx-Orthanc/config/orthanc.json diff --git a/platform/viewer/.recipes/Nginx-Orthanc/docker-compose.yml b/.docker/Nginx-Orthanc/docker-compose.yml similarity index 100% rename from platform/viewer/.recipes/Nginx-Orthanc/docker-compose.yml rename to .docker/Nginx-Orthanc/docker-compose.yml diff --git a/platform/viewer/.recipes/Nginx-Orthanc/volumes/orthanc-db/.gitignore b/.docker/Nginx-Orthanc/volumes/orthanc-db/.gitignore similarity index 100% rename from platform/viewer/.recipes/Nginx-Orthanc/volumes/orthanc-db/.gitignore rename to .docker/Nginx-Orthanc/volumes/orthanc-db/.gitignore diff --git a/docs/latest/essentials/data-source.md b/docs/latest/essentials/data-source.md index 2c1b68b2b..372a42525 100644 --- a/docs/latest/essentials/data-source.md +++ b/docs/latest/essentials/data-source.md @@ -35,10 +35,10 @@ For our purposes, we will be using `Orthanc`, but you can see a list of _Not sure if you have `docker` installed already? Try running `docker --version` in command prompt or terminal_ -> If you are using `Docker Toolbox` you need to change the _proxy_ parameter in -> _package.json_ to http://192.168.99.100:8042 or the ip docker-machine ip -> throws. This is the value [`react-scripts`][react-proxy] uses to proxy -> requests +> If you are using `Docker Toolbox` you need to change the _PROXY_DOMAIN_ +> parameter in _platform/viewer/package.json_ to http://192.168.99.100:8042 or +> the ip docker-machine ip throws. This is the value [`WebPack`][webpack-proxy] +> uses to proxy requests ### Running Orthanc @@ -51,8 +51,9 @@ yarn run orthanc:up _Upload your first Study:_ -1. Navigate to [Orthanc's web interface](http://localhost:8899) at - `http://localhost:8899` in a web browser. +1. Navigate to + [Orthanc's web interface](http://localhost:8042/app/explorer.html) at + `http://localhost:8042/app/explorer.html` in a web browser. 2. In the top right corner, click "Upload" 3. Click "Select files to upload..." and select one or more DICOM files 4. Click "Start the upload" @@ -60,17 +61,20 @@ _Upload your first Study:_ #### Orthanc: Learn More You can see the `docker-compose.yml` file this command runs at -[`/platform/viewer/.recipes/Nginx-Orthanc/`](https://github.com/OHIF/Viewers/tree/master/platform/viewer/.recipes/Nginx-Orthanc), -and more on Orthanc for Docker in [Orthanc's documentation][orthanc-docker]. +[`/.docker/Nginx-Orthanc/`][orthanc-docker-compose], and more on +Orthanc for Docker in [Orthanc's documentation][orthanc-docker]. ### Connecting to Orthanc Now that we have a local Orthanc instance up and running, we need to configure our web application to connect to it. Open a new terminal window, navigate to -this project's root directory, and run: +this repository's root directory, and run: ```bash -# If you haven't already, restore dependencies +# If you haven't already, enable yarn workspaces +yarn config set workspaces-experimental true + +# Restore dependencies yarn install # Run our dev command, but with the local orthanc config @@ -87,18 +91,24 @@ is running the `dev:orthanc` script in our project's `package.json`. That script is: ```js -cross-env PORT=5000 APP_CONFIG=config/docker_nginx-orthanc.js react-scripts start +cross-env NODE_ENV=development PROXY_TARGET=/dicom-web PROXY_DOMAIN=http://localhost:8042 APP_CONFIG=config/docker_nginx-orthanc.js webpack-dev-server --config .webpack/webpack.pwa.js -w ``` -- `cross-env` sets two environment variables - - PORT: 5000 +- `cross-env` sets three environment variables + - PROXY_TARGET: `/dicom-web` + - PROXY_DOMAIN: `http://localhost:8042` - APP_CONFIG: `config/docker_nginx-orthanc.js` -- `react-scripts` runs it's `start` script. This is [the de-facto - way][cra-start] to run a "Create React App" in development mode. +- `webpack-dev-server` runs using the `.webpack/webpack.pwa.js` configuration + file. It will watch for changes and update as we develop. + +`PROXY_TARGET` and `PROXY_DOMAIN` tell our development server to proxy requests +to `Orthanc`. This allows us to bypass CORS issues that normally occur when +requesting resources that live at a different domain. The `APP_CONFIG` value tells our app which file to load on to `window.config`. -By default, our app uses the file at `/public/config/default.js`. -Here is what that configuration looks like: +By default, our app uses the file at +`/platform/viewer/public/config/default.js`. Here is what that +configuration looks like: ```js window.config = { @@ -145,8 +155,8 @@ _Feel free to make a Pull Request if you want to add to this list._ [dcmjs-org]: https://server.dcmjs.org/dcm4chee-arc/aets/DCM4CHEE/wado [dicom-web]: https://en.wikipedia.org/wiki/DICOMweb [storescu]: http://support.dcmtk.org/docs/storescu.html -[cra-start]: https://github.com/facebook/create-react-app#npm-start-or-yarn-start -[react-proxy]: https://facebook.github.io/create-react-app/docs/proxying-api-requests-in-development#configuring-the-proxy-manually +[webpack-proxy]: https://webpack.js.org/configuration/dev-server/#devserverproxy +[orthanc-docker-compose]: https://github.com/OHIF/Viewers/tree/master/.docker/Nginx-Orthanc [dcm4chee]: https://github.com/dcm4che/dcm4chee-arc-light [dcm4chee-docker]: https://github.com/dcm4che/dcm4chee-arc-light/wiki/Running-on-Docker diff --git a/package.json b/package.json index 34458c777..6c1264278 100644 --- a/package.json +++ b/package.json @@ -12,13 +12,15 @@ }, "scripts": { "cm": "npx git-cz", - "dev": "lerna run dev:viewer --stream", - "dev:project": ".scripts/dev.sh", "build": "lerna run build:viewer --stream", "build:ci": "lerna run build:viewer:ci --stream", "build:demo": "lerna run build:viewer:demo --stream", "build:package": "lerna run build:viewer:package --stream", "build:package-all": "lerna run build:package --parallel --stream", + "dev": "lerna run dev:viewer --stream", + "dev:project": ".scripts/dev.sh", + "dev:orthanc": "lerna run dev:orthanc --stream", + "orthanc:up": "docker-compose -f .docker/Nginx-Orthanc/docker-compose.yml up", "test": "yarn run test:unit", "test:unit": "jest --collectCoverage", "test:unit:ci": "lerna run test:unit:ci --parallel --stream", diff --git a/platform/viewer/.webpack/webpack.pwa.js b/platform/viewer/.webpack/webpack.pwa.js index fa3941b51..e7d709754 100644 --- a/platform/viewer/.webpack/webpack.pwa.js +++ b/platform/viewer/.webpack/webpack.pwa.js @@ -23,10 +23,13 @@ const PUBLIC_DIR = path.join(__dirname, '../public'); const HTML_TEMPLATE = process.env.HTML_TEMPLATE || 'index.html'; const PUBLIC_URL = process.env.PUBLIC_URL || '/'; const APP_CONFIG = process.env.APP_CONFIG || 'config/default.js'; +const PROXY_TARGET = process.env.PROXY_TARGET; +const PROXY_DOMAIN = process.env.PROXY_DOMAIN; module.exports = (env, argv) => { const baseConfig = webpackBase(env, argv, { SRC_DIR, DIST_DIR }); const isProdBuild = process.env.NODE_ENV === 'production'; + const hasProxy = PROXY_TARGET && PROXY_DOMAIN; const mergedConfig = merge(baseConfig, { devtool: isProdBuild ? 'source-map' : 'cheap-module-eval-source-map', @@ -111,6 +114,11 @@ module.exports = (env, argv) => { }, }); + if (hasProxy) { + mergedConfig.devServer.proxy = {}; + mergedConfig.devServer.proxy[PROXY_TARGET] = PROXY_DOMAIN; + } + if (!isProdBuild) { mergedConfig.plugins.push(new webpack.HotModuleReplacementPlugin()); diff --git a/platform/viewer/package.json b/platform/viewer/package.json index 167ada91d..f52130d54 100644 --- a/platform/viewer/package.json +++ b/platform/viewer/package.json @@ -23,10 +23,9 @@ "build:viewer:demo": "cross-env NODE_ENV=production APP_CONFIG=config/demo.js HTML_TEMPLATE=rollbar.html node --max_old_space_size=4096 ./../../node_modules/webpack/bin/webpack.js --progress --config .webpack/webpack.pwa.js", "build:viewer:package": "yarn run build:package", "dev": "cross-env NODE_ENV=development webpack-dev-server --config .webpack/webpack.pwa.js -w", - "dev:orthanc": "cross-env NODE_ENV=development APP_CONFIG=config/docker_nginx-orthanc.js react-scripts start", + "dev:orthanc": "cross-env NODE_ENV=development PROXY_TARGET=/dicom-web PROXY_DOMAIN=http://localhost:8042 APP_CONFIG=config/docker_nginx-orthanc.js webpack-dev-server --config .webpack/webpack.pwa.js -w", "dev:viewer": "yarn run dev", "start": "yarn run dev", - "orthanc:up": "docker-compose -f docker/Nginx-Orthanc/docker-compose.yml up", "test:e2e": "cypress open", "test:unit": "jest --watchAll", "test:unit:ci": "jest --ci --runInBand --collectCoverage"