Chore: Add webpack-dev-server to support local development (#902)

box · Jan 25, 2019 · 568842c · 568842c
1 parent 3b7f40a
commit 568842c
Show file tree

Hide file tree

Showing 5 changed files with 617 additions and 25 deletions.
diff --git a/README.md b/README.md
@@ -354,7 +354,8 @@ Install the following plugins in your preferred editor
 ### Yarn commands
 
 * `yarn run build` to generate resource bundles and JS webpack bundles.
-* `yarn run watch` to only generate JS webpack bundles on file changes.
+* `yarn run start` to only generate JS webpack bundles on file changes.
+* `yarn run start:dev` to launch a webpack-dev-server instance for local development.
 * `yarn run test` launches karma tests with PhantomJS.
 * `yarn run test -- --src=PATH/TO/SRC/FILENAME` launches test only for `src/lib/PATH/TO/SRC/__tests__/FILENAME-test.js` instead of all tests. For example, `yarn run test -- --src=viewers/media/MediaBase` launches tests for `src/lib/viewers/media/__tests__/MediaBase-test.js`. This also works for directories, e.g. `yarn run test -- --src=viewers/doc/`.
 * `yarn run debug` launches karma tests with PhantomJS for debugging. Open the URL mentioned in the console.

diff --git a/build/webpack.config.js b/build/webpack.config.js
@@ -40,6 +40,12 @@ function updateConfig(conf, language, index) {
         output: {
             path: path.resolve('dist', version, language),
             filename: '[Name].js'
+        },
+        devServer: {
+            contentBase: './src',
+            disableHostCheck: true,
+            host: '0.0.0.0',
+            inline: true
         }
     });
 
@@ -66,8 +72,7 @@ function updateConfig(conf, language, index) {
             config.plugins.push(new RsyncPlugin('dist/.', rsyncLocation));
         }
 
-        // Add inline source map
-        config.devtool = 'inline-source-map';
+        config.devtool = 'source-map';
     }
 
     if (isRelease) {

diff --git a/package.json b/package.json
@@ -98,6 +98,7 @@
     "webdriverio": "^4.12.0",
     "webpack": "^3.10.0",
     "webpack-bundle-analyzer": "^2.9.1",
+    "webpack-dev-server": "^2.11.3",
     "whatwg-fetch": "^2.0.3"
   },
   "engines": {
@@ -121,10 +122,11 @@
     "prettier": "prettier-eslint \"src/lib/**/*.js\" --print-width 120 --single-quote --tab-width 4 --write",
     "prod": "yarn run build-rb && BABEL_ENV=production NODE_ENV=production node --max_old_space_size=4096 ./node_modules/webpack/bin/webpack.js --progress --colors --config build/webpack.config.js",
     "release": "yarn run clean && yarn run build-rb && yarn run lint && yarn run test && yarn run prod",
+    "start": "yarn install && BABEL_ENV=dev NODE_ENV=dev ./node_modules/.bin/webpack --watch --progress --colors --config build/webpack.config.js",
+    "start:dev": "yarn run build-rb && LANGUAGE=en-US BABEL_ENV=dev NODE_ENV=dev ./node_modules/.bin/webpack-dev-server --config build/webpack.config.js",
     "test": "yarn install && NODE_ENV=test node --max_old_space_size=4096 ./node_modules/.bin/karma start build/karma.conf.js",
     "upgrade-pdfjs": "./build/upgrade_pdfjs.sh && ./build/minify_pdfjs.sh",
     "upgrade-annotations": "./build/upgrade_annotations.sh",
-    "watch": "yarn install && BABEL_ENV=dev NODE_ENV=dev ./node_modules/.bin/webpack --watch --progress --colors --config build/webpack.config.js",
     "major": "./build/release.sh -m",
     "minor": "./build/release.sh -n",
     "patch": "./build/release.sh -p"

diff --git a/src/index.html b/src/index.html
@@ -0,0 +1,106 @@
+<html>
+    <head>
+        <meta name="viewport" content="width=device-width">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+        <link rel="stylesheet" href='./preview.css' />
+        <link rel="stylesheet" href='./annotations.css' />
+        <script src='https://cdn01.boxcdn.net/polyfills/core-js/2.5.3/core.min.js'></script>
+        <script src='./preview.js'></script>
+        <script src='./annotations.js'></script>
+
+        <style>
+            * {
+                box-sizing: border-box;
+                font-family: sans-serif;
+                margin: 0;
+                padding: 0;
+            }
+
+            .setters-container {
+                display: flex;
+                font-size: 75%;
+                height: 25vh;
+                justify-content: space-around;
+                padding: 20px;
+            }
+
+            .setters-container button,
+            .setters-container input {
+                padding: 5px;
+            }
+
+            .container {
+                text-align: center;
+            }
+
+            .container > input {
+                text-align: center;
+            }
+
+            #preview-container {
+                height: 75vh;
+                width: 100vw;
+            }
+        </style>
+    </head>
+
+    <body>
+        <div class='setters-container'>
+                <div class='container' id='token'>
+                        <div> Token: <span id='token-display'></span> </div>
+                        <input id='token-set' placeholder='Enter token' />
+                        <button onClick="setProperty('token')">Set new token</button>
+                </div>
+
+                <div class='container' id='file'>
+                        <div> File ID: <span id='fileid-display'></span></div>
+                        <input id='fileid-set' placeholder='Enter file ID' />
+                        <button onClick="setProperty('fileid')">Set new file ID</button>
+                </div>
+        </div>
+
+        <div class='preview-container'> </div>
+        <script>
+            function setProperty(selector) {
+                // Get new value, fallback to local storage
+                var inputValue = document.querySelector('#' + selector + '-set')
+                value = inputValue && inputValue.value || localStorage.getItem(selector);
+
+
+                if (!value) {
+                    return;
+                }
+
+                // Set it for display purposes
+                var displayElement = document.querySelector('#' + selector + '-display');
+                displayElement.textContent = value;
+
+                // Cache it in local storage
+                localStorage.setItem(selector, value)
+
+                // Attempt to load Preview
+                loadPreview();
+            }
+
+            function loadPreview() {
+                var token = localStorage.getItem('token');
+                var fileid = localStorage.getItem('fileid');
+
+                if ( !token || !fileid) {
+                    return;
+                }
+
+                /* global Box */
+                var preview = new Box.Preview();
+                preview.show(fileid, token, {
+                    container: ".preview-container",
+                });
+
+            }
+
+            // Try to load all properties from storage on page load
+            setProperty('token');
+            setProperty('fileid');
+        </script>
+    </body>
+</html>