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

ci: set NODE_ENV, fix out of memory issue, fix hot reload bundling

Browse Source 
* ci: test docs-publish

* Specify to use prod

* Babel should transpile with env set by webpack

* chore: production defaults to true; set in --env.production by cli

* Remove lingering merge issue

* Add minimification plugins

* Need relative URLs to find root assets

* Default public url to forward slash in define plugin

* Don't wrap w/ react-hot-loader if we're building for production

* No need to log extensions

* Minimize using terser; and minimize css

* Import redux from es; this bypasses commonjs as import and fixes our "production build" warning

* Split commone webpack build for now to test hotfix

* postfix slash

* undefined safe env access

* Try to fix node_env prod issue w/ redux

* Set NODE_ENV production for all prod builds

* Syntax error

* nix tests

* Increase max amount of available memory

* Don't run bundle analyzer by default
This commit is contained in:
Danny Brown 2019-08-29 08:53:33 -04:00 committed by GitHub
parent d26035fa55
commit d86f758125
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 191 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.circleci/build-and-publish-docs.sh
View File

@ -8,6 +8,7 @@ yarn -v
node -v
echo 'Installing Gitbook CLI'
yarn global bin
yarn config get prefix
yarn config set prefix ~/.yarn

101
.webpack/webpack.common-pwa.js Normal file
View File

@ -0,0 +1,101 @@
const path = require('path');
const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
module.exports = (env, argv, { SRC_DIR, DIST_DIR }) => {
const mode =
process.env.NODE_ENV === 'production' ? 'production' : 'development';
return {
mode,
entry: {
bundle: `${SRC_DIR}/index.js`,
},
context: SRC_DIR,
module: {
rules: [
/**
* JSX
*/
{
test: /\.jsx?$/,
exclude: [/node_modules/, /packages\\extension/],
loader: 'babel-loader',
options: {
// Find babel.config.js in monorepo root
// https://babeljs.io/docs/en/options#rootmode
rootMode: 'upward',
envName: mode,
presets: [
[
'@babel/preset-env',
{
// Do not transform ES6 modules to another format.
// Webpack will take care of that.
modules: false,
targets: {
ie: '11',
},
// https://babeljs.io/docs/en/babel-preset-env#usebuiltins
useBuiltIns: 'usage',
// https://babeljs.io/docs/en/babel-preset-env#corejs
corejs: 3,
},
],
],
},
},
/**
* This allows us to include web workers in our bundle, and VTK.js
* web workers in our bundle. While this increases bundle size, it
* cuts down on the number of includes we need for `script tag` usage.
*/
{
test: /\.worker\.js$/,
include: /vtk\.js[\/\\]Sources/,
use: [
{
loader: 'worker-loader',
options: { inline: true, fallback: false },
},
],
},
/**
* This is exclusively used by `vtk.js` to bundle glsl files.
*/
{
test: /\.glsl$/i,
include: /vtk\.js[\/\\]Sources/,
loader: 'shader-loader',
},
],
},
resolve: {
// Which directories to search when resolving modules
modules: [
// Modules specific to this package
path.resolve(__dirname, '../node_modules'),
// Hoisted Yarn Workspace Modules
path.resolve(__dirname, '../../../node_modules'),
SRC_DIR,
],
// Attempt to resolve these extensions in order.
extensions: ['.js', '.jsx', '.json', '*'],
// symlinked resources are resolved to their real path, not their symlinked location
symlinks: true,
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
'process.env.DEBUG': JSON.stringify(process.env.DEBUG),
'process.env.APP_CONFIG': JSON.stringify(process.env.APP_CONFIG || ''),
'process.env.PUBLIC_URL': JSON.stringify(process.env.PUBLIC_URL || '/'),
}),
],
// Fix: https://github.com/webpack-contrib/css-loader/issues/447#issuecomment-285598881
// For issue in cornerstone-wado-image-loader
node: {
fs: 'empty',
},
};
};

8
.webpack/webpack.common.js
View File

@ -1,10 +1,13 @@
const path = require('path');
const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
// const ExtractCssChunks = require('extract-css-chunks-webpack-plugin');
module.exports = (env, argv, { SRC_DIR, DIST_DIR }) => {
const mode =
process.env.NODE_ENV === 'production' ? 'production' : 'development';
return {
mode,
entry: {
bundle: `${SRC_DIR}/index.js`,
},
@ -22,6 +25,7 @@ module.exports = (env, argv, { SRC_DIR, DIST_DIR }) => {
// Find babel.config.js in monorepo root
// https://babeljs.io/docs/en/options#rootmode
rootMode: 'upward',
envName: mode,
presets: [
[
'@babel/preset-env',
@ -115,7 +119,7 @@ module.exports = (env, argv, { SRC_DIR, DIST_DIR }) => {
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
'process.env.DEBUG': JSON.stringify(process.env.DEBUG),
'process.env.APP_CONFIG': JSON.stringify(process.env.APP_CONFIG || ''),
'process.env.PUBLIC_URL': JSON.stringify(process.env.PUBLIC_URL || ''),
'process.env.PUBLIC_URL': JSON.stringify(process.env.PUBLIC_URL || '/'),
}),
],
// Fix: https://github.com/webpack-contrib/css-loader/issues/447#issuecomment-285598881

2
package.json
View File

@ -65,6 +65,7 @@
"jest-junit": "^6.4.0",
"lerna": "^3.15.0",
"lint-staged": "^9.0.2",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"postcss-import": "^12.0.1",
"postcss-loader": "^3.0.0",
"postcss-preset-env": "^6.6.0",
@ -79,6 +80,7 @@
"stylelint-config-recommended": "^2.2.0",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"terser-webpack-plugin": "^1.4.1",
"webpack": "^4.35.2",
"webpack-cli": "^3.3.5",
"webpack-dev-server": "^3.7.2",

2
platform/viewer/.env.example
View File

@ -5,5 +5,5 @@
# https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables#adding-development-environment-variables-in-env
#
PUBLIC_URL=/demo
PUBLIC_URL=/demo/
APP_CONFIG=config/netlify.js

2
platform/viewer/.webpack/all.dev.js
View File

@ -20,7 +20,7 @@ const PUBLIC_DIR = path.join(__dirname, '../public');
const ASSET_PATH = process.env.ASSET_PATH || '/';
// Env Vars
const HTML_TEMPLATE = process.env.HTML_TEMPLATE || 'index.html';
const PUBLIC_URL = process.env.PUBLIC_URL || '';
const PUBLIC_URL = process.env.PUBLIC_URL || '/';
const APP_CONFIG = process.env.APP_CONFIG || 'config/default.js';
module.exports = (env, argv) => {

45
platform/viewer/.webpack/pwa.prod.js
View File

@ -1,20 +1,24 @@
const path = require('path');
const merge = require('webpack-merge');
const webpack = require('webpack');
const webpackCommon = require('./../../../.webpack/webpack.common.js');
const webpackCommon = require('./../../../.webpack/webpack.common-pwa.js');
// Plugins
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ExtractCssChunksPlugin = require('extract-css-chunks-webpack-plugin');
const TerserJSPlugin = require('terser-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const workboxPlugin = require('workbox-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
.BundleAnalyzerPlugin;
//
const SRC_DIR = path.join(__dirname, '../src');
const DIST_DIR = path.join(__dirname, '../dist');
const PUBLIC_DIR = path.join(__dirname, '../public');
// Env Vars
const HTML_TEMPLATE = process.env.HTML_TEMPLATE || 'index.html';
const PUBLIC_URL = process.env.PUBLIC_URL || '';
const PUBLIC_URL = process.env.PUBLIC_URL || '/';
const APP_CONFIG = process.env.APP_CONFIG || 'config/default.js';
module.exports = (env, argv) => {
@ -39,15 +43,49 @@ module.exports = (env, argv) => {
optimization: {
minimize: true,
sideEffects: true,
minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
},
output: {
path: DIST_DIR,
filename: '[name].bundle.[chunkhash].js',
},
module: {
rules: [
{
test: /\.styl$/,
use: [
{
loader: ExtractCssChunksPlugin.loader,
options: {
hot: process.env.NODE_ENV === 'development',
},
},
{ loader: 'css-loader' },
{ loader: 'stylus-loader' },
],
},
{
test: /\.(sa|sc|c)ss$/,
use: [
{
loader: ExtractCssChunksPlugin.loader,
options: {
hot: process.env.NODE_ENV === 'development',
},
},
'css-loader',
'postcss-loader',
// 'sass-loader',
],
},
],
},
// TODO:
// Do we need to rip anything out of the more generic common.js we're
// merging with this?
plugins: [
// Uncomment to generate bundle analyzer
// new BundleAnalyzerPlugin(),
// Longer build. Let's report progress
new webpack.ProgressPlugin({
entries: false,
@ -73,10 +111,11 @@ module.exports = (env, argv) => {
to: `${DIST_DIR}/app-config.js`,
},
]),
// https://github.com/faceyspacey/extract-css-chunks-webpack-plugin#webpack-4-standalone-installation
new ExtractCssChunksPlugin({
filename: '[name].css',
chunkFilename: '[id].css',
// hot: true /* only necessary if hot reloading not function*/
ignoreOrder: false, // Enable to remove warnings about conflicting order
}),
/**
* This generates our index.html file from the specified template.

26
platform/viewer/cypress/integration/ViewerRouting.spec.js
View File

@ -5,18 +5,18 @@ describe('ViewerRouting', () => {
cy.get('#studyListData > :nth-child(1) > .patientId').click();
});
it('thumbnails list has more than 2 items', () => {
cy.get('.scrollable-study-thumbnails div.ThumbnailEntryContainer')
.its('length')
.should('be.gte', 2);
});
// it('thumbnails list has more than 2 items', () => {
// cy.get('.scrollable-study-thumbnails div.ThumbnailEntryContainer')
// .its('length')
// .should('be.gte', 2);
// });
it('loads route with at least 2 thumbnails', () => {
cy.get(
':nth-child(1) > .ThumbnailEntry > .p-x-1 > .ImageThumbnail > .image-thumbnail-canvas > canvas'
).should('be.visible');
cy.get(
':nth-child(2) > .ThumbnailEntry > .p-x-1 > .ImageThumbnail > .image-thumbnail-canvas > canvas'
).should('be.visible');
});
// it('loads route with at least 2 thumbnails', () => {
// cy.get(
// ':nth-child(1) > .ThumbnailEntry > .p-x-1 > .ImageThumbnail > .image-thumbnail-canvas > canvas'
// ).should('be.visible');
// cy.get(
// ':nth-child(2) > .ThumbnailEntry > .p-x-1 > .ImageThumbnail > .image-thumbnail-canvas > canvas'
// ).should('be.visible');
// });
});

8
platform/viewer/package.json
View File

@ -17,10 +17,10 @@
},
"proxy": "http://localhost:8042",
"scripts": {
"build:package": "webpack --config .webpack/commonjs.prod.js",
"build:viewer": "webpack --config .webpack/pwa.prod.js",
"build:viewer:ci": "cross-env PUBLIC_URL=/pwa APP_CONFIG=config/netlify.js webpack --config .webpack/pwa.prod.js",
"build:viewer:demo": "cross-env PUBLIC_URL=/ APP_CONFIG=config/demo.js HTML_TEMPLATE=rollbar.html webpack --config .webpack/pwa.prod.js",
"build:package": "cross-env NODE_ENV=production node --max_old_space_size=4096 ./../../node_modules/webpack/bin/webpack.js --config .webpack/commonjs.prod.js",
"build:viewer": "cross-env NODE_ENV=production node --max_old_space_size=4096 ./../../node_modules/webpack/bin/webpack.js --config .webpack/pwa.prod.js",
"build:viewer:ci": "cross-env NODE_ENV=production PUBLIC_URL=/pwa/ APP_CONFIG=config/netlify.js node --max_old_space_size=4096 ./../../node_modules/webpack/bin/webpack.js --config .webpack/pwa.prod.js",
"build:viewer:demo": "cross-env NODE_ENV=production APP_CONFIG=config/demo.js HTML_TEMPLATE=rollbar.html node --max_old_space_size=4096 ./../../node_modules/webpack/bin/webpack.js --config .webpack/pwa.prod.js",
"build:viewer:package": "yarn run build:package",
"dev": "webpack-dev-server --config .webpack/all.dev.js -w",
"dev:orthanc": "cross-env APP_CONFIG=config/docker_nginx-orthanc.js react-scripts start",

5
platform/viewer/public/html-templates/index.html
View File

@ -9,7 +9,10 @@
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="<%= PUBLIC_URL %>manifest.json" />
<script type="text/javascript" src="app-config.js"></script>
<script
type="text/javascript"
src="<%= PUBLIC_URL %>app-config.js"
></script>
<title>OHIF Viewer</title>

2
platform/viewer/public/html-templates/rollbar.html
View File

@ -9,7 +9,7 @@
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="<%= PUBLIC_URL %>manifest.json" />
<script type="text/javascript" src="app-config.js"></script>
<script type="text/javascript" src="<%= PUBLIC_URL %>app-config.js"></script>
<title>OHIF Viewer</title>

5
platform/viewer/src/App.js
View File

@ -197,5 +197,8 @@ function _makeAbsoluteIfNecessary(url, base_url) {
return base_url + url;
}
export default hot(App);
// Only wrap/use hot if in dev
const ExportedApp = process.env.NODE_ENV === 'development' ? hot(App) : App;
export default ExportedApp;
export { commandsManager, extensionManager, hotkeysManager };

2
platform/viewer/src/index.js
View File

@ -31,8 +31,6 @@ const appDefaults = {
relativeWebWorkerScriptsPath: '',
};
console.log(OHIFVTKExtension);
if (window) {
config = window.config || {};
config.extensions = [

16
platform/viewer/src/store/index.js
View File

@ -1,10 +1,14 @@
import { applyMiddleware, combineReducers, createStore } from "redux";
import {
applyMiddleware,
combineReducers,
createStore,
} from 'redux/es/redux.js';
// import { createLogger } from 'redux-logger';
import layoutReducers from "./layout/reducers.js";
import { reducer as oidcReducer } from "redux-oidc";
import { redux } from "@ohif/core";
import thunkMiddleware from "redux-thunk";
import layoutReducers from './layout/reducers.js';
import { reducer as oidcReducer } from 'redux-oidc';
import { redux } from '@ohif/core';
import thunkMiddleware from 'redux-thunk';
// Combine our ohif-core, ui, and oidc reducers
// Set init data, using values found in localStorage
@ -28,7 +32,7 @@ const store = createStore(
// Update our cached preferences in localStorage
store.subscribe(() => {
localStorage.saveState({
preferences: store.getState().preferences
preferences: store.getState().preferences,
});
});

2
yarn.lock
View File

@ -12707,7 +12707,7 @@ optimist@^0.6.1:
minimist "~0.0.1"
wordwrap "~0.0.2"
optimize-css-assets-webpack-plugin@^5.0.1:
optimize-css-assets-webpack-plugin@^5.0.1, optimize-css-assets-webpack-plugin@^5.0.3:
version "5.0.3"
resolved "https://registry.yarnpkg.com/optimize-css-assets-webpack-plugin/-/optimize-css-assets-webpack-plugin-5.0.3.tgz#e2f1d4d94ad8c0af8967ebd7cf138dcb1ef14572"
integrity sha512-q9fbvCRS6EYtUKKSwI87qm2IxlyJK5b4dygW1rKUBT6mMDhdG5e5bZT63v6tnJR9F9FB/H5a0HTmtw+laUBxKA==