diff --git a/README-react.md b/README-react.md deleted file mode 100644 index 9f4a1a5b8..000000000 --- a/README-react.md +++ /dev/null @@ -1,32 +0,0 @@ -# OHIF Viewer (React Version) - -Disclaimer: Work in Progress - -## To run locally - -1. `yarn install` -1. `yarn start` -1. `Go to http://localhost:5000` - -To user another DICOMWeb endpoint, adapt index.js - -## To include in your projects - -Please refer to the example in the example directory. To set the DICOMWeb -endpoint and do other customization, adapt index.html. - -### Build - -1. `yarn install` -1. `yarn build` - -### Run the example - -1. `cd example` -1. `yarn install` -1. `yarn start` -1. `Go to http://localhost:5000` - -## License - -MIT © [OHIF](https://github.com/OHIF) diff --git a/docs/latest/SUMMARY.md b/docs/latest/SUMMARY.md index 54581e9e8..b483ba885 100644 --- a/docs/latest/SUMMARY.md +++ b/docs/latest/SUMMARY.md @@ -36,13 +36,16 @@ - [Stand-alone](deployment/index.md#stand-alone-viewer) - [Data]() - Recipes - - [Embedding the Viewer](deployment/recipes/embedded-viewer.md)) - - [PWA: Static]() - - [PWA: Docker]() - - [PWA: Nginx + Orthanc]() - - [PWA: Nginx + dcm4chee]() - - [PWA: Nginx + DICOMCloud]() - - [PWA: User Access Control]() + - Script Include + - [Embedding the Viewer](deployment/recipes/embedded-viewer.md) + - Stand-Alone + - [Build for Production](deployment/recipes/build-for-production.md) + - [Static]() + - [Docker]() + - [Nginx + Orthanc]() + - [Nginx + dcm4chee]() + - [Nginx + DICOMCloud]() + - [User Access Control]() --- diff --git a/docs/latest/deployment/index.md b/docs/latest/deployment/index.md index 178322173..88e2a265b 100644 --- a/docs/latest/deployment/index.md +++ b/docs/latest/deployment/index.md @@ -62,7 +62,7 @@ deployment experience. "Building", or creating, the files you will need is the same regardless of the web host you choose. You can find detailed instructions on how to configure and build the OHIF Viewer in our -["Build for Production" guide](./build-for-production.md). +["Build for Production" guide](./recipes/build-for-production.md). ##### Part 2 - Host Your App diff --git a/docs/latest/deployment/recipes/build-for-production.md b/docs/latest/deployment/recipes/build-for-production.md index 74ee3b552..6ab01c731 100644 --- a/docs/latest/deployment/recipes/build-for-production.md +++ b/docs/latest/deployment/recipes/build-for-production.md @@ -1,8 +1,10 @@ # Build for Production -Note about setting up for contributing, then skip X +> If you've already followed the +> ["Getting Started" Guide](/essentials/getting-started.md), you can skip ahead +> to [Configuration](#configuration) -## Overview? +## Overview ### Build Machine Requirements @@ -10,11 +12,11 @@ Note about setting up for contributing, then skip X - [Yarn](https://yarnpkg.com/lang/en/docs/install/) - [Git](https://www.atlassian.com/git/tutorials/install-git) -### Get a Copy of the source +### Getting the Code _With Git:_ -```shell +```bash # Clone the remote repository to your local machine git clone https://github.com/OHIF/Viewers.git @@ -29,36 +31,92 @@ _From .zip:_ [OHIF/Viewers: react.zip](https://github.com/OHIF/Viewers/archive/react.zip) -### Restore Dependencies? +### Restore Dependencies & Build -... - -### Configure? - -... - -- env vars -- `REACT_APP_*` -- config file(s) - -### Build - -From your projects +Open your terminal, and navigate to the directory containing the source files. +Next run these commands: ```js +// Restore dependencies +yarn install + +// Build source code for production yarn run build:web ``` -```js -file tree of project, highlighting contents in `/buld` +If everything worked as expected, you should have a new `build/` directory in +the project's folder. It should roughly resemble the following: + +```bash +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` section](./../index.md#data) of our Deployment +> Guide, or `Getting Started`'s +> ["Set up a local DICOM server"](./../../essentials/getting-started.md#set-up-a-local-dicom-server), +> 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`](https://github.com/OHIF/Viewers/blob/react/public/config/default.js). +When we build, the `%REACT_APP_CONFIG%` value in +our[`/public/index.html`](https://github.com/OHIF/Viewers/blob/react/public/index.html#L12-L15)`file is substituted for the correct configuration file's name. Ultimately setting the`window.config` +equal to our configuration file's value. + +- Modify its values directly +- Create a new config file, and set the `REACT_APP_CONFIG` environement variable +- + +The build process knows which file to use based on 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](https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables#adding-temporary-environment-variables-in-your-shell) +- [Add environment specific variables in `.env` file(s)](https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables#adding-development-environment-variables-in-env) +- + +* env vars +* `REACT_APP_*` +* config file(s) + ## Next Steps ### Deploying our Production Build TODO: List of recipes +### 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: + +```js +// 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 @@ -71,6 +129,12 @@ web application. For a starting point, check out this repository's own use of: [generateStaticSite.sh][generatestaticsite.sh] - [Semantic-Release][semantic-release]: [.releaserc][releaserc] +## Troubleshooting + +> Issues and resolutions for common GitHub issues will be summarized here + +... + [circleci]: https://circleci.com/gh/OHIF/Viewers [circleci-config]: https://github.com/OHIF/Viewers/blob/react/.circleci/config.yml diff --git a/package.json b/package.json index 6940bcce8..68929a2ae 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,7 @@ "dev": "yarn run preBuild && cross-env PORT=5000 react-scripts start", "dev:debug": "cross-env PORT=5000 react-scripts start", "build:package": "yarn run preBuild && node --max-old-space-size=4096 node_modules/rollup/bin/rollup -c", - "build:package:ci": "yarn run preBuild && cross-env REACT_APP_CONFIG=config/default node --max-old-space-size=4096 node_modules/rollup/bin/rollup -c", + "build:package:ci": "yarn run preBuild && cross-env REACT_APP_CONFIG=config/default.js node --max-old-space-size=4096 node_modules/rollup/bin/rollup -c", "build:web": "yarn run preBuild && react-scripts --max_old_space_size=4096 build", "build:web:ci": "yarn run preBuild && react-scripts --max_old_space_size=4096 build && cpx 'build/**/*' docs/latest/_book/demo --verbose", "lint": "eslint -c .eslintrc --fix src && prettier --single-quote --write src/**/*.{js,jsx,json,css}", diff --git a/src/utils/index.test.js b/src/utils/index.test.js new file mode 100644 index 000000000..78174122a --- /dev/null +++ b/src/utils/index.test.js @@ -0,0 +1,11 @@ +import * as utils from './index.js' + +describe('utils', () => { + it('has the expected exports', () => { + const utilExports = Object.keys(utils).sort() + + expect(utilExports).toEqual( + ['getUserManagerForOpenIdConnectClient', 'initWebWorkers'].sort() + ) + }) +})