Compare commits

..
Author SHA1 Message Date
ohif-bot 9e74151b52 chore(release): publish [skip ci]
- @ohif/viewer@0.50.18
2019-09-05 13:09:35 +00:00
Danny Brown 192cc03842 Merge pull request #867 from dannyrb/docs/monorepo-updates-3
docs: monorepo updates
2019-09-05 09:01:09 -04:00
dannyrb c791750f36 docs(data-source): new file locations, react-scripts to webpack, new env variables for proxy 2019-09-05 08:45:11 -04:00
dannyrb 080183c712 docs(installation): build commands, no more roll-up, webpack and PWAs 2019-09-05 07:11:35 -04:00
dannyrb d1289540bd docs(getting-started): build commands, repo links, next steps 2019-09-04 22:22:55 -04:00
dannyrb 7c5b182130 docs(about): Deploy preview --> Live Demo 2019-09-04 22:08:52 -04:00
dannyrb f38605f04c docs(readme): More approachable section title 2019-09-04 22:08:03 -04:00
dannyrb 3498037163 docs(readme): npm links and package descriptions 2019-09-04 21:54:29 -04:00
Danny Brown e2196b1aaf docs: filling in missing readme sections (#866) 2019-09-04 16:22:40 -04:00
ohif-bot 0d02ddd586 chore(release): publish [skip ci]
- @ohif/extension-cornerstone@0.50.4
 - @ohif/viewer@0.50.17
2019-09-04 20:07:11 +00:00
Danny Brown 36c95fb897 ci: parallize terser (#864)
* ci: parallize terser

* Missing NODE_ENV set

* show progress for demo build
2019-09-04 15:58:51 -04:00
ohif-bot e9f8941abd chore(release): publish [skip ci]
- @ohif/extension-cornerstone@0.50.3
 - @ohif/extension-dicom-html@0.50.3
 - @ohif/extension-dicom-microscopy@0.50.4
 - @ohif/extension-dicom-pdf@0.50.3
 - @ohif/extension-vtk@0.50.6
 - @ohif/core@0.50.5
 - @ohif/i18n@0.50.3
 - @ohif/ui@0.50.3
 - @ohif/viewer@0.50.16
2019-09-04 19:15:38 +00:00
Danny Brown 8e96d66859 ci: timeout and publish issues (#861)
* ci: test docs-publish

* Specify to use prod

* Babel should transpile with env set by webpack

* in-progress

* in-progress

* Polyfill for ie11 and edge features

* Ditch polyfills w/ babel - we'll use a service for now

* Bump tools version; shift vtk.js up a layer

* Specify we shouldn't target older than IE 11

* ditch babel plugins that should be covered by preset-env

* Add a top level build demo command

* Let our babel config determine settings

* Same babel fixes as PWA

* Rebuild deps that don't satisfy our target

* Mini helper script for excluding all node_modules, except...

* Shift vtk.js dep up a layer

* Kill core-js

* Export in a node happy way

* Updated yarn lock

* Set NODE_ENV when launching anything w/ WebPack

* docs: updated FAQ

* docs: on browser support

* Add support for redux browser extension

* misc. small clean-up

* docs: Remove roadmap page; add browser-support to sidebar

* Formatting

* Remove roadmap links

* Formatting

* ci: Remove config syntax error

* Simplified bug report template

* update community request template

* Update question's template

* simplify build scripts

* specify new script names

* fix: for measurement api being pruned by minimizer in prod builds

* Use named exports

* Simplify config

* Let's not do so much heavy lifting for a dev-server build

* fix dev build

* Add hotkeys to demo

* fix: jest babel config and env specific configs

* Remove call to non-existant command

* Shift experimental proposal plugin up a layer

* Use `https`

* Try with reduced number of package exceptions

* Try to resolve cypress issue

* Try to fix cypress issue in CI

* Skip https

* Set node_env before building with WebPack

* Watch command output

* ci: no output timeout increase
2019-09-04 15:00:45 -04:00
30 changed files with 347 additions and 162 deletions

No files matched your search

+5 -2
View File
@@ -228,9 +228,12 @@ jobs:
at: ~/repo
# Build & Test
- run:
name: 'Build Demo Site, Upload SourceMaps, Send Deploy Notification'
name: 'Build Demo Site'
command: yarn run build:demo
no_output_timeout: 30m
- run:
name: 'Upload SourceMaps, Send Deploy Notification'
command: |
npx lerna run build:viewer:demo --stream
# export FILE_1=$(find ./build/static/js -type f -name "2.*.js" -exec basename {} \;)
# export FILE_MAIN=$(find ./build/static/js -type f -name "main.*.js" -exec basename {} \;)
# export FILE_RUNTIME_MAIN=$(find ./build/static/js -type f -name "runtime~main.*.js" -exec basename {} \;)
+108 -51
View File
@@ -27,62 +27,106 @@
[![CircleCI][circleci-image]][circleci-url]
[![codecov][codecov-image]][codecov-url]
[![All Contributors](https://img.shields.io/badge/all_contributors-10-orange.svg?style=flat-square)](#contributors)
<!-- prettier-ignore-end -->
## What?
## About
The OHIF Medical Imaging Viewer is for viewing medical images. It can retrieve and load images from most sources and formats; render sets in 2D, 3D, and reconstructed representations; allows for the manipulation, annotation, and serialization of observations; supports internationalization, OpenID Connect, offline use, hotkeys, and many more features.
The OHIF Medical Imaging Viewer is for viewing medical images. It can retrieve
and load images from most sources and formats; render sets in 2D, 3D, and
reconstructed representations; allows for the manipulation, annotation, and
serialization of observations; supports internationalization, OpenID Connect,
offline use, hotkeys, and many more features.
Almost everything offers some degree of customization and configuration. If it doesn't support something you need, we accept pull requests and have an ever improving Extension System.
Almost everything offers some degree of customization and configuration. If it
doesn't support something you need, we accept pull requests and have an ever
improving Extension System.
## Why Choose Us
### Community & Experience
The OHIF Viewer is a collaborative effort that has served as the basis for many active, production, and FDA Cleared medical imaging viewers. It benefits from our extensive community's collective experience, and from the sponsored contributions of individuals, research groups, and commercial organizations.
The OHIF Viewer is a collaborative effort that has served as the basis for many
active, production, and FDA Cleared medical imaging viewers. It benefits from
our extensive community's collective experience, and from the sponsored
contributions of individuals, research groups, and commercial organizations.
### Built to Adapt
...
After more than 5-years of integrating with many companies and organizations,
The OHIF Viewer has been rebuilt from the ground up to better address the
varying workflow and configuration needs of its many users. All of the Viewer's
core features are built using it's own extension system. The same extensibility
that allows us to offer:
- 2D and 3D medical image viewing
- Multiplanar Reconstruction (MPR)
- Maximum Intensity Project (MIP)
- Whole slide microscopy viewing
- PDF and Dicom Structured Report rendering
- User Access Control (UAC)
- Context specific toolbar and side panel content
- and many others
Can be leveraged by you to customize the viewer for your workflow, and to add
any new functionality you may need (and wish to maintain privately without
forking).
### Support
...
We offer support through
[GitHub Issues](https://github.com/OHIF/Viewers/issues/new/choose). You can:
- [Report a Bug 🐛](https://github.com/OHIF/Viewers/issues/new?assignees=&labels=Community%3A+Report+%3Abug%3A&template=---bug-report.md)
- [Request a Feature 🚀](https://github.com/OHIF/Viewers/issues/new?assignees=&labels=Community%3A+Request+%3Ahand%3A&template=---feature-request.md)
- [Ask a Question 🤗](https://github.com/OHIF/Viewers/issues/new?assignees=&labels=Community%3A+Question+%3Aquestion%3A&template=---support-question.md)
For commercial support, academic collaberations, and answers to common
questions; please read our
[documented FAQ](https://docs.ohif.org/frequently-asked-questions.html#does-ohif-offer-commercial-support).
## Quick Start Deployment
> This is only one of many ways to configure and deploy the OHIF Viewer. To learn more about your options, and how to choose the best one for your requirements, check out [our deployment recipes and documentation](https://docs.ohif.org/deployment/).
> This is only one of many ways to configure and deploy the OHIF Viewer. To
> learn more about your options, and how to choose the best one for your
> requirements, check out
> [our deployment recipes and documentation](https://docs.ohif.org/deployment/).
The fastest and easiest way to get started is to include the OHIF Viewer with a script tag. In practice, this is as simple as:
The fastest and easiest way to get started is to include the OHIF Viewer with a
script tag. In practice, this is as simple as:
- Including the following dependencies with script tags:
- [React](https://unpkg.com/react@16/umd/react.production.min.js)
- [React Dom](https://unpkg.com/react-dom@16/umd/react-dom.production.min.js)
- The [OHIF Viewer](https://unpkg.com/@ohif/viewer)
- [React](https://unpkg.com/react@16/umd/react.production.min.js)
- [React Dom](https://unpkg.com/react-dom@16/umd/react-dom.production.min.js)
- The [OHIF Viewer](https://unpkg.com/@ohif/viewer)
- Have an element with an ID of `root` on the page
- Configure the OHIF Viewer at `window.config`:
```js
window.config = {
routerBasename: "/",
routerBasename: '/',
servers: {
dicomWeb: [
{
name: "DCM4CHEE",
qidoRoot: "https://server.dcmjs.org/dcm4chee-arc/aets/DCM4CHEE/rs",
wadoRoot: "https://server.dcmjs.org/dcm4chee-arc/aets/DCM4CHEE/rs",
name: 'DCM4CHEE',
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"
}
]
}
imageRendering: 'wadors',
thumbnailRendering: 'wadors',
},
],
},
};
```
- Install the viewer: `window.OHIFStandaloneViewer.installViewer(window.config);`
- Install the viewer:
`window.OHIFStandaloneViewer.installViewer(window.config);`
This exact setup is demonstrated in this [CodeSandbox](https://codesandbox.io/s/ohif-viewer-script-tag-usage-c4u4t) and in our [Embedding The Viewer](https://docs.ohif.org/deployment/recipes/embedded-viewer.html) deployment recipe.
This exact setup is demonstrated in this
[CodeSandbox](https://codesandbox.io/s/ohif-viewer-script-tag-usage-c4u4t) and
in our
[Embedding The Viewer](https://docs.ohif.org/deployment/recipes/embedded-viewer.html)
deployment recipe.
## Developing
@@ -117,21 +161,23 @@ yarn install
## Commands
These commands are available from the root directory. Each project directory also supports a number of commands that can be found in their respective `README.md` and `project.json` files.
These commands are available from the root directory. Each project directory
also supports a number of commands that can be found in their respective
`README.md` and `project.json` files.
| Yarn Commands | Description |
| -------------------- | ------------------------------------------------------------- |
| **Develop** | |
| `dev` or `start` | Default development experience for Viewer |
| Yarn Commands | Description |
| ---------------------------- | ------------------------------------------------------------- |
| **Develop** | |
| `dev` or `start` | Default development experience for Viewer |
| `dev:project <package-name>` | Replace with `core`, `ui`, `i18n`, `cornerstone`, `vtk`, etc. |
| `test:unit` | Jest multi-project test runner; overall coverage |
| **Deploy** | |
| `build`* | Builds production output for our PWA Viewer |
| `build:package`* | Builds production `commonjs` output for our Viewer |
| `build:package-all`* | Builds commonjs bundles for all projects |
| `test:unit` | Jest multi-project test runner; overall coverage |
| **Deploy** | |
| `build`\* | Builds production output for our PWA Viewer |
| `build:package`\* | Builds production `commonjs` output for our Viewer |
| `build:package-all`\* | Builds commonjs bundles for all projects |
\* - For more information on our different builds, check out our [Deploy Docs][deployment-docs]
\* - For more information on our different builds, check out our [Deploy
Docs][deployment-docs]
## Projects
@@ -169,24 +215,26 @@ more about it in our [Architecture Documentation][ohif-architecture].
These projects comprise the
| Name | Description | Links |
| ------------------------------- | ----------- | ----- |
| [@ohif/core][platform-core] | | NPM |
| [@ohif/i18n][platform-i18n] | | NPM |
| [@ohif/viewer][platform-viewer] | | NPM |
| [@ohif/ui][platform-ui] | | NPM |
| Name | Description | Links |
| ------------------------------- | ---------------------------------------------------------------------------------------------------- | ----------------- |
| [@ohif/core][platform-core] | Business logic and classes that model the data, services, and extensions that are framework agnostic | [NPM][core-npm] |
| [@ohif/i18n][platform-i18n] | Language files and small API for wrapping component/ui text for translations | [NPM][i18n-npm] |
| [@ohif/viewer][platform-viewer] | The OHIF Viewer. Where we consume and configure all platform library's and extensions | [NPM][viewer-npm] |
| [@ohif/ui][platform-ui] | Reusable React components we consume and compose to build our Viewer's UI | [NPM][ui-npm] |
### Extensions
This is a list of Extensions maintained by the OHIF Core team. It's possible to customize and configure these extensions, and you can even create your own. You can [read more about extensions here][ohif-extensions].
This is a list of Extensions maintained by the OHIF Core team. It's possible to
customize and configure these extensions, and you can even create your own. You
can [read more about extensions here][ohif-extensions].
| Name | Description | Links |
| -------------------------------------------------------------- | ----------- | ----- |
| [@ohif/extension-cornestone][extension-cornerstone] | | NPM |
| [@ohif/extension-dicom-html][extension-dicom-html] | | NPM |
| [@ohif/extension-dicom-microscopy][extension-dicom-microscopy] | | NPM |
| [@ohif/extension-dicom-pdf][extension-dicom-pdf] | | NPM |
| [@ohif/extension-vtk][extension-vtk] | | NPM |
| Name | Description | Links |
| -------------------------------------------------------------- | ------------------------------------------------------- | ---------------------- |
| [@ohif/extension-cornestone][extension-cornerstone] | 2D image viewing, annotation, and segementation tools | [NPM][cornerstone-npm] |
| [@ohif/extension-dicom-html][extension-dicom-html] | Support for viewing DICOM SR as rendered HTML | [NPM][html-npm] |
| [@ohif/extension-dicom-microscopy][extension-dicom-microscopy] | Whole slide microscopy viewing | [NPM][microscopy-npm] |
| [@ohif/extension-dicom-pdf][extension-dicom-pdf] | View DICOM wrapped PDFs in a viewport | [NPM][pdf-npm] |
| [@ohif/extension-vtk][extension-vtk] | Volume rendering, reconstruction, and 3D visualizations | [NPM][vtk-npm] |
## Acknowledgments
@@ -225,11 +273,11 @@ MIT © [OHIF](https://github.com/OHIF)
[netlify-image]: https://api.netlify.com/api/v1/badges/a5d369ab-18a6-41c3-bcde-83805205ac7f/deploy-status
[netlify-url]: https://app.netlify.com/sites/ohif/deploys
[all-contributors-image]: https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square
[contributing-url]: https://github.com/OHIF/Viewers/blob/react/CONTRIBUTING.md
[contributing-url]: https://github.com/OHIF/Viewers/blob/master/CONTRIBUTING.md
[circleci-image]: https://circleci.com/gh/OHIF/Viewers.svg?style=svg
[circleci-url]: https://circleci.com/gh/OHIF/Viewers
[codecov-image]: https://codecov.io/gh/OHIF/Viewers/branch/react/graph/badge.svg
[codecov-url]: https://codecov.io/gh/OHIF/Viewers/branch/react
[codecov-image]: https://codecov.io/gh/OHIF/Viewers/branch/master/graph/badge.svg
[codecov-url]: https://codecov.io/gh/OHIF/Viewers/branch/master
[prettier-image]: https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square
[prettier-url]: https://github.com/prettier/prettier
[semantic-image]: https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg
@@ -256,13 +304,22 @@ MIT © [OHIF](https://github.com/OHIF)
[extensions-url]: https://docs.ohif.org/advanced/extensions.html
<!-- Platform -->
[platform-core]: platform/core/README.md
[core-npm]: https://www.npmjs.com/package/@ohif/core
[platform-i18n]: platform/i18n/README.md
[i18n-npm]: https://www.npmjs.com/package/@ohif/i18n
[platform-ui]: platform/ui/README.md
[ui-npm]: https://www.npmjs.com/package/@ohif/ui
[platform-viewer]: platform/viewer/README.md
[viewer-npm]: https://www.npmjs.com/package/@ohif/viewer
<!-- Extensions -->
[extension-cornerstone]: extensions/cornerstone/README.md
[cornerstone-npm]: https://www.npmjs.com/package/@ohif/extension-cornerstone
[extension-dicom-html]: extensions/dicom-html/README.md
[html-npm]: https://www.npmjs.com/package/@ohif/extension-dicom-html
[extension-dicom-microscopy]: extensions/dicom-microscopy/README.md
[microscopy-npm]: https://www.npmjs.com/package/@ohif/extension-dicom-microscopy
[extension-dicom-pdf]: extensions/dicom-pdf/README.md
[pdf-npm]: https://www.npmjs.com/package/@ohif/extension-dicom-pdf
[extension-vtk]: extensions/vtk/README.md
[vtk-npm]: https://www.npmjs.com/package/@ohif/extension-vtk
<!-- prettier-ignore-end -->
+3 -3
View File
@@ -1,7 +1,7 @@
<div class='row'>
<div class='column' style='text-align: right; padding: 0 20px'>
<strong>Looking for a Deploy Preview?</strong>
<a onclick="function redirect() { window.location.href='/demo/'; } redirect();">Deploy Preview for Viewer</a>
<strong>Looking for a Live Demo?</strong>
<a href="http://viewer.ohif.org/">Preview The OHIF Viewer</a>
</div>
<div class='column' style='text-align: left; padding: 0 20px'>
<a href="https://www.netlify.com">
@@ -33,7 +33,7 @@ yourself unable to extend the viewer for your purposes, please reach out via our
[GitHub issues][gh-issues]. We are actively seeking feedback on ways to improve
our integration and extension points.
## Where to Next?
## Where to next?
Check out these helpful links:
+29 -19
View File
@@ -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
[`<project-root>/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].
[`<project-root>/.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 `<project-root>/public/config/default.js`.
Here is what that configuration looks like:
By default, our app uses the file at
`<project-root>/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
<!-- Archives -->
[dcm4chee]: https://github.com/dcm4che/dcm4chee-arc-light
[dcm4chee-docker]: https://github.com/dcm4che/dcm4chee-arc-light/wiki/Running-on-Docker
+15 -15
View File
@@ -24,8 +24,7 @@ graphic that illustrates this setup][triangular-workflow].
Alternatively, if you intend to use the OHIF Viewer as a starting point, and you
aren't as concerned with syncing updates, then follow these steps:
1. Navigate to the [OHIF/Viewers/tree/react][ohif-viewers-react-repo] repository
and branch
1. Navigate to the [OHIF/Viewers][ohif-viewers] repository
2. Click `Clone or download`, and then `Download ZIP`
3. Use the contents of the `.zip` file as a starting point for your viewer
@@ -39,6 +38,8 @@ aren't as concerned with syncing updates, then follow these steps:
- [Node.js & NPM](https://nodejs.org/en/)
- [Yarn](https://yarnpkg.com/en/)
- Yarn workspaces should be enabled:
- `yarn config set workspaces-experimental true`
### Kick the tires
@@ -50,21 +51,18 @@ following commands:
yarn install
# Start local development server
yarn start
yarn run dev
```
You should see the following output:
```bash
Compiled successfully!
@ohif/viewer: i 「wds」: Project is running at http://localhost:3000/
@ohif/viewer: i 「wds」: webpack output is served from /
@ohif/viewer: i 「wds」: Content not from webpack is served from D:\code\ohif\Viewers\platform\viewer
@ohif/viewer: i 「wds」: 404s will fallback to /index.html
You can now view ohif-viewer in the browser.
Local: http://localhost:3000/
On Your Network: http://10.74.20.83:3000/
Note that the development build is not optimized.
To create a production build, use yarn build.
# And a list of all generated files
```
### 🎉 Celebrate 🎉
@@ -81,15 +79,17 @@ To create a production build, use yarn build.
```bash
# Build static assets to host a PWA
yarn run build:web
yarn run build
# Build packaged output
# Build packaged output (script-tag use)
yarn run build:package
```
## Next Steps
...
Take a look at the sidebar. Depending on how you intend to use The OHIF Viewer,
different topics may be more pertinent than others. At a minimum, reading "The
Essentials" and the deployment recipes should be a good starting point.
## Troubleshooting
@@ -111,5 +111,5 @@ yarn run build:package
[sync-changes]: https://help.github.com/en/articles/syncing-a-fork
[triangular-workflow]: https://github.blog/2015-07-29-git-2-5-including-multiple-worktrees-and-triangular-workflows/#improved-support-for-triangular-workflows
[ohif-viewers-repo]: https://github.com/OHIF/Viewers
[ohif-viewers-react-repo]: https://github.com/OHIF/Viewers/tree/react
[ohif-viewers]: https://github.com/OHIF/Viewers
<!-- prettier-ignore-end -->
+33 -19
View File
@@ -5,38 +5,52 @@ processes:
```bash
# Static Asset output: For deploying PWAs
yarn run build:web
yarn run build
# Single `.js` script, for embedding viewer into existing apps
yarn run build:package
```
## create-react-app (PWA)
## Progressive Web Application (PWA)
> [create-react-app](https://github.com/facebook/create-react-app) provides
> pre-configured build process for developing front-end applications with
> [React](https://reactjs.org/).
> [Progressive Web Apps][pwa] are a new breed of web applications that meet the
> [following requirements][pwa-checklist]. Notably, targeting a PWA allows us
> provide a reliable, fast, and engaging experience across different devices and
> network conditions.
The ohif-viewer package can be run as a create-react-app application. This is
useful for development, debugging, or evolving the OHIF Viewer into your own
custom imaging application.
The OHIF Viewer is maintained as a [monorepo][monorepo]. We use WebPack to build
the many small static assets that comprise our application. Also generated is an
`index.html` that will serve as an entry point for loading configuration and the
application, as well as a `service-worker` that can intelligently cache files so
that subsequent requests are from the local file system instead of over the
network.
You can read more about this particular strategy in our
[Build for Production Deployment Guide](./../deployment/recipes/build-for-production.md)
## Rollup (Packaged Script)
## Commonjs Bundle (Packaged Script)
> [Rollup](https://rollupjs.org/guide/en) is a module bundler for JavaScript. It
> uses the new standardized format for code modules included in the ES6 revision
> of JavaScript.
The [@ohif/viewer][viewer-npm] package is built with WebPack to provide a React
component that can be dropped into a larger application. The `OHIFViewer`
component is the entire viewer, configurable via React `props`. This is useful
for including the OHIF Viewer in a larger web application, as the entire
application can be provided via a `<script>` tag with no build process required.
The [ohif-viewer](https://www.npmjs.com/package/ohif-viewer) package can be
built with Rollup to provide a set of React components which can be dropped into
a larger application. Specifically, the ohif-viewer package provides a React
component named `OHIFViewer` which is the entire viewer, configurable via React
`props`. This is useful for including the OHIF Viewer in a larger web
application, as the entire application can be provided via a `<script>` tag with
no build process required.
The bundle is not as performant or as optimized as the PWA build. It includes
fonts, styles, and the core extensions. If you find yourself facing performance
issues, you may wish to tweak what's included in this bundle or switch to the
PWA build.
You can read more about this particular strategy in our
[Embedded Viewer Deployment Guide](./../deployment/recipes/embedded-viewer.md)
<!--
Links
-->
<!-- prettier-ignore-start -->
[pwa]: https://developers.google.com/web/progressive-web-apps/
[pwa-checklist]: https://developers.google.com/web/progressive-web-apps/checklist
[monorepo]: https://github.com/OHIF/Viewers/issues/768
[viewer-npm]: https://www.npmjs.com/package/@ohif/viewer
<!-- prettier-ignore-end -->
+16
View File
@@ -3,6 +3,22 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## [0.50.4](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@0.50.3...@ohif/extension-cornerstone@0.50.4) (2019-09-04)
**Note:** Version bump only for package @ohif/extension-cornerstone
## [0.50.3](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@0.50.2...@ohif/extension-cornerstone@0.50.3) (2019-09-04)
**Note:** Version bump only for package @ohif/extension-cornerstone
## [0.50.2](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@0.50.1...@ohif/extension-cornerstone@0.50.2) (2019-09-04)
+3 -3
View File
@@ -1,6 +1,6 @@
{
"name": "@ohif/extension-cornerstone",
"version": "0.50.2",
"version": "0.50.4",
"description": "OHIF extension for Cornerstone",
"author": "OHIF",
"license": "MIT",
@@ -20,9 +20,9 @@
"access": "public"
},
"scripts": {
"dev": "webpack --config .webpack/webpack.dev.js --watch --debug --output-pathinfo",
"dev": "cross-env NODE_ENV=development webpack --config .webpack/webpack.dev.js --watch --debug --output-pathinfo",
"dev:cornerstone": "yarn run dev",
"build": "webpack --config .webpack/webpack.prod.js",
"build": "cross-env NODE_ENV=production webpack --config .webpack/webpack.prod.js",
"build:package": "yarn run build",
"prepublishOnly": "yarn run build",
"start": "yarn run dev"
+8
View File
@@ -3,6 +3,14 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## [0.50.3](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-html@0.50.2...@ohif/extension-dicom-html@0.50.3) (2019-09-04)
**Note:** Version bump only for package @ohif/extension-dicom-html
## [0.50.2](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-html@0.50.1...@ohif/extension-dicom-html@0.50.2) (2019-09-04)
+2 -2
View File
@@ -1,6 +1,6 @@
{
"name": "@ohif/extension-dicom-html",
"version": "0.50.2",
"version": "0.50.3",
"description": "OHIF extension for rendering structured reports to HTML",
"author": "OHIF",
"license": "MIT",
@@ -20,7 +20,7 @@
"access": "public"
},
"scripts": {
"dev": "webpack --config .webpack/webpack.dev.js --watch --debug --output-pathinfo",
"dev": "cross-env NODE_ENV=production webpack --config .webpack/webpack.dev.js --watch --debug --output-pathinfo",
"dev:dicom-html": "yarn run dev",
"build": "webpack --config .webpack/webpack.prod.js",
"build:package": "yarn run build",
+8
View File
@@ -3,6 +3,14 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## [0.50.4](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-microscopy@0.50.3...@ohif/extension-dicom-microscopy@0.50.4) (2019-09-04)
**Note:** Version bump only for package @ohif/extension-dicom-microscopy
## [0.50.3](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-microscopy@0.50.2...@ohif/extension-dicom-microscopy@0.50.3) (2019-09-04)
+3 -3
View File
@@ -1,6 +1,6 @@
{
"name": "@ohif/extension-dicom-microscopy",
"version": "0.50.3",
"version": "0.50.4",
"description": "OHIF extension for Dicom Microscopy",
"author": "OHIF",
"license": "MIT",
@@ -20,9 +20,9 @@
"yarn": ">=1.16.0"
},
"scripts": {
"dev": "webpack --config .webpack/webpack.dev.js --watch --debug --output-pathinfo",
"dev": "cross-env NODE_ENV=development webpack --config .webpack/webpack.dev.js --watch --debug --output-pathinfo",
"dev:dicom-microscopy": "yarn run dev",
"build": "webpack --config .webpack/webpack.prod.js",
"build": "cross-env NODE_ENV=production webpack --config .webpack/webpack.prod.js",
"build:package": "yarn run build",
"prepublishOnly": "yarn run build",
"start": "yarn run dev"
+8
View File
@@ -3,6 +3,14 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## [0.50.3](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-pdf@0.50.2...@ohif/extension-dicom-pdf@0.50.3) (2019-09-04)
**Note:** Version bump only for package @ohif/extension-dicom-pdf
## [0.50.2](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-pdf@0.50.1...@ohif/extension-dicom-pdf@0.50.2) (2019-09-04)
+3 -3
View File
@@ -1,6 +1,6 @@
{
"name": "@ohif/extension-dicom-pdf",
"version": "0.50.2",
"version": "0.50.3",
"description": "OHIF extension for Dicom PDF",
"author": "OHIF",
"license": "MIT",
@@ -20,9 +20,9 @@
"README.md"
],
"scripts": {
"dev": "webpack --config .webpack/webpack.dev.js --watch --debug --output-pathinfo",
"dev": "cross-env NODE_ENV=development webpack --config .webpack/webpack.dev.js --watch --debug --output-pathinfo",
"dev:dicom-pdf": "yarn run dev",
"build": "webpack --config .webpack/webpack.prod.js",
"build": "cross-env NODE_ENV=production webpack --config .webpack/webpack.prod.js",
"build:package": "yarn run build",
"prepublishOnly": "yarn run build",
"start": "yarn run dev"
+8
View File
@@ -3,6 +3,14 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## [0.50.6](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.50.5...@ohif/extension-vtk@0.50.6) (2019-09-04)
**Note:** Version bump only for package @ohif/extension-vtk
## [0.50.5](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.50.4...@ohif/extension-vtk@0.50.5) (2019-09-04)
+5 -5
View File
@@ -1,6 +1,6 @@
{
"name": "@ohif/extension-vtk",
"version": "0.50.5",
"version": "0.50.6",
"description": "OHIF extension for VTK.js",
"author": "OHIF",
"license": "MIT",
@@ -21,9 +21,9 @@
"yarn": ">=1.16.0"
},
"scripts": {
"dev": "webpack --config .webpack/webpack.dev.js --watch --debug --output-pathinfo",
"dev": "cross-env NODE_ENV=development webpack --config .webpack/webpack.dev.js --watch --debug --output-pathinfo",
"dev:dicom-vtk": "yarn run dev",
"build": "webpack --config .webpack/webpack.prod.js",
"build": "cross-env NODE_ENV=production webpack --config .webpack/webpack.prod.js",
"build:package": "yarn run build",
"prepublishOnly": "yarn run build",
"start": "yarn run dev"
@@ -51,8 +51,8 @@
"react-vtkjs-viewport": "0.0.11"
},
"devDependencies": {
"@ohif/core": "^0.50.4",
"@ohif/ui": "^0.50.2",
"@ohif/core": "^0.50.5",
"@ohif/ui": "^0.50.3",
"cornerstone-tools": "^3.13.0",
"cornerstone-wado-image-loader": "^3.0.0",
"dcmjs": "^0.5.1",
+4 -2
View File
@@ -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",
+8
View File
@@ -3,6 +3,14 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## [0.50.5](https://github.com/OHIF/Viewers/compare/@ohif/core@0.50.4...@ohif/core@0.50.5) (2019-09-04)
**Note:** Version bump only for package @ohif/core
## [0.50.4](https://github.com/OHIF/Viewers/compare/@ohif/core@0.50.3...@ohif/core@0.50.4) (2019-09-04)
+2 -2
View File
@@ -1,6 +1,6 @@
{
"name": "@ohif/core",
"version": "0.50.4",
"version": "0.50.5",
"description": "Generic business logic for web-based medical imaging applications",
"author": "OHIF Core Team",
"license": "MIT",
@@ -23,7 +23,7 @@
"scripts": {
"dev": "jest --watchAll",
"dev:core": "yarn run dev",
"build": "webpack --config .webpack/webpack.prod.js",
"build": "cross-env NODE_ENV=production webpack --config .webpack/webpack.prod.js",
"build:package": "yarn run build",
"prepublishOnly": "yarn run build",
"start": "yarn run dev",
+8
View File
@@ -3,6 +3,14 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## [0.50.3](https://github.com/OHIF/Viewers/compare/@ohif/i18n@0.50.2...@ohif/i18n@0.50.3) (2019-09-04)
**Note:** Version bump only for package @ohif/i18n
## [0.50.2](https://github.com/OHIF/Viewers/compare/@ohif/i18n@0.50.1...@ohif/i18n@0.50.2) (2019-09-04)
+3 -3
View File
@@ -1,6 +1,6 @@
{
"name": "@ohif/i18n",
"version": "0.50.2",
"version": "0.50.3",
"description": "Internationalization library for The OHIF Viewer",
"author": "OHIF",
"license": "MIT",
@@ -20,9 +20,9 @@
"access": "public"
},
"scripts": {
"dev": "webpack --config .webpack/webpack.dev.js --watch --debug --output-pathinfo",
"dev": "cross-env NODE_ENV=development webpack --config .webpack/webpack.dev.js --watch --debug --output-pathinfo",
"dev:i18n": "yarn run dev",
"build": "webpack --config .webpack/webpack.prod.js",
"build": "cross-env NODE_ENV=production webpack --config .webpack/webpack.prod.js",
"build:package": "yarn run build",
"prepublishOnly": "yarn run build",
"pullTranslations": "./pullTranslations.sh",
+8
View File
@@ -3,6 +3,14 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## [0.50.3](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.50.2...@ohif/ui@0.50.3) (2019-09-04)
**Note:** Version bump only for package @ohif/ui
## [0.50.2](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.50.1...@ohif/ui@0.50.2) (2019-09-04)
+2 -2
View File
@@ -1,6 +1,6 @@
{
"name": "@ohif/ui",
"version": "0.50.2",
"version": "0.50.3",
"description": "A set of React components for Medical Imaging Viewers",
"author": "OHIF Contributors",
"license": "MIT",
@@ -23,7 +23,7 @@
"dev": "docz dev",
"dev:ui": "yarn run dev",
"docs": "docz build",
"build": "webpack --config .webpack/webpack.prod.js",
"build": "cross-env NODE_ENV=production webpack --config .webpack/webpack.prod.js",
"build:package": "yarn run build",
"prepublishOnly": "yarn run build",
"test:unit": "jest --watchAll",
+17 -13
View File
@@ -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',
@@ -49,19 +52,6 @@ module.exports = (env, argv) => {
optimization: {
minimize: isProdBuild,
sideEffects: true,
// // TODO: For more granular minimize
// // minimizer: [
// // new TerserJSPlugin({
// // sourceMap: true,
// // terserOptions: {
// // sourceMap: {
// // file: '[name].map',
// // url: 'https://my-host/[url]',
// // },
// // },
// // }),
// // new OptimizeCSSAssetsPlugin({}),
// // ],
},
module: {
rules: [...extractStyleChunksRule(isProdBuild)],
@@ -124,8 +114,22 @@ module.exports = (env, argv) => {
},
});
if (hasProxy) {
mergedConfig.devServer.proxy = {};
mergedConfig.devServer.proxy[PROXY_TARGET] = PROXY_DOMAIN;
}
if (!isProdBuild) {
mergedConfig.plugins.push(new webpack.HotModuleReplacementPlugin());
//
mergedConfig.optimization.minimizer = [
new TerserJSPlugin({
sourceMap: true,
parallel: true,
}),
new OptimizeCSSAssetsPlugin({}),
];
}
return mergedConfig;
+24
View File
@@ -3,6 +3,30 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## [0.50.18](https://github.com/OHIF/Viewers/compare/@ohif/viewer@0.50.17...@ohif/viewer@0.50.18) (2019-09-05)
**Note:** Version bump only for package @ohif/viewer
## [0.50.17](https://github.com/OHIF/Viewers/compare/@ohif/viewer@0.50.16...@ohif/viewer@0.50.17) (2019-09-04)
**Note:** Version bump only for package @ohif/viewer
## [0.50.16](https://github.com/OHIF/Viewers/compare/@ohif/viewer@0.50.15...@ohif/viewer@0.50.16) (2019-09-04)
**Note:** Version bump only for package @ohif/viewer
## [0.50.15](https://github.com/OHIF/Viewers/compare/@ohif/viewer@0.50.14...@ohif/viewer@0.50.15) (2019-09-04)
+14 -15
View File
@@ -1,6 +1,6 @@
{
"name": "@ohif/viewer",
"version": "0.50.15",
"version": "0.50.18",
"description": "OHIF Viewer",
"author": "OHIF Contributors",
"license": "MIT",
@@ -17,16 +17,15 @@
},
"proxy": "http://localhost:8042",
"scripts": {
"build:package": "cross-env NODE_ENV=production node --max_old_space_size=8192 ./../../node_modules/webpack/bin/webpack.js --config .webpack/webpack.commonjs.js",
"build:viewer": "cross-env NODE_ENV=production node --max_old_space_size=8192 ./../../node_modules/webpack/bin/webpack.js --config .webpack/webpack.pwa.js",
"build:viewer:ci": "cross-env NODE_ENV=production PUBLIC_URL=/pwa/ APP_CONFIG=config/netlify.js node --max_old_space_size=8192 ./../../node_modules/webpack/bin/webpack.js --config .webpack/webpack.pwa.js",
"build:viewer:demo": "cross-env NODE_ENV=production APP_CONFIG=config/demo.js HTML_TEMPLATE=rollbar.html node --max_old_space_size=8192 ./../../node_modules/webpack/bin/webpack.js --config .webpack/webpack.pwa.js",
"build:package": "cross-env NODE_ENV=production node --max_old_space_size=4096 ./../../node_modules/webpack/bin/webpack.js --config .webpack/webpack.commonjs.js",
"build:viewer": "cross-env NODE_ENV=production node --max_old_space_size=4096 ./../../node_modules/webpack/bin/webpack.js --config .webpack/webpack.pwa.js",
"build:viewer:ci": "cross-env NODE_ENV=production PUBLIC_URL=/pwa/ APP_CONFIG=config/netlify.js node --max_old_space_size=4096 ./../../node_modules/webpack/bin/webpack.js --config .webpack/webpack.pwa.js",
"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=developmen 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"
@@ -41,14 +40,14 @@
},
"dependencies": {
"@babel/runtime": "^7.5.5",
"@ohif/core": "^0.50.4",
"@ohif/extension-cornerstone": "^0.50.2",
"@ohif/extension-dicom-html": "^0.50.2",
"@ohif/extension-dicom-microscopy": "^0.50.3",
"@ohif/extension-dicom-pdf": "^0.50.2",
"@ohif/extension-vtk": "^0.50.5",
"@ohif/i18n": "^0.50.2",
"@ohif/ui": "^0.50.2",
"@ohif/core": "^0.50.5",
"@ohif/extension-cornerstone": "^0.50.4",
"@ohif/extension-dicom-html": "^0.50.3",
"@ohif/extension-dicom-microscopy": "^0.50.4",
"@ohif/extension-dicom-pdf": "^0.50.3",
"@ohif/extension-vtk": "^0.50.6",
"@ohif/i18n": "^0.50.3",
"@ohif/ui": "^0.50.3",
"@tanem/react-nprogress": "^1.1.25",
"classnames": "^2.2.6",
"core-js": "^3.2.1",