@hubspot/ui-extensions-dev-server 0.0.1-beta.0

package/README.md

@@ -0,0 +1,27 @@
+# ui-extensions-dev-server
+
+## Overview
+This package contains the cli for running HubSpot UI extensions locally, as well as running a production build for debugging purposes.
+
+### Help
+If for any reason you need help with the `ui-extensions-dev-server` you can access the help menu in a few ways:
+
+- `hs-ui-extensions-dev-server`
+- `hs-ui-extensions-dev-server -h`
+- `hs-ui-extensions-dev-server --help`
+
+### Local Development
+Prompts you which of your extensions you would like to run in local dev mode. Once you have made your selection, it sets up a watcher on the entry point file for that project as well as any child files.  Any changes to those files will trigger a local build which will bundle your code and output the bundle in a `dist/` directory inside of your current working directory.  To initiate local dev mode in the browser, you just need to navigate to the CRM where your the deployed version of your card lives.  The browser will detect that you have the dev server running, and make the connection on your behalf.
+
+| Action | Command |
+| - | - |
+| Standard Local Dev | `hs-ui-extensions-dev-server dev` |
+| Bypass Prompt | `hs-ui-extensions-dev-server dev --extension MyEntryPointFile.jsx` <br /> `hs-ui-extensions-dev-server dev -e MyEntryPointFile.jsx`|
+
+### Production Build
+This should not be required in the standard development workflow. It is there to aid debugging the output of an extension.  This command will run a build similar to what we will run when these extensions are uploaded.  The output will be written into a `dist/` directory in the current working directory.
+
+| Action | Command |
+| - | - |
+| Build All Extensions | `hs-ui-extensions-dev-server build` |
+| Build a single extension | `hs-ui-extensions-dev-server build --extension MyEntryPointFile.jsx` <br /> `hs-ui-extensions-dev-server build -e MyEntryPointFile.jsx`|

package/build.js

@@ -0,0 +1,56 @@
+const { build } = require('vite');
+const { ROLLUP_OPTIONS } = require('./constants');
+
+async function buildAllExtensions(config, outputDir) {
+  const extensionKeys = Object.keys(config);
+  for (let i = 0; i < extensionKeys.length; ++i) {
+    const { data } = config[extensionKeys[i]];
+
+    await buildSingleExtension({
+      file: data?.module.file,
+      outputFileName: data?.output,
+      outputDir,
+      emptyOutDir: i === 0,
+    });
+  }
+}
+
+async function buildSingleExtension({
+  file,
+  outputFileName,
+  outputDir,
+  emptyOutDir = true,
+  plugins = { rollup: [], vite: [] },
+  minify = false,
+  root = process.cwd(), // This is the vite default, so using that as our default
+}) {
+  await build({
+    root,
+    define: {
+      'process.env.NODE_ENV': JSON.stringify(
+        process.env.NODE_ENV || 'production'
+      ),
+    },
+    build: {
+      lib: {
+        entry: file,
+        name: outputFileName,
+        formats: ['iife'],
+        fileName: () => outputFileName,
+      },
+      rollupOptions: {
+        ...ROLLUP_OPTIONS,
+        plugins: [...(ROLLUP_OPTIONS.plugins || []), ...plugins?.rollup],
+      },
+      outDir: outputDir,
+      emptyOutDir,
+      minify,
+      plugins: plugins?.vite,
+    },
+  });
+}
+
+module.exports = {
+  buildAllExtensions,
+  buildSingleExtension,
+};

package/cli.js

@@ -0,0 +1,67 @@
+const logger = require('./logger');
+const commandLineArgs = require('command-line-args');
+const commandLineUsage = require('command-line-usage');
+
+function parseArgs() {
+  const mainDefinitions = [{ name: 'command', defaultOption: true }];
+  const mainOptions = commandLineArgs(mainDefinitions, {
+    stopAtFirstUnknown: true,
+  });
+  const argv = mainOptions._unknown || [];
+  const DEV_MODE = mainOptions.command === 'dev';
+  const BUILD_MODE = mainOptions.command === 'build';
+
+  const optionDefinitions = [
+    { name: 'port', alias: 'p', type: Number },
+    { name: 'extension', alias: 'e', type: String },
+    { name: 'help', alias: 'h', type: Boolean },
+  ];
+
+  const options = commandLineArgs(
+    optionDefinitions,
+    DEV_MODE || BUILD_MODE ? { argv } : {}
+  );
+
+  return { DEV_MODE, BUILD_MODE, ...options };
+}
+
+function showHelp(OUTPUT_DIR) {
+  const sections = [
+    {
+      header: 'HubSpot UI Extensions Local Dev Server',
+      content: `Used for local development of HubSpot extensions.  Built assets can be found in the ${OUTPUT_DIR} directory`,
+    },
+    {
+      header: 'Available Commands',
+      content: [
+        { name: 'dev', summary: 'starts the local development server' },
+        { name: 'build', summary: 'runs a build of your extensions' },
+      ],
+    },
+    {
+      header: 'Options',
+      optionList: [
+        {
+          name: 'extension',
+          alias: 'e',
+          typeLabel: '{underline file}',
+          description:
+            'The extension entrypoint file to build or start local development for',
+        },
+        {
+          name: 'help',
+          alias: 'h',
+          description: 'Print this usage guide.',
+        },
+      ],
+    },
+  ];
+  const usage = commandLineUsage(sections);
+  logger.info(usage);
+  process.exit(0);
+}
+
+module.exports = {
+  parseArgs,
+  showHelp,
+};

package/config.js

@@ -0,0 +1,128 @@
+const prompts = require('prompts');
+const logger = require('./logger');
+const path = require('path');
+const { MAIN_APP_CONFIG, PROJECT_CONFIG } = require('./constants');
+const { getUrlSafeFileName } = require('./utils');
+
+async function getExtensionConfig(configuration, extension) {
+  if (extension && configuration[extension]) {
+    const { data } = configuration[extension];
+    return {
+      key: extension,
+      name: data.title,
+      file: data?.module?.file,
+      output: data?.output,
+      appName: data?.appName,
+    };
+  }
+
+  const extensionOptions = Object.keys(configuration);
+  const response = await prompts(
+    [
+      {
+        type: 'select',
+        name: 'extension',
+        message: 'Which extension would you like to run?',
+        choices: extensionOptions.map(option => {
+          const { data } = configuration[option];
+          return {
+            title: option,
+            value: {
+              key: option,
+              name: data?.title,
+              file: data?.module?.file,
+              output: data?.output,
+              appName: data?.appName,
+            },
+          };
+        }),
+      },
+    ],
+    {
+      onCancel: () => {
+        process.exit(0); // When the user cancels interaction, exit the script
+      },
+    }
+  );
+  return response.extension;
+}
+
+function _loadRequiredConfigFile(filePath) {
+  let config;
+  try {
+    config = require(filePath);
+  } catch (e) {
+    logger.error(
+      `Unable to load ${filePath} file.  Please make sure you are running the command from the src/app/extensions directory and that ${filePath} exists`
+    );
+    process.exit(1);
+  }
+  return config;
+}
+
+function loadConfig() {
+  // app.json is one level up from the extensions directory, which is where these commands
+  // will need to be ran from, the extensions directory
+  const configPath = path.join(process.cwd(), `../${MAIN_APP_CONFIG}`);
+
+  const projectConfig = _loadRequiredConfigFile(
+    path.join(process.cwd(), `../../../${PROJECT_CONFIG}`)
+  );
+
+  const mainAppConfig = _loadRequiredConfigFile(configPath);
+
+  const crmCardsSubConfigFiles = mainAppConfig?.extensions?.crm?.cards;
+  if (!crmCardsSubConfigFiles) {
+    logger.error(
+      `The "extensions.crm.cards" array in ${configPath} is missing, it is a required configuration property`
+    );
+    process.exit(1);
+  } else if (crmCardsSubConfigFiles.length === 0) {
+    logger.error(
+      `The "extensions.crm.cards" array in ${configPath} is empty, it is a required configuration property.`
+    );
+    process.exit(1);
+  }
+
+  const outputConfig = {};
+
+  crmCardsSubConfigFiles.forEach(card => {
+    const extensionsRemoved = card.file.replace('extensions/', '');
+    const cardConfigPath = path.join(process.cwd(), extensionsRemoved);
+    // Get the path to the config file relative to the extensions directory
+    const configPathRelativeToExtensions = path.parse(extensionsRemoved)?.dir;
+
+    try {
+      const cardConfig = require(cardConfigPath);
+
+      // Join the two relative paths
+      const entryPointPath = path.join(
+        configPathRelativeToExtensions,
+        cardConfig.data?.module?.file
+      );
+
+      cardConfig.data.module.file = entryPointPath;
+
+      outputConfig[entryPointPath] = cardConfig;
+      outputConfig[entryPointPath].data.output = getUrlSafeFileName(
+        entryPointPath
+      );
+      outputConfig[entryPointPath].data.appName = projectConfig.name;
+    } catch (e) {
+      let errorMessage = e?.message;
+      if (e?.code === 'MODULE_NOT_FOUND') {
+        errorMessage = `Unable to load "${cardConfigPath}" file. \nPlease make sure you are running the command from the src/app/extensions directory and that your card JSON config exists within it.`;
+      }
+
+      logger.error(errorMessage);
+      process.exit(1);
+    }
+  });
+
+  return outputConfig;
+}
+
+module.exports = {
+  loadConfig,
+  getExtensionConfig,
+};

package/constants.js

@@ -0,0 +1,25 @@
+const VITE_DEFAULT_PORT = 5173;
+const MAIN_APP_CONFIG = 'app.json';
+const PROJECT_CONFIG = 'hsproject.json';
+const OUTPUT_DIR = 'dist';
+
+const ROLLUP_OPTIONS = {
+  // Deps to exclude from the bundle
+  external: ['react', 'react-dom', '@remote-ui/react'],
+  output: {
+    // Maps libs to the variables to be injected via the window
+    globals: {
+      react: 'React',
+      '@remote-ui/react': 'RemoteUI',
+    },
+    extend: true,
+  },
+};
+
+module.exports = {
+  VITE_DEFAULT_PORT,
+  ROLLUP_OPTIONS,
+  MAIN_APP_CONFIG,
+  PROJECT_CONFIG,
+  OUTPUT_DIR,
+};

package/dev.js

@@ -0,0 +1,165 @@
+const express = require('express');
+const chokidar = require('chokidar');
+const { WebSocketServer } = require('ws');
+const http = require('http');
+const logger = require('./logger');
+const { build } = require('vite');
+const { getExtensionConfig } = require('./config');
+const fs = require('fs');
+const path = require('path');
+const { ROLLUP_OPTIONS } = require('./constants');
+
+async function _devBuild(config, outputDir, extension) {
+  const extensionConfig = await getExtensionConfig(config, extension);
+  build({
+    define: {
+      'process.env.NODE_ENV': JSON.stringify(
+        process.env.NODE_ENV || 'development'
+      ),
+    },
+    build: {
+      watch: {
+        clearScreen: false,
+        exclude: [
+          'node_modules',
+          'package.json',
+          'package-lock.json',
+          'app.json',
+        ],
+      },
+      lib: {
+        entry: extensionConfig?.file,
+        name: extensionConfig?.output,
+        formats: ['iife'],
+        fileName: () => extensionConfig?.output,
+      },
+      rollupOptions: ROLLUP_OPTIONS,
+      outDir: outputDir,
+      emptyOutDir: true,
+      minify: false,
+    },
+  });
+  return extensionConfig;
+}
+
+function _startDevServer(outputDir, port, extensionConfig) {
+  const app = express();
+  const server = http.createServer(app);
+
+  // Host the OUTPUT_DIR
+  app.use(express.static(outputDir));
+
+  // Setup websocket server to send messages to browser on bundle update
+  const wss = new WebSocketServer({ server });
+
+  const callback = `http://localhost:${port}/${extensionConfig?.output}`;
+
+  function broadcast(message) {
+    if (wss.clients.size === 0) {
+      logger.warn('No browsers connected to update');
+      return;
+    }
+    wss.clients.forEach(client => {
+      client.send(JSON.stringify(message));
+    });
+  }
+
+  wss.on('connection', client => {
+    let base64Callback;
+    try {
+      base64Callback = fs
+        .readFileSync(
+          path.join(process.cwd(), outputDir, extensionConfig?.output)
+        )
+        .toString('base64');
+    } catch (e) {
+      logger.warn(
+        'File not found:',
+        path.join(process.cwd(), outputDir, extensionConfig?.output)
+      );
+    }
+
+    logger.info('Browser connected and listening for bundle updates');
+    client.send(
+      JSON.stringify({
+        event: 'start',
+        appName: extensionConfig?.appName,
+        extension: extensionConfig?.name,
+        callback: base64Callback
+          ? `data:text/javascript;base64,${base64Callback}`
+          : undefined,
+      })
+    );
+  });
+
+  // Start the express and websocket servers
+  server.listen({ port }, () => {
+    logger.warn(`Listening at ${callback}`);
+  });
+
+  // Setup a watcher on the dist directory and update broadcast
+  //to all clients when an event is observed
+  chokidar.watch(outputDir).on('change', file => {
+    const base64Callback = fs
+      .readFileSync(path.join(process.cwd(), file))
+      .toString('base64');
+    logger.debug(`${file} updated, reloading extension`);
+    broadcast({
+      event: 'update',
+      appName: extensionConfig?.appName,
+      extension: extensionConfig?.name,
+      callback: `data:text/javascript;base64,${base64Callback}`,
+    });
+  });
+
+  _configureShutDownHandlers(wss, broadcast, extensionConfig, server);
+}
+
+function _configureShutDownHandlers(wss, broadcast, extensionConfig, server) {
+  function shutdown() {
+    logger.warn('\nSending shutdown signal to connected browser');
+    broadcast({
+      event: 'shutdown',
+      appName: extensionConfig?.appName,
+      extension: extensionConfig?.name,
+    });
+    logger.warn('\nCleaning up after ourselves...\n');
+
+    // Terminate all active connections, close seems to hang otherwise
+    wss.clients.forEach(client => {
+      client.terminate();
+    });
+
+    // Shut down the WebSocket server first since it is connected to the express server
+    wss.close(webSocketError => {
+      if (webSocketError) {
+        logger.error(
+          `WebSocket Server unable to shutdown correctly, ${webSocketError}`
+        );
+      } else {
+        logger.warn('WebSocket Server stopped');
+      }
+      // Shutdown the express server
+      server.close(error => {
+        if (error) {
+          logger.error(`Express server unable to shutdown correctly, ${error}`);
+        } else {
+          logger.warn('Express server stopped');
+        }
+        process.exit(webSocketError || error ? 1 : 0);
+      });
+    });
+  }
+
+  process.on('SIGINT', shutdown);
+  process.on('SIGTERM', shutdown);
+}
+
+async function startDevMode(config, outputDir, port, extension) {
+  const extensionConfig = await _devBuild(config, outputDir, extension);
+  _startDevServer(outputDir, port, extensionConfig);
+}
+
+module.exports = {
+  startDevMode,
+};

package/index.js

@@ -0,0 +1,33 @@
+const { OUTPUT_DIR } = require('./constants');
+const { getUrlSafeFileName } = require('./utils');
+const { buildSingleExtension } = require('./build');
+const path = require('path');
+const manifestPlugin = require('./plugins/manifestPlugin');
+
+async function remoteBuild(root, entryPoint, outputDir) {
+  const allowedExtensions = ['.js', '.ts', '.tsx', '.jsx'];
+  const fileInfo = path.parse(entryPoint);
+
+  if (!allowedExtensions.includes(fileInfo.ext)) {
+    throw new Error(
+      `The last argument should be the filename you wish to build.  Supported file extensions are [${allowedExtensions.join(
+        ', '
+      )}]`
+    );
+  }
+
+  await buildSingleExtension({
+    file: entryPoint,
+    outputFileName: getUrlSafeFileName(entryPoint),
+    outputDir: outputDir || OUTPUT_DIR,
+    plugins: {
+      rollup: [manifestPlugin({ minify: true })],
+    },
+    minify: true,
+    root,
+  });
+}
+
+module.exports = {
+  remoteBuild,
+};

package/logger.js

@@ -0,0 +1,19 @@
+const { cyan, red, yellow, magenta } = require('console-log-colors');
+
+function info(message) {
+  console.log(cyan(message));
+}
+
+function error(message) {
+  console.error(red(message));
+}
+
+function warn(message) {
+  console.info(yellow(message));
+}
+
+function debug(message) {
+  console.debug(magenta(message));
+}
+
+module.exports = { info, error, warn, debug };

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@hubspot/ui-extensions-dev-server",
+  "version": "0.0.1-beta.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo 'test'"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "README.md",
+    "build.js",
+    "cli.js",
+    "config.js",
+    "constants.js",
+    "dev.js",
+    "logger.js",
+    "run.js",
+    "utils.js",
+    "tests/runTests.js",
+    "tests/testBuild.js",
+    "tests/testDevServer.js",
+    "plugins/manifestPlugin.js",
+    "index.js"
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "chokidar": "^3.5.3",
+    "command-line-args": "^5.2.1",
+    "command-line-usage": "^7.0.1",
+    "console-log-colors": "^0.4.0",
+    "express": "^4.18.2",
+    "process": "^0.11.10",
+    "prompts": "^2.4.2",
+    "vite": "^4.0.4",
+    "ws": "^8.12.1"
+  },
+  "bin": {
+    "hs-ui-extensions-dev-server": "run.js"
+  },
+  "eslintConfig": {
+    "env": {
+      "node": true
+    }
+  },
+  "engines": {
+    "node": ">=16"
+  },
+  "peerDependencies": {
+    "typescript": "^5.0.4"
+  },
+  "peerDependenciesMeta": {
+    "typescript": {
+      "optional": true
+    }
+  },
+  "gitHead": "0bfb66cacc456a73f05a40841938e6b42f87aaba"
+}

package/plugins/manifestPlugin.js

@@ -0,0 +1,108 @@
+const { readFileSync } = require('fs');
+const { normalize } = require('path');
+const logger = require('../logger');
+
+const DEFAULT_MANIFEST_NAME = 'manifest.json';
+const PACKAGE_LOCK_FILE = 'package-lock.json';
+const PACKAGE_FILE = 'package.json';
+const EXTENSIONS_PATH = 'src/app/extensions/';
+
+function plugin(options = {}) {
+  return {
+    name: 'ui-extensions-manifest-generation-plugin',
+    enforce: 'post', // run after default rollup plugins
+    generateBundle(_rollupOptions, bundle) {
+      const { output = DEFAULT_MANIFEST_NAME, minify = false } = options;
+      try {
+        const manifest = _generateManifestContents(bundle);
+        this.emitFile({
+          type: 'asset',
+          source: minify
+            ? JSON.stringify(manifest)
+            : JSON.stringify(manifest, null, 2),
+          fileName: normalize(output),
+        });
+      } catch (e) {
+        logger.warn(`\nUnable to write manifest file in ${output}, ${e}`);
+      }
+    },
+  };
+}
+
+function _generateManifestContents(bundle) {
+  const baseManifest = {
+    package: _loadPackageFile(),
+  };
+
+  // The keys to bundle are the filename without any path information
+  const bundles = Object.keys(bundle);
+
+  if (bundles.length === 1) {
+    return {
+      ..._generateManifestEntry(bundle[bundles[0]]),
+      ...baseManifest,
+    };
+  }
+
+  const manifest = bundles.reduce((acc, current) => {
+    return {
+      ...acc,
+      [current]: _generateManifestEntry(bundle[current], false),
+    };
+  }, {});
+
+  return {
+    ...manifest,
+    ...baseManifest,
+  };
+}
+
+function _generateManifestEntry(subBundle) {
+  const { facadeModuleId, moduleIds, modules } = subBundle;
+  return {
+    entry: _stripPathPriorToExtDir(facadeModuleId),
+    modules: _buildModulesInfo(moduleIds, modules),
+  };
+}
+
+function _loadJsonFileSafely(filename) {
+  try {
+    return JSON.parse(readFileSync(filename).toString());
+  } catch (e) {
+    return undefined;
+  }
+}
+
+function _loadPackageFile() {
+  // Look for package-lock.json then fallback to package.json
+  return (
+    _loadJsonFileSafely(PACKAGE_LOCK_FILE) || _loadJsonFileSafely(PACKAGE_FILE)
+  );
+}
+
+function _stripPathPriorToExtDir(filepath) {
+  return filepath.split(EXTENSIONS_PATH).pop();
+}
+
+function _buildModulesInfo(moduleIds, modules) {
+  return moduleIds.reduce(
+    (acc, mod) => {
+      const { renderedExports } = modules[mod];
+
+      const moduleData = {
+        module: _stripPathPriorToExtDir(mod),
+        renderedExports,
+      };
+
+      if (moduleData.module.includes('node_modules')) {
+        acc.external.push(moduleData);
+      } else {
+        acc.internal.push(moduleData);
+      }
+      return acc;
+    },
+    { internal: [], external: [] }
+  );
+}
+
+module.exports = plugin;

package/run.js

@@ -0,0 +1,31 @@
+#!/usr/bin/env node
+
+const { startDevMode } = require('./dev');
+const { loadConfig } = require('./config');
+const { buildAllExtensions, buildSingleExtension } = require('./build');
+const { VITE_DEFAULT_PORT, OUTPUT_DIR } = require('./constants');
+const { parseArgs, showHelp } = require('./cli');
+const { getUrlSafeFileName } = require('./utils');
+const manifestPlugin = require('./plugins/manifestPlugin');
+
+const { DEV_MODE, BUILD_MODE, port, extension, help } = parseArgs();
+const PORT = port || VITE_DEFAULT_PORT;
+
+if (help || !(DEV_MODE || BUILD_MODE)) {
+  showHelp(OUTPUT_DIR);
+}
+
+if (DEV_MODE) {
+  startDevMode(loadConfig(), OUTPUT_DIR, PORT, extension);
+} else if (BUILD_MODE) {
+  if (extension) {
+    buildSingleExtension({
+      file: extension,
+      outputFileName: getUrlSafeFileName(extension),
+      outputDir: OUTPUT_DIR,
+      plugins: { rollup: [manifestPlugin()] },
+    });
+  } else {
+    buildAllExtensions(loadConfig(), OUTPUT_DIR);
+  }
+}

package/tests/runTests.js

@@ -0,0 +1,31 @@
+#!/usr/bin/env node
+
+const { testBuild } = require('./testBuild');
+const { testDevServer } = require('./testDevServer');
+const logger = require('../logger');
+
+let devServerProcess;
+
+function handleFailure() {
+  if (devServerProcess) {
+    devServerProcess.kill();
+  }
+}
+
+process.on('SIGINT', () => {
+  handleFailure();
+});
+
+process.on('uncaughtException', () => {
+  handleFailure();
+});
+
+try {
+  testBuild(logger);
+  testDevServer(logger, devServerProcess);
+} catch (e) {
+  console.error(e.message);
+  logger.error('Tests failed 😭');
+  handleFailure();
+  process.exit(1);
+}

package/tests/testBuild.js

@@ -0,0 +1,93 @@
+const { execSync } = require('child_process');
+const fs = require('fs');
+const path = require('path');
+const assert = require('assert');
+
+function _testHelper(command, outputDirFiles) {
+  if (command) {
+    execSync(command);
+  }
+
+  // Make sure the files are getting generated in the dist dir
+  const distDir = path.join(process.cwd(), 'dist');
+  const filesInOutputDir = fs.readdirSync(distDir);
+  assert.deepStrictEqual(filesInOutputDir, outputDirFiles);
+
+  // Spot check the file contents to make sure they seem ok
+  filesInOutputDir.forEach(file => {
+    const fileContents = fs.readFileSync(path.join(distDir, file)).toString();
+    if (file === 'manifest.json') {
+      const manifest = JSON.parse(fileContents);
+      assert(manifest.entry);
+      assert(manifest.modules);
+      assert(manifest.modules.internal);
+      manifest.modules.internal.forEach(mod => {
+        assert(mod.module);
+        assert(mod.renderedExports);
+      });
+      assert(manifest.modules.external);
+      manifest.modules.external.forEach(mod => {
+        assert(mod.module);
+        assert(mod.renderedExports);
+      });
+      assert(manifest.package);
+      assert(manifest.package.packages);
+    } else {
+      const stringsToSpotCheck = [
+        '.createRemoteReactComponent',
+        '.createElement',
+        'hubspot.extend',
+        'React',
+        'RemoteUI',
+      ];
+      stringsToSpotCheck.forEach(stringToCheck => {
+        assert(
+          fileContents.includes(stringToCheck),
+          `File ${file} contents should contain: "${stringToCheck}"`
+        );
+      });
+    }
+  });
+}
+
+function testDefaultBuildPath(logger) {
+  logger.warn('- Test default build path started 🤞');
+  _testHelper('hs-ui-extensions-dev-server build', [
+    'PhoneLines.js',
+    'ProgressBarApp.js',
+  ]);
+  logger.info('- Test default build path passed 🚀');
+}
+
+function testBuildWithExtensionFlag(logger) {
+  logger.warn('- Test build with flags started 🤞');
+  _testHelper(
+    'hs-ui-extensions-dev-server build --extension ProgressBarApp.tsx',
+    ['ProgressBarApp.js', 'manifest.json']
+  );
+  logger.info('- Test build with flags passed 🚀');
+}
+
+function testDefInfraBuildFileName(logger) {
+  const { remoteBuild } = require('../index');
+  logger.warn('- Test remoteBuild function 🤞');
+
+  remoteBuild(process.cwd(), 'ProgressBarApp.tsx', 'dist');
+  _testHelper(null, ['ProgressBarApp.js', 'manifest.json']);
+  logger.info('- Test build with entrypoint as arg 🚀');
+}
+
+function testBuild(logger) {
+  logger.warn('\nBuild Tests started - External Devs 🤞');
+  testDefaultBuildPath(logger);
+  testBuildWithExtensionFlag(logger);
+  logger.info('Build Tests passed - External Devs🚀');
+
+  logger.warn('\nBuild Tests started - Dev Infra 🤞');
+  testDefInfraBuildFileName(logger);
+  logger.info('Build Tests passed - Dev Infra 🚀');
+}
+
+module.exports = {
+  testBuild,
+};

package/tests/testDevServer.js

@@ -0,0 +1,149 @@
+const { spawn } = require('child_process');
+const fs = require('fs');
+const path = require('path');
+const assert = require('assert');
+const http = require('http');
+const WebSocket = require('ws');
+
+const testResults = {
+  buildTestPassed: false,
+  expressTestPassed: false,
+  webSocketTestPassed: false,
+};
+
+const port = 5172;
+
+function testDevServer(logger, devServerProcess) {
+  logger.warn('\nDev Server Tests started 🤞');
+
+  // We need to use spawn here because it will put the process into the background,
+  // which is required because dev mode is a blocking process and we want to test that
+  // the express server and websocket server are starting properly
+  devServerProcess = spawn('hs-ui-extensions-dev-server', [
+    'dev',
+    '--extension',
+    'PhoneLines.tsx',
+    '--port',
+    `${port}`,
+  ]);
+
+  devServerProcess.stdout.on('data', buffer => {
+    const data = buffer.toString().toLowerCase();
+    console.log('[Dev Server Log]:', data);
+    if (data.includes('built in')) {
+      testBuild(testResults, logger);
+    }
+    if (data.includes('listening') && data.includes(`localhost:${port}`)) {
+      setTimeout(() => {
+        testExpressServer(testResults, logger);
+        testWebSocketServer(testResults, logger);
+      }, 1000);
+    }
+  });
+
+  // If the dev server writes to stderr, log the error and throw a new error
+  devServerProcess.stderr.on('data', buffer => {
+    const data = buffer.toString();
+    logger.error(data.toString());
+    throw new Error(data);
+  });
+
+  // When the process closes make sure we met all the success conditions
+  devServerProcess.on('close', () => {
+    if (metConditions()) {
+      logger.info('Dev Server Tests passed 🚀');
+    } else {
+      console.log(testResults);
+      logger.error('Tests failed 😭');
+    }
+  });
+
+  const interval = setInterval(callback, 1000);
+  let count = 0;
+  function callback() {
+    count += 1;
+    if (metConditions() || count === 5) {
+      devServerProcess.kill();
+      clearInterval(interval);
+    }
+  }
+}
+
+function metConditions() {
+  const {
+    buildTestPassed,
+    expressTestPassed,
+    webSocketTestPassed,
+  } = testResults;
+  return buildTestPassed && expressTestPassed && webSocketTestPassed;
+}
+
+// Test that the files were built in the proper location and spot
+// check the contents of the files.
+function testBuild(results, logger) {
+  // // Make sure the files are getting generated in the dist dir
+  const distDir = path.join(process.cwd(), 'dist');
+  const filesInOutputDir = fs.readdirSync(distDir);
+  assert.deepStrictEqual(filesInOutputDir, ['PhoneLines.js']);
+  const fileContents = fs
+    .readFileSync(path.join(distDir, filesInOutputDir[0]))
+    .toString();
+  const stringsToSpotCheck = [
+    '.createRemoteReactComponent',
+    '.createElement',
+    'hubspot.extend',
+    'React',
+    'RemoteUI',
+  ];
+  stringsToSpotCheck.forEach(stringToCheck => {
+    assert(
+      fileContents.includes(stringToCheck),
+      `File ${filesInOutputDir[0]} contents should contain: "${stringToCheck}"`
+    );
+  });
+  logger.info('- Build succeeded 🚀');
+  results.buildTestPassed = true;
+}
+
+// Test that the express server is running on the expected port
+// and that it is serving the files as expected.
+function testExpressServer(results, logger) {
+  http.get(
+    {
+      host: 'localhost',
+      port,
+      path: '/PhoneLines.js',
+    },
+    response => {
+      if (response.statusCode !== 200) {
+        throw Error('Error with express server');
+      }
+      logger.info('- Express server connected and serving files 🚀');
+      results.expressTestPassed = true;
+    }
+  );
+}
+
+// Test the the web socket server is running on the expected port and
+// that we are able to receive messages from it.
+function testWebSocketServer(results, logger) {
+  const fileContents = fs
+    .readFileSync(path.join('dist', 'PhoneLines.js'))
+    .toString('base64');
+
+  const ws = new WebSocket(`ws://localhost:${port}`);
+  ws.on('message', messageBuffer => {
+    const message = JSON.parse(messageBuffer.toString());
+    console.log('[WebSocket Message]:', message);
+    assert(message.event === 'start' || message.event === 'update');
+    assert(message.appName === 'example-app-remote-ui');
+    assert.strictEqual(message.extension, 'Phone Lines');
+    assert(message.callback, `data:text/javascript;base64,${fileContents}`);
+    logger.info('- WebSocket server connected and sending messages 🚀');
+    results.webSocketTestPassed = true;
+  });
+}
+
+module.exports = {
+  testDevServer,
+};

package/utils.js

@@ -0,0 +1,10 @@
+const path = require('path');
+
+function getUrlSafeFileName(filePath) {
+  const { name } = path.parse(filePath);
+  return encodeURIComponent(`${name}.js`);
+}
+
+module.exports = {
+  getUrlSafeFileName,
+};