HubSpot · esme · Feb 15, 2023 · Feb 14, 2023 · Feb 15, 2023 · Feb 15, 2023
diff --git a/.github/workflows/preview.yml b/.github/workflows/preview.yml
@@ -0,0 +1,25 @@
+name: Deploy PR previews
+run-name: ${{ github.actor }} is deploying a PR
+on: [pull_request]
+
+concurrency: preview-${{ github.ref }}
+
+jobs:
+  deploy-preview:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Install and Build Demo apps
+        run: |
+          npm install
+          npm run build:demos
+        with:
+          node-version: '19'
+
+      - uses: rossjrw/pr-preview-action@v1.3.0
+        with:
+          source-dir: ./build
+          preview-branch: gh-pages
+          umbrella-dir: pr-preview
+          action: auto
diff --git a/.gitignore b/.gitignore
@@ -1,6 +1,7 @@
 node_modules
 npm-debug.log
 dist
+bin
 *.pem
 coverage
 build

diff --git a/demo-v1/package.json b/demo-v1/package.json
@@ -4,7 +4,7 @@
   "description": "HubSpot calling integration sdk test app",
   "private": true,
   "scripts": {
-    "build": "webpack",
+    "build": "webpack && cp -a dist/. ../build",
     "start": "npm i && webpack-dev-server --open"
   },
   "license": "ISC",
@@ -25,6 +25,7 @@
     "@types/styled-components": "^5.1.26",
     "babel-loader": "^9.1.2",
     "babel-plugin-styled-components": "^2.0.7",
+    "html-webpack-plugin": "^5.5.0",
     "prettier": "2.8.4",
     "prop-types": "^15.8.1",
     "webpack": "^5.75.0",

diff --git a/demo-v1/src/components/App.tsx b/demo-v1/src/components/App.tsx
@@ -136,7 +136,15 @@ function App() {
         setTooltipBackgroundColor(WHITE)
       )}
     >
-      <div>{screenComponent}</div>
+      <div
+        style={{
+          backgroundColor: "#f5f8fa",
+          minWidth: "400px",
+          minHeight: "600px",
+        }}
+      >
+        {screenComponent}
+      </div>
     </ThemeProvider>
   );
 }

diff --git a/demo-v1/src/index.html b/demo-v1/src/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset=”utf-8″>
+    <link href='https://fonts.googleapis.com/css?family=Lexend' rel='stylesheet'>
+    <style>
+      body {
+        font-family: 'Lexend';
+        margin: 0;
+      }
+
+      #app {
+        align-items: center;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        vertical-align: initial;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div id="app"></div>
+    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
+    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
+    <script src="demo-v1.bundle.js"></script>
+  </body>
+</html>
diff --git a/demo-v1/webpack.config.js b/demo-v1/webpack.config.js
@@ -1,14 +1,23 @@
 const path = require("path");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
 
 module.exports = {
   entry: "./src/index.tsx",
   mode: "development",
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: "./src/index.html",
+      inject: false,
+      filename: "demo-v1.html",
+    }),
+  ],
   resolve: {
     extensions: [".tsx", ".ts", ".js"],
   },
   output: {
     path: path.resolve(__dirname, "dist"),
-    filename: "bundle.js",
+    filename: "demo-v1.bundle.js",
+    clean: true,
   },
   module: {
     rules: [
@@ -28,8 +37,10 @@ module.exports = {
     https: true,
     port: 9025,
     static: {
-      directory: path.join(__dirname, "dist"),
+      directory: path.resolve(__dirname, "dist"),
+    },
+    historyApiFallback: {
+      index: "demo-v1.html",
     },
-    open: false,
   },
 };
diff --git a/demo/index.html b/demo/index.html
@@ -52,6 +52,6 @@
     <div>Incoming Messages</div>
     <div id="incomingMsgs"></div>
 
-    <script src="./bin/index_combined.js" async></script>
+    <script src="demo.bundle.js" async></script>
   </body>
 </html>
diff --git a/demo/package.json b/demo/package.json
@@ -4,17 +4,18 @@
   "description": "HubSpot calling extension sdk demo",
   "private": true,
   "scripts": {
-    "build": "webpack",
+    "build": "NODE_OPTIONS=--openssl-legacy-provider webpack && cp -a bin/. ../build",
     "serve": "npm i && webpack-dev-server --open",
     "start": "node scripts/start.js npm run serve"
   },
   "license": "ISC",
   "devDependencies": {
     "clean-webpack-plugin": "^0.1.19",
     "cross-env": "^7.0.3",
-    "webpack": "^4.23.1",
-    "webpack-cli": "^3.1.2",
-    "webpack-dev-server": "^3.1.10"
+    "html-webpack-plugin": "^5.5.0",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.1",
+    "webpack-dev-server": "^4.11.1"
   },
   "dependencies": {
     "@hubspot/calling-extensions-sdk": "^0.0.6"

diff --git a/demo/webpack.config.js b/demo/webpack.config.js
@@ -1,18 +1,27 @@
 const path = require("path");
-const CleanWebpackPlugin = require("clean-webpack-plugin");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
 module.exports = {
   entry: "./index.js",
   mode: "development",
-  plugins: [new CleanWebpackPlugin("build")],
+  plugins: [new HtmlWebpackPlugin({
+    template: "./index.html",
+    inject: false,
+    filename: "demo.html"
+  })],
   output: {
-    filename: "index_combined.js",
     libraryTarget: "umd",
-    path: path.resolve(__dirname, "bin")
+    path: path.resolve(__dirname, "bin"),
+    filename: "demo.bundle.js",
+    clean: true
   },
   devServer: {
-    contentBase: "./",
-    publicPath: "/bin",
     https: true,
-    port: 9025
+    port: 9025,
+    static: {
+      directory: path.resolve(__dirname, "bin")
+    },
+    historyApiFallback: {
+      index: "demo.html"
+    }
   }
 };
diff --git a/package.json b/package.json
@@ -1,20 +1,26 @@
 {
   "name": "@hubspot/calling-extensions-sdk",
   "version": "0.0.10",
+  "homepage": "https://github.hubspot.com/calling-extensions-sdk",
   "description": "HubSpot calling extensions sdk for call widget integration.",
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
-    "build": "webpack",
+    "build": "NODE_OPTIONS=--openssl-legacy-provider webpack",
     "build:test": "npm run build && npm run test",
     "prepublish": "npm run build:test",
     "test": "karma start karma.conf.js --browsers ChromeHeadless --single-run",
     "test:debug": "karma start karma.conf.js --browsers Chrome",
     "cover": "open coverage/lcov-report/index.html",
     "eslint": "eslint src --ext .js",
     "eslint:fix": "eslint src .js --fix",
-    "travis": "npm run build:test"
+    "travis": "npm run build:test",
+    "build:demo": "cd demo && npm run build",
+    "build:demo-v1": "cd demo-v1 && npm run build",
+    "build:demos": "npm run build:demo-v1 && npm run build:demo && cp ./src/index.html build/index.html",
+    "predeploy": "npm run build:demos",
+    "deploy": "gh-pages -d build"
   },
   "main": "./dist/main.js",
   "module": "./index.js",
@@ -35,6 +41,7 @@
     "eslint-plugin-jsx-a11y": "^3.0.2",
     "eslint-plugin-mocha": "^4.7.0",
     "eslint-plugin-react": "^6.9.0",
+    "gh-pages": "^5.0.0",
     "jasmine-core": "^3.3.0",
     "karma": "^6.3.17",
     "karma-babel-preprocessor": "^8.0.2",

diff --git a/src/index.html b/src/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<head>
+<title>Index Page</title>
+<meta charset="utf-8">
+</head>
+<body>
+  <a href="./demo.html">Demo App</a>
+  <br />
+  <a href="./demo-v1.html">Demo V1 App</a>
+</body>
+</html>