othmane/ohif-viewer
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

docs(installation): build commands, no more roll-up, webpack and PWAs

Browse Source
This commit is contained in:
dannyrb 2019-09-05 07:11:35 -04:00
parent d1289540bd
commit 080183c712
1 changed files with 33 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
docs/latest/essentials/installation.md
View File

@ -5,38 +5,52 @@ processes:
```bash ```bash
# Static Asset output: For deploying PWAs # Static Asset output: For deploying PWAs
yarn run build:web yarn run build
# Single `.js` script, for embedding viewer into existing apps # Single `.js` script, for embedding viewer into existing apps
yarn run build:package yarn run build:package
``` ```
## create-react-app (PWA) ## Progressive Web Application (PWA)
> [create-react-app](https://github.com/facebook/create-react-app) provides > [Progressive Web Apps][pwa] are a new breed of web applications that meet the
> pre-configured build process for developing front-end applications with > [following requirements][pwa-checklist]. Notably, targeting a PWA allows us
> [React](https://reactjs.org/). > 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 The OHIF Viewer is maintained as a [monorepo][monorepo]. We use WebPack to build
useful for development, debugging, or evolving the OHIF Viewer into your own the many small static assets that comprise our application. Also generated is an
custom imaging application. `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 You can read more about this particular strategy in our
[Build for Production Deployment Guide](./../deployment/recipes/build-for-production.md) [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 The [@ohif/viewer][viewer-npm] package is built with WebPack to provide a React
> uses the new standardized format for code modules included in the ES6 revision component that can be dropped into a larger application. The `OHIFViewer`
> of JavaScript. 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 The bundle is not as performant or as optimized as the PWA build. It includes
built with Rollup to provide a set of React components which can be dropped into fonts, styles, and the core extensions. If you find yourself facing performance
a larger application. Specifically, the ohif-viewer package provides a React issues, you may wish to tweak what's included in this bundle or switch to the
component named `OHIFViewer` which is the entire viewer, configurable via React PWA build.
`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.
You can read more about this particular strategy in our You can read more about this particular strategy in our
[Embedded Viewer Deployment Guide](./../deployment/recipes/embedded-viewer.md) [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 -->