@hubspot/cli 4.2.1-beta.2 → 4.2.1-beta.4

package/lib/LocalDevManager.js

@@ -1,40 +1,32 @@
-const chokidar = require('chokidar');
 const path = require('path');
-const { default: PQueue } = require('p-queue');
+const chokidar = require('chokidar');
+const chalk = require('chalk');
 const { i18n } = require('./lang');
 const { logger } = require('@hubspot/cli-lib/logger');
-const {
-  isSpecifiedError,
-} = require('@hubspot/cli-lib/errorHandlers/apiErrors');
 const { handleKeypress } = require('@hubspot/cli-lib/lib/process');
 const {
-  logApiErrorInstance,
-  ApiErrorContext,
-} = require('@hubspot/cli-lib/errorHandlers');
-const {
-  PROJECT_BUILD_TEXT,
-  PROJECT_DEPLOY_TEXT,
-  ERROR_TYPES,
-} = require('@hubspot/cli-lib/lib/constants');
-const { isAllowedExtension } = require('@hubspot/cli-lib/path');
-const { shouldIgnoreFile } = require('@hubspot/cli-lib/ignoreRules');
-const {
-  cancelStagedBuild,
-  uploadFileToBuild,
-  deleteFileFromBuild,
-  provisionBuild,
-  queueBuild,
-} = require('@hubspot/cli-lib/api/dfs');
+  getAccountId,
+  getConfigDefaultAccount,
+} = require('@hubspot/cli-lib/lib/config');
+const { PROJECT_CONFIG_FILE } = require('@hubspot/cli-lib/lib/constants');
 const SpinniesManager = require('./SpinniesManager');
 const DevServerManager = require('./DevServerManager');
 const { EXIT_CODES } = require('./enums/exitCodes');
-const { pollProjectBuildAndDeploy } = require('./projects');
-const { uiAccountDescription, uiLink } = require('./ui');
-
-const i18nKey = 'cli.lib.LocalDevManager';
-
-const BUILD_DEBOUNCE_TIME_LONG = 5000;
-const BUILD_DEBOUNCE_TIME_SHORT = 3500;
+const { getProjectDetailUrl } = require('./projects');
+const {
+  APP_COMPONENT_CONFIG,
+  COMPONENT_TYPES,
+  findProjectComponents,
+  getAppCardConfigs,
+} = require('./projectStructure');
+const {
+  UI_COLORS,
+  uiCommandReference,
+  uiAccountDescription,
+  uiBetaMessage,
+  uiLink,
+  uiLine,
+} = require('./ui');
 
 const WATCH_EVENTS = {
   add: 'add',
@@ -43,30 +35,22 @@ const WATCH_EVENTS = {
   unlinkDir: 'unlinkDir',
 };
 
-const UPLOAD_PERMISSIONS = {
-  always: 'always',
-  manual: 'manual',
-  never: 'never',
-};
+const i18nKey = 'cli.lib.LocalDevManager';
 
 class LocalDevManager {
   constructor(options) {
     this.targetAccountId = options.targetAccountId;
     this.projectConfig = options.projectConfig;
     this.projectDir = options.projectDir;
-    this.uploadPermission =
-      options.uploadPermission || UPLOAD_PERMISSIONS.always;
     this.debug = options.debug || false;
+    this.deployedBuild = options.deployedBuild;
+    this.watcher = null;
+    this.uploadWarnings = {};
 
     this.projectSourceDir = path.join(
       this.projectDir,
       this.projectConfig.srcDir
     );
-    this.watcher = null;
-    this.uploadQueue = null;
-    this.standbyChanges = [];
-    this.debouncedBuild = null;
-    this.currentStagedBuildId = null;
 
     if (!this.targetAccountId || !this.projectConfig || !this.projectDir) {
       logger.log(i18n(`${i18nKey}.failedToInitialize`));
@@ -75,633 +59,315 @@ class LocalDevManager {
   }
 
   async start() {
+    SpinniesManager.stopAll();
     SpinniesManager.init();
 
-    this.watcher = chokidar.watch(this.projectSourceDir, {
-      ignoreInitial: true,
-      ignored: file => shouldIgnoreFile(file),
-    });
+    // Local dev currently relies on the existence of a deployed build in the target account
+    if (!this.deployedBuild) {
+      logger.error(
+        i18n(`${i18nKey}.noDeployedBuild`, {
+          accountIdentifier: uiAccountDescription(this.targetAccountId),
+          uploadCommand: this.getUploadCommand(),
+        })
+      );
+      logger.log();
+      process.exit(EXIT_CODES.SUCCESS);
+    }
 
-    this.uploadQueue = new PQueue({ concurrency: 10 });
+    const components = await findProjectComponents(this.projectSourceDir);
 
-    if (this.debug) {
-      this.uploadQueue.on('error', error => {
-        logger.debug(error);
-      });
+    // The project is empty, there is nothing to run locally
+    if (!components.length) {
+      logger.error(i18n(`${i18nKey}.noComponents`));
+      process.exit(EXIT_CODES.SUCCESS);
     }
 
-    console.clear();
-    SpinniesManager.removeAll();
+    const runnableComponents = components.filter(
+      component => component.runnable
+    );
 
-    logger.log(i18n(`${i18nKey}.header.betaMessage`));
-    logger.log();
+    // The project does not contain any components that support local development
+    if (!runnableComponents.length) {
+      logger.error(i18n(`${i18nKey}.noRunnableComponents`));
+      process.exit(EXIT_CODES.SUCCESS);
+    }
+
+    const setupSucceeded = await this.devServerSetup(runnableComponents);
+
+    if (!setupSucceeded) {
+      process.exit(EXIT_CODES.ERROR);
+    } else if (!this.debug) {
+      console.clear();
+    }
 
-    this.updateConsoleHeader();
+    uiBetaMessage(i18n(`${i18nKey}.betaMessage`));
+    logger.log();
+    logger.log(
+      chalk.hex(UI_COLORS.SORBET)(
+        i18n(`${i18nKey}.running`, {
+          accountIdentifier: uiAccountDescription(this.targetAccountId),
+          projectName: this.projectConfig.name,
+        })
+      )
+    );
+    logger.log(
+      uiLink(
+        i18n(`${i18nKey}.viewInHubSpotLink`),
+        getProjectDetailUrl(this.projectConfig.name, this.targetAccountId)
+      )
+    );
+    logger.log();
+    logger.log(i18n(`${i18nKey}.quitHelper`));
+    uiLine();
+    logger.log();
 
     await this.devServerStart();
 
-    this.uploadQueue.start();
-    await this.startWatching();
+    // Initialize project file watcher to detect configuration file changes
+    this.startWatching(runnableComponents);
 
     this.updateKeypressListeners();
 
-    this.updateConsoleHeader();
+    this.monitorConsoleOutput();
+
+    // Verify that there are no mismatches between components in the local project
+    // and components in the deployed build of the project.
+    this.compareLocalProjectToDeployed(runnableComponents);
   }
 
   async stop() {
-    this.clearConsoleContent();
-
     SpinniesManager.add('cleanupMessage', {
       text: i18n(`${i18nKey}.exitingStart`),
     });
 
     await this.stopWatching();
-    await this.devServerCleanup();
-
-    let exitCode = EXIT_CODES.SUCCESS;
-
-    if (this.currentStagedBuildId) {
-      try {
-        await cancelStagedBuild(this.targetAccountId, this.projectConfig.name);
-      } catch (err) {
-        if (
-          !isSpecifiedError(err, {
-            subCategory: ERROR_TYPES.BUILD_NOT_IN_PROGRESS,
-          })
-        ) {
-          logApiErrorInstance(
-            err,
-            new ApiErrorContext({
-              accountId: this.targetAccountId,
-              projectName: this.projectConfig.name,
-            })
-          );
-          exitCode = EXIT_CODES.ERROR;
-        }
-      }
-    }
 
-    if (exitCode === EXIT_CODES.SUCCESS) {
-      SpinniesManager.succeed('cleanupMessage', {
-        text: i18n(`${i18nKey}.exitingSucceed`),
-      });
-    } else {
+    const cleanupSucceeded = await this.devServerCleanup();
+
+    if (!cleanupSucceeded) {
       SpinniesManager.fail('cleanupMessage', {
         text: i18n(`${i18nKey}.exitingFail`),
       });
+      process.exit(EXIT_CODES.ERROR);
     }
 
-    process.exit(exitCode);
-  }
-
-  updateConsoleHeader() {
-    SpinniesManager.addOrUpdate('devModeRunning', {
-      text: i18n(`${i18nKey}.header.running`, {
-        accountIdentifier: uiAccountDescription(this.targetAccountId),
-        projectName: this.projectConfig.name,
-      }),
-      isParent: true,
-      category: 'header',
-    });
-    SpinniesManager.addOrUpdate('devModeStatus', {
-      text: i18n(`${i18nKey}.header.status.clean`),
-      status: 'non-spinnable',
-      indent: 1,
-      category: 'header',
-    });
-
-    const viewText = DevServerManager.initialized
-      ? uiLink(
-          i18n(`${i18nKey}.header.viewInHubSpotLink`),
-          DevServerManager.generateURL(`hs/project`),
-          {
-            inSpinnies: true,
-          }
-        )
-      : ' ';
-
-    SpinniesManager.addOrUpdate('viewInHubSpotLink', {
-      text: viewText,
-      status: 'non-spinnable',
-      indent: 1,
-      category: 'header',
-    });
-    SpinniesManager.addOrUpdate('spacer-1', {
-      text: ' ',
-      status: 'non-spinnable',
-      category: 'header',
+    SpinniesManager.succeed('cleanupMessage', {
+      text: i18n(`${i18nKey}.exitingSucceed`),
     });
-    SpinniesManager.addOrUpdate('quitHelper', {
-      text: i18n(`${i18nKey}.header.quitHelper`),
-      status: 'non-spinnable',
-      indent: 1,
-      category: 'header',
-    });
-    SpinniesManager.addOrUpdate('lineSeparator', {
-      text: '-'.repeat(50),
-      status: 'non-spinnable',
-      noIndent: true,
-      category: 'header',
-    });
-  }
-
-  clearConsoleContent() {
-    SpinniesManager.removeAll({ preserveCategory: 'header' });
+    process.exit(EXIT_CODES.SUCCESS);
   }
 
   updateKeypressListeners() {
     handleKeypress(async key => {
       if ((key.ctrl && key.name === 'c') || key.name === 'q') {
         this.stop();
-      } else if (
-        (key.name === 'y' || key.name === 'n') &&
-        this.uploadPermission === UPLOAD_PERMISSIONS.manual &&
-        this.hasAnyUnsupportedStandbyChanges()
-      ) {
-        SpinniesManager.remove('manualUploadRequired');
-        SpinniesManager.remove('manualUploadExplanation1');
-        SpinniesManager.remove('manualUploadExplanation2');
-        SpinniesManager.remove('manualUploadPrompt');
-
-        if (key.name === 'y') {
-          SpinniesManager.add(null, {
-            text: i18n(`${i18nKey}.upload.manualUploadConfirmed`),
-            status: 'succeed',
-            succeedColor: 'white',
-            noIndent: true,
-          });
-          this.updateDevModeStatus('manualUpload');
-          await this.createNewStagingBuild();
-          this.flushStandbyChanges();
-          await this.queueBuild();
-        } else if (key.name === 'n') {
-          SpinniesManager.add(null, {
-            text: i18n(`${i18nKey}.upload.manualUploadSkipped`),
-            status: 'fail',
-            failColor: 'white',
-            noIndent: true,
-          });
-        }
       }
     });
   }
 
-  logBuildError(buildStatus = {}) {
-    const subTasks = buildStatus[PROJECT_BUILD_TEXT.SUBTASK_KEY] || [];
-    const failedSubTasks = subTasks.filter(task => task.status === 'FAILURE');
-
-    if (failedSubTasks.length) {
-      this.updateDevModeStatus('buildError');
-
-      failedSubTasks.forEach(failedSubTask => {
-        SpinniesManager.add(null, {
-          text: failedSubTask.errorMessage,
-          status: 'fail',
-          failColor: 'white',
-          indent: 1,
-        });
-      });
-    }
-  }
-
-  logDeployError(deployStatus = {}) {
-    const subTasks = deployStatus[PROJECT_DEPLOY_TEXT.SUBTASK_KEY] || [];
-    const failedSubTasks = subTasks.filter(task => task.status === 'FAILURE');
-
-    if (failedSubTasks.length) {
-      this.updateDevModeStatus('deployError');
+  getUploadCommand() {
+    const currentDefaultAccount = getConfigDefaultAccount();
 
-      failedSubTasks.forEach(failedSubTask => {
-        SpinniesManager.add(null, {
-          text: failedSubTask.errorMessage,
-          status: 'fail',
-          failColor: 'white',
-          indent: 1,
-        });
-      });
-    }
-  }
-
-  updateDevModeStatus(langKey) {
-    SpinniesManager.update('devModeStatus', {
-      text: i18n(`${i18nKey}.header.status.${langKey}`),
-      status: 'non-spinnable',
-      noIndent: true,
-    });
-  }
-
-  async pauseUploadQueue() {
-    this.uploadQueue.pause();
-    await this.uploadQueue.onIdle();
-  }
-
-  hasAnyUnsupportedStandbyChanges() {
-    return this.standbyChanges.some(({ supported }) => !supported);
+    return this.targetAccountId !== getAccountId(currentDefaultAccount)
+      ? uiCommandReference(
+          `hs project upload --account=${this.targetAccountId}`
+        )
+      : uiCommandReference('hs project upload');
   }
 
-  async createNewStagingBuild() {
-    try {
-      const { buildId } = await provisionBuild(
-        this.targetAccountId,
-        this.projectConfig.name,
-        this.projectConfig.platformVersion
+  logUploadWarning(reason) {
+    const warning = reason || i18n(`${i18nKey}.uploadWarning.defaultWarning`);
+
+    // Avoid logging the warning to the console if it is currently the most
+    // recently logged warning. We do not want to spam the console with the same message.
+    if (!this.uploadWarnings[warning]) {
+      logger.log();
+      logger.warn(i18n(`${i18nKey}.uploadWarning.header`, { warning }));
+      logger.log(
+        i18n(`${i18nKey}.uploadWarning.stopDev`, {
+          command: uiCommandReference('hs project dev'),
+        })
+      );
+      logger.log(
+        i18n(`${i18nKey}.uploadWarning.runUpload`, {
+          command: this.getUploadCommand(),
+        })
+      );
+      logger.log(
+        i18n(`${i18nKey}.uploadWarning.restartDev`, {
+          command: uiCommandReference('hs project dev'),
+        })
       );
-      this.currentStagedBuildId = buildId;
-    } catch (err) {
-      logger.debug(err);
-      if (isSpecifiedError(err, { subCategory: ERROR_TYPES.PROJECT_LOCKED })) {
-        await cancelStagedBuild(this.targetAccountId, this.projectConfig.name);
-        SpinniesManager.add(null, {
-          text: i18n(`${i18nKey}.previousStagingBuildCancelled`),
-          status: 'non-spinnable',
-        });
-      }
-      this.stop();
-    }
-  }
 
-  async startWatching() {
-    if (this.uploadPermission === UPLOAD_PERMISSIONS.always) {
-      await this.createNewStagingBuild();
+      this.mostRecentUploadWarning = warning;
+      this.uploadWarnings[warning] = true;
     }
-
-    this.watcher.on('add', async filePath => {
-      this.handleWatchEvent(filePath, WATCH_EVENTS.add);
-    });
-    this.watcher.on('change', async filePath => {
-      this.handleWatchEvent(filePath, WATCH_EVENTS.change);
-    });
-    this.watcher.on('unlink', async filePath => {
-      this.handleWatchEvent(filePath, WATCH_EVENTS.unlink);
-    });
-    this.watcher.on('unlinkDir', async filePath => {
-      this.handleWatchEvent(filePath, WATCH_EVENTS.unlinkDir);
-    });
   }
 
-  async handleWatchEvent(filePath, event) {
-    const changeInfo = {
-      event,
-      filePath,
-      remotePath: path.relative(this.projectSourceDir, filePath),
-    };
+  monitorConsoleOutput() {
+    const originalStdoutWrite = process.stdout.write.bind(process.stdout);
 
-    if (changeInfo.filePath.includes('dist')) {
-      return;
-    }
-
-    if (this.uploadPermission !== UPLOAD_PERMISSIONS.always) {
-      this.handlePreventedUpload(changeInfo);
-      return;
-    }
-
-    this.addChangeToStandbyQueue({ ...changeInfo, supported: false });
+    process.stdout.write = function(chunk, encoding, callback) {
+      // Reset the most recently logged warning
+      if (
+        this.mostRecentUploadWarning &&
+        this.uploadWarnings[this.mostRecentUploadWarning]
+      ) {
+        delete this.uploadWarnings[this.mostRecentUploadWarning];
+      }
 
-    if (!this.uploadQueue.isPaused) {
-      this.flushStandbyChanges();
-    }
+      return originalStdoutWrite(chunk, encoding, callback);
+    }.bind(this);
   }
 
-  handlePreventedUpload(changeInfo) {
-    const { remotePath } = changeInfo;
+  compareLocalProjectToDeployed(runnableComponents) {
+    const deployedComponentNames = this.deployedBuild.subbuildStatuses.map(
+      subbuildStatus => subbuildStatus.buildName
+    );
 
-    if (this.uploadPermission === UPLOAD_PERMISSIONS.never) {
-      this.updateDevModeStatus('noUploadsAllowed');
+    let missingComponents = [];
 
-      SpinniesManager.add('noUploadsAllowed', {
-        text: i18n(`${i18nKey}.upload.noUploadsAllowed`, {
-          filePath: remotePath,
-        }),
-        status: 'fail',
-        failColor: 'white',
-        noIndent: true,
-      });
-    } else {
-      this.updateDevModeStatus('manualUploadRequired');
+    runnableComponents.forEach(({ type, config, path }) => {
+      if (type === COMPONENT_TYPES.app) {
+        const cardConfigs = getAppCardConfigs(config, path);
 
-      const addedToQueue = this.addChangeToStandbyQueue({
-        ...changeInfo,
-        supported: false,
-      });
+        if (!deployedComponentNames.includes(config.name)) {
+          missingComponents.push(
+            `${i18n(`${i18nKey}.uploadWarning.appLabel`)} ${config.name}`
+          );
+        }
 
-      if (addedToQueue) {
-        SpinniesManager.add('manualUploadRequired', {
-          text: i18n(`${i18nKey}.upload.manualUploadRequired`),
-          status: 'fail',
-          failColor: 'white',
-          noIndent: true,
-        });
-        SpinniesManager.add('manualUploadExplanation1', {
-          text: i18n(`${i18nKey}.upload.manualUploadExplanation1`),
-          status: 'non-spinnable',
-          indent: 1,
-        });
-        SpinniesManager.add('manualUploadExplanation2', {
-          text: i18n(`${i18nKey}.upload.manualUploadExplanation2`),
-          status: 'non-spinnable',
-          indent: 1,
-        });
-        SpinniesManager.add('manualUploadPrompt', {
-          text: i18n(`${i18nKey}.upload.manualUploadPrompt`),
-          status: 'non-spinnable',
-          indent: 1,
+        cardConfigs.forEach(cardConfig => {
+          if (
+            cardConfig.data &&
+            cardConfig.data.title &&
+            !deployedComponentNames.includes(cardConfig.data.title)
+          ) {
+            missingComponents.push(
+              `${i18n(`${i18nKey}.uploadWarning.uiExtensionLabel`)} ${
+                cardConfig.data.title
+              }`
+            );
+          }
         });
       }
+    });
+
+    if (missingComponents.length) {
+      this.logUploadWarning(
+        i18n(`${i18nKey}.uploadWarning.missingComponents`, {
+          missingComponents: missingComponents.join(', '),
+        })
+      );
     }
   }
 
-  addChangeToStandbyQueue(changeInfo) {
-    const { event, filePath } = changeInfo;
+  startWatching(runnableComponents) {
+    this.watcher = chokidar.watch(this.projectDir, {
+      ignoreInitial: true,
+    });
 
-    if (event === WATCH_EVENTS.add || event === WATCH_EVENTS.change) {
-      if (!isAllowedExtension(filePath, ['jsx', 'tsx'])) {
-        SpinniesManager.add(null, {
-          text: i18n(`${i18nKey}.upload.extensionNotAllowed`, {
-            filePath,
-          }),
-          status: 'non-spinnable',
-        });
-        return false;
-      }
-    }
-    if (shouldIgnoreFile(filePath, true)) {
-      SpinniesManager.add(null, {
-        text: i18n(`${i18nKey}.upload.fileIgnored`, {
-          filePath,
-        }),
-        status: 'non-spinnable',
+    const configPaths = runnableComponents
+      .filter(({ type }) => type === COMPONENT_TYPES.app)
+      .map(component => {
+        const appConfigPath = path.join(component.path, APP_COMPONENT_CONFIG);
+        return appConfigPath;
       });
-      return false;
-    }
 
-    const existingIndex = this.standbyChanges.findIndex(
-      standyChangeInfo => standyChangeInfo.filePath === filePath
-    );
+    const projectConfigPath = path.join(this.projectDir, PROJECT_CONFIG_FILE);
+    configPaths.push(projectConfigPath);
 
-    if (existingIndex > -1) {
-      // Make sure the most recent event to this file is the one that gets acted on
-      this.standbyChanges[existingIndex].event = event;
-    } else {
-      this.standbyChanges.push(changeInfo);
-    }
-    return true;
+    this.watcher.on('add', filePath => {
+      this.handleWatchEvent(filePath, WATCH_EVENTS.add, configPaths);
+    });
+    this.watcher.on('change', filePath => {
+      this.handleWatchEvent(filePath, WATCH_EVENTS.change, configPaths);
+    });
+    this.watcher.on('unlink', filePath => {
+      this.handleWatchEvent(filePath, WATCH_EVENTS.unlink, configPaths);
+    });
+    this.watcher.on('unlinkDir', filePath => {
+      this.handleWatchEvent(filePath, WATCH_EVENTS.unlinkDir, configPaths);
+    });
   }
 
-  async sendChanges(changeInfo) {
-    const { event, filePath, remotePath } = changeInfo;
-
-    try {
-      if (event === WATCH_EVENTS.add || event === WATCH_EVENTS.change) {
-        const { name: spinnerName } = SpinniesManager.add(null, {
-          text: i18n(`${i18nKey}.upload.uploadingAddChange`, {
-            filePath: remotePath,
-          }),
-          status: 'non-spinnable',
-        });
-        await uploadFileToBuild(
-          this.targetAccountId,
-          this.projectConfig.name,
-          filePath,
-          remotePath
-        );
-        SpinniesManager.update(spinnerName, {
-          text: i18n(`${i18nKey}.upload.uploadedAddChange`, {
-            filePath: remotePath,
-          }),
-          status: 'non-spinnable',
-        });
-      } else if (
-        event === WATCH_EVENTS.unlink ||
-        event === WATCH_EVENTS.unlinkDir
-      ) {
-        const { name: spinnerName } = SpinniesManager.add(null, {
-          text: i18n(`${i18nKey}.upload.uploadingRemoveChange`, {
-            filePath: remotePath,
-          }),
-          status: 'non-spinnable',
-        });
-        const path =
-          event === WATCH_EVENTS.unlinkDir ? `${remotePath}/` : remotePath;
-        await deleteFileFromBuild(
-          this.targetAccountId,
-          this.projectConfig.name,
-          path
-        );
-        SpinniesManager.update(spinnerName, {
-          text: i18n(`${i18nKey}.upload.uploadedRemoveChange`, {
-            filePath: remotePath,
-          }),
-          status: 'non-spinnable',
-        });
-      }
-    } catch (err) {
-      logger.debug(err);
-    }
+  async stopWatching() {
+    await this.watcher.close();
   }
 
-  debounceQueueBuild(changeInfo) {
-    const { event } = changeInfo;
-
-    if (this.uploadPermission === UPLOAD_PERMISSIONS.always) {
-      this.updateDevModeStatus('uploadPending');
-    }
-
-    if (this.debouncedBuild) {
-      clearTimeout(this.debouncedBuild);
+  handleWatchEvent(filePath, event, configPaths) {
+    if (configPaths.includes(filePath)) {
+      this.logUploadWarning();
+    } else {
+      this.devServerFileChange(filePath, event);
     }
-
-    const debounceWaitTime =
-      event === WATCH_EVENTS.add
-        ? BUILD_DEBOUNCE_TIME_LONG
-        : BUILD_DEBOUNCE_TIME_SHORT;
-
-    this.debouncedBuild = setTimeout(
-      this.queueBuild.bind(this),
-      debounceWaitTime
-    );
   }
 
-  async queueBuild() {
-    SpinniesManager.add(null, { text: ' ', status: 'non-spinnable' });
-
-    const { name: spinnerName } = SpinniesManager.add(null, {
-      text: i18n(`${i18nKey}.upload.uploadingChanges`, {
-        accountIdentifier: uiAccountDescription(this.targetAccountId),
-        buildId: this.currentStagedBuildId,
-      }),
-      noIndent: true,
-    });
-
-    await this.pauseUploadQueue();
-
-    let queueBuildError;
-
+  async devServerSetup(components) {
     try {
-      await queueBuild(
-        this.targetAccountId,
-        this.projectConfig.name,
-        this.projectConfig.platformVersion
-      );
-    } catch (err) {
-      queueBuildError = err;
-    }
-
-    if (queueBuildError) {
-      this.updateDevModeStatus('buildError');
-
-      logger.debug(queueBuildError);
-
-      SpinniesManager.fail(spinnerName, {
-        text: i18n(`${i18nKey}.upload.uploadedChangesFailed`, {
-          accountIdentifier: uiAccountDescription(this.targetAccountId),
-          buildId: this.currentStagedBuildId,
-        }),
-        failColor: 'white',
-        noIndent: true,
+      await DevServerManager.setup({
+        components,
+        debug: this.debug,
+        onUploadRequired: this.logUploadWarning.bind(this),
       });
-
-      if (
-        isSpecifiedError(queueBuildError, {
-          subCategory: ERROR_TYPES.MISSING_PROJECT_PROVISION,
-        })
-      ) {
-        SpinniesManager.add(null, {
-          text: i18n(`${i18nKey}.cancelledFromUI`),
-          status: 'non-spinnable',
-          indent: 1,
-        });
-        this.stop();
-      } else if (
-        queueBuildError &&
-        queueBuildError.error &&
-        queueBuildError.error.message
-      ) {
-        SpinniesManager.add(null, {
-          text: queueBuildError.error.message,
-          status: 'non-spinnable',
-          indent: 1,
-        });
-      }
-    } else {
-      const result = await pollProjectBuildAndDeploy(
-        this.targetAccountId,
-        this.projectConfig,
-        null,
-        this.currentStagedBuildId,
-        true
-      );
-
-      if (result.succeeded) {
-        this.updateDevModeStatus('clean');
-
-        SpinniesManager.succeed(spinnerName, {
-          text: i18n(`${i18nKey}.upload.uploadedChangesSucceeded`, {
-            accountIdentifier: uiAccountDescription(this.targetAccountId),
-            buildId: result.buildId,
-          }),
-          succeedColor: 'white',
-          noIndent: true,
-        });
-      } else {
-        SpinniesManager.fail(spinnerName, {
-          text: i18n(`${i18nKey}.upload.uploadedChangesFailed`, {
-            accountIdentifier: uiAccountDescription(this.targetAccountId),
-            buildId: result.buildId,
-          }),
-          failColor: 'white',
-          noIndent: true,
-        });
-
-        if (result.buildResult.status === 'FAILURE') {
-          this.logBuildError(result.buildResult);
-        } else if (result.deployResult.status === 'FAILURE') {
-          this.logDeployError(result.deployResult);
-        }
+      return true;
+    } catch (e) {
+      if (this.debug) {
+        logger.error(e);
       }
-    }
-
-    SpinniesManager.removeAll({ targetCategory: 'projectPollStatus' });
-
-    if (
-      !queueBuildError &&
-      this.uploadPermission === UPLOAD_PERMISSIONS.always
-    ) {
-      await this.createNewStagingBuild();
-    }
-
-    this.uploadQueue.start();
-
-    if (this.hasAnyUnsupportedStandbyChanges()) {
-      this.flushStandbyChanges();
-    }
-  }
-
-  flushStandbyChanges() {
-    if (this.standbyChanges.length) {
-      this.uploadQueue.addAll(
-        this.standbyChanges.map(changeInfo => {
-          return async () => {
-            if (
-              this.uploadPermission === UPLOAD_PERMISSIONS.always &&
-              !this.uploadQueue.isPaused
-            ) {
-              this.debounceQueueBuild(changeInfo);
-            }
-            await this.sendChanges(changeInfo);
-          };
-        })
+      logger.error(
+        i18n(`${i18nKey}.devServer.setupError`, { message: e.message })
       );
-      this.standbyChanges = [];
+      return false;
     }
   }
 
-  async stopWatching() {
-    await this.watcher.close();
-  }
-
-  handleServerLog(serverKey, ...args) {
-    SpinniesManager.add(null, {
-      text: `${args.join('')}`,
-      status: 'non-spinnable',
-    });
-  }
-
   async devServerStart() {
     try {
-      // Set this to true manually for now
-      DevServerManager.initialized = true;
-
       await DevServerManager.start({
         accountId: this.targetAccountId,
-        debug: this.debug,
-        spinniesLogger: this.handleServerLog,
         projectConfig: this.projectConfig,
-        projectSourceDir: this.projectSourceDir,
       });
     } catch (e) {
       if (this.debug) {
         logger.error(e);
       }
-      SpinniesManager.add(null, {
-        text: i18n(`${i18nKey}.devServer.startError`),
-        status: 'non-spinnable',
-      });
+      logger.error(
+        i18n(`${i18nKey}.devServer.startError`, { message: e.message })
+      );
+      process.exit(EXIT_CODES.ERROR);
+    }
+  }
+
+  devServerFileChange(filePath, event) {
+    try {
+      DevServerManager.fileChange({ filePath, event });
+    } catch (e) {
+      if (this.debug) {
+        logger.error(e);
+      }
+      logger.error(
+        i18n(`${i18nKey}.devServer.fileChangeError`, {
+          message: e.message,
+        })
+      );
     }
   }
 
   async devServerCleanup() {
     try {
       await DevServerManager.cleanup();
+      return true;
     } catch (e) {
       if (this.debug) {
         logger.error(e);
       }
-      SpinniesManager.add(null, {
-        text: i18n(`${i18nKey}.devServer.cleanupError`),
-        status: 'non-spinnable',
-      });
+      logger.error(
+        i18n(`${i18nKey}.devServer.cleanupError`, { message: e.message })
+      );
+      return false;
     }
   }
 }
 
-module.exports = { LocalDevManager, UPLOAD_PERMISSIONS };
+module.exports = LocalDevManager;