From b3b5f5321fb92133bd27b509f633d7ed781f2d99 Mon Sep 17 00:00:00 2001 From: dannyrb Date: Mon, 29 Apr 2019 21:48:03 -0400 Subject: [PATCH 1/5] Add build for production page --- docs/latest/deployment/recipes/build-for-production.md | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 docs/latest/deployment/recipes/build-for-production.md 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..e69de29bb From 1b147300134d8b30751e0feaa0c208d93b154b62 Mon Sep 17 00:00:00 2001 From: dannyrb Date: Mon, 29 Apr 2019 21:48:26 -0400 Subject: [PATCH 2/5] Begin detailing steps to build for production (host static assets) --- docs/latest/deployment/index.md | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/docs/latest/deployment/index.md b/docs/latest/deployment/index.md index e6fa67155..fc50b287f 100644 --- a/docs/latest/deployment/index.md +++ b/docs/latest/deployment/index.md @@ -48,8 +48,23 @@ _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, the OHIF Viewer 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 to host is the same regardless +of the host you choose. [] + +##### 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 +130,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/ From 6e058ef312a90c9e6931b3f2e02719ad8f826b69 Mon Sep 17 00:00:00 2001 From: dannyrb Date: Mon, 29 Apr 2019 21:48:38 -0400 Subject: [PATCH 3/5] Update link to point to react branch --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 From 70a9b9ca067d517dc74af9b4342df91c7bc8f4dc Mon Sep 17 00:00:00 2001 From: dannyrb Date: Mon, 29 Apr 2019 23:11:04 -0400 Subject: [PATCH 4/5] For step 1, point users to the "build for production" guide --- docs/latest/deployment/index.md | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/docs/latest/deployment/index.md b/docs/latest/deployment/index.md index fc50b287f..178322173 100644 --- a/docs/latest/deployment/index.md +++ b/docs/latest/deployment/index.md @@ -48,10 +48,10 @@ _In the future:_ #### Hosted Static Assets -At the end of the day, the OHIF Viewer 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. +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 @@ -59,8 +59,10 @@ deployment experience. ##### Part 1 - Build Production Assets -"Building", or creating, the files you will need to host is the same regardless -of the host you choose. [] +"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 From bff397d88e36dd43146449f91bf157146a2976c4 Mon Sep 17 00:00:00 2001 From: dannyrb Date: Mon, 29 Apr 2019 23:49:29 -0400 Subject: [PATCH 5/5] Rough notes "Build for Production" --- .../recipes/build-for-production.md | 82 +++++++++++++++++++ 1 file changed, 82 insertions(+) diff --git a/docs/latest/deployment/recipes/build-for-production.md b/docs/latest/deployment/recipes/build-for-production.md index e69de29bb..74ee3b552 100644 --- a/docs/latest/deployment/recipes/build-for-production.md +++ 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 +