diff --git a/README.md b/README.md index c967b4b04..a77995015 100644 --- a/README.md +++ b/README.md @@ -163,7 +163,7 @@ Links: [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 +[codecov-url]: https://codecov.io/gh/OHIF/Viewers/branch/react [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 diff --git a/docs/latest/deployment/index.md b/docs/latest/deployment/index.md index e6fa67155..178322173 100644 --- a/docs/latest/deployment/index.md +++ b/docs/latest/deployment/index.md @@ -48,8 +48,25 @@ _In the future:_ #### Hosted Static Assets -_blocking:_ Generate files from `npm script` that we can host. IE. production -ready build output +At the end of the day, a production OHIF Viewer instance is a collection of +HTML, CSS, JS, Font Files, and Images. We "build" those files from our +`source code` with configuration specific to our project. We then make those +files publicly accessible by hosting them on a Web Server. + +If you have not deployed a web application before, this may be a good time to +[reach out for help](/help.md), as these steps assume prior web development and +deployment experience. + +##### Part 1 - Build Production Assets + +"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). + +##### Part 2 - Host Your App + +There are a lot of [benefits to hosting static assets][host-static-assets] - AWS S3 + Cloudfront - GCP + Cloudflare @@ -115,5 +132,6 @@ support it yet, but it is gaining wider adoption. [app-store]: https://medium.freecodecamp.org/i-built-a-pwa-and-published-it-in-3-app-stores-heres-what-i-learned-7cb3f56daf9b [dicom-web-standard]: https://www.dicomstandard.org/dicomweb/ [dicom-web]: https://en.wikipedia.org/wiki/DICOMweb +[host-static-assets]: https://www.netlify.com/blog/2016/05/18/9-reasons-your-site-should-be-static/ diff --git a/docs/latest/deployment/recipes/build-for-production.md b/docs/latest/deployment/recipes/build-for-production.md new file mode 100644 index 000000000..74ee3b552 --- /dev/null +++ b/docs/latest/deployment/recipes/build-for-production.md @@ -0,0 +1,82 @@ +# Build for Production + +Note about setting up for contributing, then skip X + +## Overview? + +### Build Machine Requirements + +- [Node.js & NPM](https://nodejs.org/en/download/) +- [Yarn](https://yarnpkg.com/lang/en/docs/install/) +- [Git](https://www.atlassian.com/git/tutorials/install-git) + +### Get a Copy of the source + +_With Git:_ + +```shell +# Clone the remote repository to your local machine +git clone https://github.com/OHIF/Viewers.git + +# Make sure the local code reflects the `react` version of the OHIF Viewer +git checkout react +``` + +More on: _[`git clone`](https://git-scm.com/docs/git-clone), +[`git checkout`](https://git-scm.com/docs/git-checkout)_ + +_From .zip:_ + +[OHIF/Viewers: react.zip](https://github.com/OHIF/Viewers/archive/react.zip) + +### Restore Dependencies? + +... + +### Configure? + +... + +- env vars +- `REACT_APP_*` +- config file(s) + +### Build + +From your projects + +```js +yarn run build:web +``` + +```js +file tree of project, highlighting contents in `/buld` +``` + +## Next Steps + +### Deploying our Production Build + +TODO: List of recipes + +### Automating Builds and Deployments + +If you found setting up your environmnent and running all of these steps to be a +bit tedious, then you are in good company. Thankfully, there are a large number +of tools available to assist with automating tasks like building and deploying +web application. For a starting point, check out this repository's own use of: + +- [CircleCI][circleci]: [config.yaml][circleci-config] +- [Netlify][netlify]: [netlify.toml][netlify.toml] | + [generateStaticSite.sh][generatestaticsite.sh] +- [Semantic-Release][semantic-release]: [.releaserc][releaserc] + + +[circleci]: https://circleci.com/gh/OHIF/Viewers +[circleci-config]: https://github.com/OHIF/Viewers/blob/react/.circleci/config.yml +[netlify]: https://app.netlify.com/sites/ohif/deploys +[netlify.toml]: https://github.com/OHIF/Viewers/blob/react/netlify.toml +[generateStaticSite.sh]: https://github.com/OHIF/Viewers/blob/react/generateStaticSite.sh +[semantic-release]: https://semantic-release.gitbook.io/semantic-release/ +[releaserc]: https://github.com/OHIF/Viewers/blob/react/.releaserc +