Adding support for Sandbox Storefront "Remote Control"

This featured, when configured with `rvw_devtools` cartridge, allows you to post messages to your Sandbox Storefront via an injected JS Script Tag.

Author: manifestinteractive

.browser-refresh

@@ -7,7 +7,7 @@ module.exports = {
   env: {
     es6: true,
     node: true,
-    browser: false
+    browser: true
   },
   plugins: [
     'prettier'
@@ -35,5 +35,8 @@ module.exports = {
       }
     ],
     'no-console': 0
+  },
+  globals: {
+    'io': true
   }
 }

.eslintrc.js

@@ -1,7 +1,4 @@
 .DS_Store
 node_modules
 npm-debug.log
-
-# Generated SSL Files
-localhost.crt
-localhost.key
+remote/ssl/sfcc-cli-localhost.*

.gitignore

@@ -13,9 +13,11 @@ Introduction
 
 Make developing for Salesforce Commerce Cloud work with any IDE on MacOS, Windows, and Linux.
 
-- [X] Easily Manage Multiple Clients & Instances
-- [X] Watch for code changes and upload in background ( without being prompted for passwords )
-- [X] Log Viewing with Advanced Search & Filter Capabilities
+![checkmark](https://sfcc-cli.s3.amazonaws.com/checkmark.png) Easily Manage Multiple Clients & Instances
+![checkmark](https://sfcc-cli.s3.amazonaws.com/checkmark.png) Watch for code changes and upload in background ( without being prompted for passwords )
+![checkmark](https://sfcc-cli.s3.amazonaws.com/checkmark.png) Support for Eclipse Build Processes
+![checkmark](https://sfcc-cli.s3.amazonaws.com/checkmark.png) Log Viewing with Advanced Search & Filter Capabilities
+![checkmark](https://sfcc-cli.s3.amazonaws.com/checkmark.png) Sandbox Storefront "Remote Control"
 
 Developer Overview
 ---
@@ -27,6 +29,7 @@ Developer Overview
 * [`sfcc delete`](docs/cmd-delete.md) - Delete Config for Client
 * [`sfcc watch`](docs/cmd-watch.md) - Watch for Changes and Push Updates
 * [`sfcc log`](docs/cmd-log.md) - View Logs with Advanced Search & Filter Capabilities
+* [`sfcc remote`](docs/cmd-remote.md) - Remote Control for your Sandbox
 * [`sfcc help`](docs/cmd-help.md) - Get Help when you need it
 
 #### Additional Information

README.md

@@ -47,7 +47,7 @@ const argv = yargs
   })
   .command('list', 'List Configured SFCC Clients')
   .command('delete <client> [instance]', 'Delete Config for Client')
-  .command('watch [client] [instance]', 'Watch for Code Changes and Push Updates', {
+  .command('watch [client] [instance]', 'Watch for Changes and Push Updates', {
     log: {
       describe: 'Pipe Output to ~/.sffc-cli.log',
       type: 'boolean',
@@ -112,29 +112,17 @@ const argv = yargs
       default: false
     }
   })
-  .command('live-reload [client] [instance]', 'Reload Sandbox Browser after file change', {
-    delay: {
-      alias: 'd',
-      describe: 'Timeout Delay after Upload (seconds)',
-      type: 'number',
-      default: 2
-    },
-    include: {
-      alias: 'i',
-      describe: 'File Extensions to Include',
-      type: 'array',
-      default: []
-    },
-    exclude: {
-      alias: 'e',
-      describe: 'File Extensions to Exclude',
-      type: 'array',
-      default: []
+  .command('remote [client] [instance]', 'Remote Control your Sandbox', {
+    'live-reload': {
+      describe: 'Enable Live Reload on Code Change',
+      type: 'boolean',
+      default: false
     }
   })
   .example('sfcc delete my-client sandbox', 'Delete my-client sandbox config')
   .example('sfcc watch my-client sandbox', 'Watch for my-client sandbox changes')
   .example('sfcc log -i customerror --latest', 'Watch Latest Custom Error Logs')
+  .example('sfcc remote --use=live-reload', 'Live Reload Sandbox on Changes')
   .demand(1)
   .help()
   .version().argv

bin/cli.js

@@ -0,0 +1,117 @@
+const argv = require('minimist')(process.argv.slice(2))
+const chalk = require('chalk')
+const express = require('express')
+const fs = require('fs')
+const https = require('https')
+const ipc = require('node-ipc')
+const ora = require('ora')
+const path = require('path')
+
+const config = require('../lib/config')()
+const notify = require('../lib/notify')()
+
+const port = 8443
+
+module.exports = async options => {
+  let client = argv['_'][1] || null
+  let instance = argv['_'][2] || null
+  let selected = null
+  let remote
+  let reloadTimeout
+
+  // Get Client & Instance, or check for Default
+  if (client && instance) {
+    selected = config.get(client, instance)
+  } else {
+    const defaultConfig = config.get(client, instance, true)
+
+    if (defaultConfig) {
+      client = defaultConfig.client
+      instance = defaultConfig.instance
+      selected = defaultConfig.config
+    }
+  }
+
+  if (selected) {
+    const sslKey = path.resolve(__dirname, '../remote/ssl/sfcc-cli-ca.pvk')
+    const sslCrt = path.resolve(__dirname, '../remote/ssl/sfcc-cli-ca.cer')
+    const jsFile = path.resolve(__dirname, '../remote/sfcc-cli-remote.js')
+
+    // Start Message Bus
+    ipc.config.id = 'remote'
+    ipc.config.retry = 1500
+    ipc.config.silent = true
+    ipc.serve(() => {
+      ipc.server.on('message', cmd => {
+        // Check if `remote` exists from socket.io and listen for commands
+        if (remote && typeof remote.emit !== 'undefined') {
+          // Handle Live Reload if enabled
+          if (cmd === 'live-reload' && options.liveReload) {
+            clearTimeout(reloadTimeout)
+            reloadTimeout = setTimeout(() => {
+              notify({
+                title: `${client} ${instance}`,
+                icon: path.join(__dirname, '../icons/', 'sfcc-reload.png'),
+                subtitle: 'LIVE RELOAD',
+                message: `Sending Reload Request to Sandbox`
+              })
+
+              remote.emit('refresh', true)
+            }, 3000)
+          }
+        }
+      })
+    })
+
+    ipc.server.start()
+
+    // Check that SSL files exist
+    if (!fs.existsSync(sslKey)) {
+      console.log(chalk.red.bold(`✖ Missing ${sslKey}`))
+      console.log('See ./docs/cmd-remote.md for setup instructions.')
+      process.exit()
+    }
+
+    if (!fs.existsSync(sslCrt)) {
+      console.log(chalk.red.bold(`✖ Missing ${sslCrt}`))
+      console.log('See ./docs/cmd-remote.md for setup instructions.')
+      process.exit()
+    }
+
+    // Start Socket Server
+    const app = express()
+    const server = https.createServer(
+      {
+        key: fs.readFileSync(sslKey),
+        cert: fs.readFileSync(sslCrt)
+      },
+      app
+    )
+
+    const io = require('socket.io')(server)
+
+    // https://localhost:8443/sfcc-cli-remote.js
+    app.get('/sfcc-cli-remote.js', (req, res) => {
+      res.set('Content-Type', 'application/javascript')
+      res.send(fs.readFileSync(jsFile))
+    })
+
+    // Handle connections from remote script
+    io.on('connection', socket => {
+      remote = socket
+      // Check if Live Reload flag was enabled
+      if (options.liveReload) {
+        remote.emit('message', 'Live Reload Enabled')
+      }
+    })
+
+    server.listen(port, function() {
+      console.log(`\n${chalk.bold('IMPORTANT')}: Make sure your sandbox has the following script tag:`)
+      console.log('<script src="https://localhost:8443/sfcc-cli-remote.js" id="sfcc-cli-remote"></script>\n')
+
+      ora(
+        `${chalk.bold('REMOTE')} ${chalk.cyan.bold(client)} ${chalk.magenta.bold(instance)} [Ctrl-C to Cancel]\n`
+      ).start()
+    })
+  }
+}

commands/live-reload.js

@@ -1,6 +1,7 @@
 const argv = require('minimist')(process.argv.slice(2))
 const chalk = require('chalk')
 const chokidar = require('chokidar')
+const ipc = require('node-ipc')
 const ora = require('ora')
 const path = require('path')
 const {exec} = require('child_process')
@@ -15,7 +16,6 @@ module.exports = options => {
   let instance = argv['_'][2] || null
   let selected = null
   let errorMessage
-  let logMessage
 
   const useLog = options.log
   const errorsOnly = options.errorsOnly
@@ -35,13 +35,30 @@ module.exports = options => {
 
   if (selected) {
     let spinner
+
     const watcher = chokidar.watch(selected.d, {
       ignored: [/[/\\]\./, '**/node_modules/**'],
       ignoreInitial: true,
       persistent: true,
       awaitWriteFinish: true
     })
 
+    // Connect to Remote Message Bus
+    let remote = null
+
+    ipc.config.id = 'upload'
+    ipc.config.retry = 1500
+    ipc.config.silent = true
+
+    ipc.connectTo('remote', () => {
+      ipc.of.remote.on('connect', () => {
+        remote = ipc.of.remote
+      })
+      ipc.of.remote.on('disconnect', () => {
+        remote = null
+      })
+    })
+
     const buildCheck = file => {
       if (Object.keys(selected.b).length > 0) {
         const checkPath = path.dirname(file).replace(path.normalize(selected.d), '')
@@ -71,13 +88,20 @@ module.exports = options => {
       }
     }
 
+    const callback = () => {
+      if (typeof remote.emit !== 'undefined') {
+        remote.emit('message', 'live-reload')
+      }
+    }
+
     // Watch for File Changes
     watcher.on('change', file => {
-      upload({file, spinner, selected, client, instance, options})
+      upload({file, spinner, selected, client, instance, options, callback})
       buildCheck(file)
     })
+
     watcher.on('add', file => {
-      upload({file, spinner, selected, client, instance, options})
+      upload({file, spinner, selected, client, instance, options, callback})
       buildCheck(file)
     })
 
@@ -115,11 +139,12 @@ module.exports = options => {
         })
       }
 
-      logMessage = `Watching ${client} ${instance}`
       if (useLog) {
-        logger.log(logMessage, true)
+        logger.log(`Watching ${client} ${instance}`, true)
       } else {
-        spinner = ora(`${chalk.bold(logMessage)} [Ctrl-C to Cancel]\n`).start()
+        spinner = ora(
+          `${chalk.bold('WATCHING')} ${chalk.cyan.bold(client)} ${chalk.magenta.bold(instance)} [Ctrl-C to Cancel]\n`
+        ).start()
       }
     })
   } else if (client && instance) {