Webpack dev server

* Added webpack dev server
* Improved error handling
* Updated npm packages
* Minor refactor to authentication

README.md

@@ -7,6 +7,6 @@ Note: The API which this application uses is not yet published but will be publi
 ## Usage
 
 1. Run `yarn` to install dependencies
-2. Run `yarn start` to run webpack in watch mode
-    * Or run `yarn build` to create a production build
-3. Open `index.html`
+2. Run `yarn start` to start dev server
+
+Alternatively, run `yarn build` to create a production build

package.json

@@ -9,20 +9,22 @@
     "url": "https://github.com/rapal/optimaze-viewer-example"
   },
   "scripts": {
-    "start": "yarn run lint && rimraf build && webpack -w",
+    "start": "yarn run lint && webpack-dev-server",
     "build": "yarn run lint && rimraf build && webpack -p --env production",
     "lint": "tslint --config tslint.json --project tsconfig.json"
   },
   "devDependencies": {
     "css-loader": "^0.28.7",
     "extract-text-webpack-plugin": "^3.0.0",
-    "file-loader": "^0.11.2",
+    "file-loader": "^1.1.5",
+    "html-webpack-plugin": "^2.30.1",
     "path": "^0.12.7",
     "rimraf": "^2.6.2",
-    "ts-loader": "^2.3.7",
+    "ts-loader": "^3.1.0",
     "tslint": "^5.7.0",
     "typescript": "^2.5.2",
-    "webpack": "^3.6.0"
+    "webpack": "^3.6.0",
+    "webpack-dev-server": "^2.9.3"
   },
   "dependencies": {
     "@rapal/optimaze-viewer": "^0.3.0",

src/authentication.ts

@@ -2,14 +2,17 @@ import { isFuture, addSeconds } from "date-fns";
 import * as jwtDecode from "jwt-decode";
 import { oauthUrl, clientId, clientSecret, scope } from "./config";
 
+// http://localhost:8080/ is always allowed
+// Other redirect URIs must be configured for the client
+const redirectUri = document.location.href.split("?")[0];
+
 /**
  * Gets access token from local storage or by requesting new token.
  * Throws error if no valid token can be returned.
  */
 export async function getAccessToken(
   authorizationCode: string | null
 ): Promise<string> {
-  const redirectUrl = document.location.href.split("?")[0];
   const accessToken = window.localStorage.getItem("access_token");
   const accessTokenExpires = window.localStorage.getItem(
     "access_token_expires"
@@ -23,12 +26,12 @@ export async function getAccessToken(
 
   // 2. Refresh token is available, get new access token
   if (refreshToken) {
-    return await refreshAccessToken(refreshToken, redirectUrl);
+    return await refreshAccessToken(refreshToken);
   }
 
   // 3. Authorization code is available, get refresh and access tokens
   if (authorizationCode) {
-    return await getRefreshAndAccessTokens(authorizationCode, redirectUrl);
+    return await getRefreshAndAccessTokens(authorizationCode);
   }
 
   throw new Error(
@@ -41,15 +44,12 @@ export async function getAccessToken(
  * Stores the refresh token, access token and it's update time in session storage.
  * Returns a promise that resolves with the access token.
  */
-async function getRefreshAndAccessTokens(
-  authorizationCode: string,
-  redirectUrl: string
-) {
+async function getRefreshAndAccessTokens(authorizationCode: string) {
   const tokenUrl = oauthUrl + "/token";
   const payload = new URLSearchParams();
   payload.set("grant_type", "authorization_code");
   payload.set("code", authorizationCode);
-  payload.set("redirect_uri", redirectUrl);
+  payload.set("redirect_uri", redirectUri);
   payload.set("client_id", clientId);
   payload.set("client_secret", clientSecret);
 
@@ -73,12 +73,12 @@ async function getRefreshAndAccessTokens(
  * Stores the refresh token, access token and it's update time in session storage.
  * Returns a promise that resolves with the access token.
  */
-async function refreshAccessToken(refreshToken: string, redirectUrl: string) {
+async function refreshAccessToken(refreshToken: string) {
   const tokenUrl = oauthUrl + "/token";
   const payload = new URLSearchParams();
   payload.set("grant_type", "refresh_token");
   payload.set("refresh_token", refreshToken);
-  payload.set("redirect_uri", redirectUrl);
+  payload.set("redirect_uri", redirectUri);
   payload.set("client_id", clientId);
   payload.set("client_secret", clientSecret);
 

index.html → src/index.html

@@ -3,12 +3,10 @@
 
 <head>
     <title>optimaze-viewer-example</title>
-    <link rel="stylesheet" href="build/bundle.css" />
 </head>
 
 <body>
     <div id="viewer"></div>
-    <script src="build/bundle.js"></script>
 </body>
 
 </html>

src/viewer.ts

@@ -23,7 +23,13 @@ export default function loadViewer(
       headers: {
         authorization: "Bearer " + accessToken
       }
-    }).then<TData>(r => r.json());
+    }).then<TData>(response => {
+      if (response.ok) {
+        return response.json();
+      } else {
+        throw new Error(response.statusText);
+      }
+    });
   }
 
   function getFloorGraphics() {

webpack.config.js

@@ -1,5 +1,14 @@
 var path = require("path");
 var ExtractTextPlugin = require("extract-text-webpack-plugin");
+var HtmlWebpackPlugin = require("html-webpack-plugin");
+
+var stats = {
+  chunks: false,
+  children: false,
+  modules: false,
+  hash: false,
+  version: false
+};
 
 module.exports = function(env) {
   var production = env === "production";
@@ -11,13 +20,18 @@ module.exports = function(env) {
       filename: "bundle.js"
     },
     devtool: production ? "source-map" : "inline-source-map",
-    stats: {
-      chunks: false,
-      children: false
+    stats: stats,
+    devServer: {
+      contentBase: false,
+      stats: stats
     },
     plugins: [
       new ExtractTextPlugin({
         filename: "bundle.css"
+      }),
+      new HtmlWebpackPlugin({
+        template: "./src/index.html",
+        hash: true
       })
     ],
     resolve: {