Merge pull request #410 from dannyrb/deploying-static-site-2

docs: stand-alone static deploy

README-react.md

@@ -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)

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))
+  - Script Include
-  - [PWA: Static]()
+    - [Embedding the Viewer](deployment/recipes/embedded-viewer.md)
-  - [PWA: Docker]()
+  - Stand-Alone
-  - [PWA: Nginx + Orthanc]()
+    - [Build for Production](deployment/recipes/build-for-production.md)
-  - [PWA: Nginx + dcm4chee]()
+    - [Static]()
-  - [PWA: Nginx + DICOMCloud]()
+    - [Docker]()
-  - [PWA: User Access Control]()
+    - [Nginx + Orthanc]()
+    - [Nginx + dcm4chee]()
+    - [Nginx + DICOMCloud]()
+    - [User Access Control]()
 
 ---
 

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
 

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
 
-...
+Open your terminal, and navigate to the directory containing the source files.
-
+Next run these commands:
-### Configure?
-
-...
-
-- env vars
-- `REACT_APP_*`
-- config file(s)
-
-### Build
-
-From your projects
 
 ```js
+// Restore dependencies
+yarn install
+
+// Build source code for production
 yarn run build:web
 ```
 
-```js
+If everything worked as expected, you should have a new `build/` directory in
-file tree of project, highlighting contents in `/buld`
+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
+
+...
+
 <!-- prettier-ignore-start -->
 [circleci]: https://circleci.com/gh/OHIF/Viewers
 [circleci-config]: https://github.com/OHIF/Viewers/blob/react/.circleci/config.yml

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}",

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()
+    )
+  })
+})