[WIP] Windows Support

package.json

@@ -10,8 +10,8 @@
     "url": "https://github.com/joshwcomeau/guppy.git"
   },
   "scripts": {
-    "start": "NODE_ENV=development npm run start:react",
-    "start:react": "BROWSER=none node scripts/start.js",
+    "start": "cross-env NODE_ENV=development npm run start:react",
+    "start:react": "cross-env BROWSER=none node scripts/start.js",
     "build": "node scripts/build.js",
     "package:mac": "electron-packager . --platform=darwin --arch=x64 --icon=src/assets/icons/mac/logo.icns --prune=true --out=release-builds --overwrite",
     "package": "GENERATE_SOURCEMAP=false npm run build && npm run package:mac",
@@ -49,6 +49,7 @@
     "case-sensitive-paths-webpack-plugin": "2.1.1",
     "chalk": "2.3.0",
     "color": "3.0.0",
+    "cross-env": "^5.2.0",
     "css-loader": "0.28.9",
     "dotenv": "5.0.0",
     "dotenv-expand": "4.2.0",
@@ -179,4 +180,4 @@
     "icon": null,
     "createdAt": 1529502079329
   }
-}
+}

scripts/start.js

@@ -48,25 +48,28 @@ let isElectronRunning = false;
  * Prevents multiple re-runs of Electron App
  */
 function runElectronApp() {
-  if (isElectronRunning)
-    return;
+  if (isElectronRunning) return;
 
   isElectronRunning = true;
+  // For Windows Support
+  // Here cross-env can be used but
+  // since its not that big of a control I checked manually
+  // Maybe some env variable like `isWin` can be passed to the procces for easy use???
+  const command = /^win/.test(process.platform)
+    ? `set ELECTRON_START_URL=http://localhost:${DEFAULT_PORT} && electron .`
+    : `ELECTRON_START_URL=http://localhost:${DEFAULT_PORT} electron .`;
+  exec(command, (err, stdout, stderr) => {
+    if (err) {
+      console.info(chalk.red('Electron app run failed: ') + stderr);
+      return;
+    }
 
-  exec(`ELECTRON_START_URL=http://localhost:${DEFAULT_PORT} electron .`,
-    (err, stdout, stderr) => {
-      if (err) {
-        console.info(chalk.red('Electron app run failed: ') + stderr);
-        return;
-      }
-
-      // Clear console for brevity
-      process.stdout.write('\x1bc');
+    // Clear console for brevity
+    process.stdout.write('\x1bc');
 
-      // Log output
-      console.info(stdout);
-    }
-  );
+    // Log output
+    console.info(stdout);
+  });
 }
 
 // Warn and crash if required files are missing
@@ -137,21 +140,19 @@ checkBrowsers(paths.appPath)
       openBrowser(urls.localUrlForBrowser);
     });
 
-    ['SIGINT', 'SIGTERM'].forEach(function (sig) {
-      process.on(sig, function () {
+    ['SIGINT', 'SIGTERM'].forEach(function(sig) {
+      process.on(sig, function() {
         devServer.close();
         process.exit();
       });
     });
 
     /**
      * Hook runElectronApp() to 'done' (compile) event
-     * 
+     *
      * Fails on error
      */
-    compiler.plugin('done',
-      stats => !stats.hasErrors() && runElectronApp()
-    );
+    compiler.plugin('done', stats => !stats.hasErrors() && runElectronApp());
   })
   .catch(err => {
     if (err && err.message) {

src/middlewares/task.middleware.js

@@ -19,6 +19,8 @@ import type { Task, ProjectType } from '../types';
 const { ipcRenderer } = window.require('electron');
 const childProcess = window.require('child_process');
 const psTree = window.require('ps-tree');
+const os = window.require('os');
+const isWin = /^win/.test(os.platform());
 
 export default (store: any) => (next: any) => (action: any) => {
   if (!action.task) {
@@ -93,7 +95,10 @@ export default (store: any) => (next: any) => (action: any) => {
           });
 
           child.on('exit', code => {
-            const wasSuccessful = code === 0 || code === null;
+            // For Windows Support
+            // Windows sends code 1 (I guess its because we foce kill??)
+            const successfullCode = isWin ? 1 : 0;
+            const wasSuccessful = code === successfullCode || code === null;
             const timestamp = new Date();
 
             store.dispatch(completeTask(task, timestamp, wasSuccessful));
@@ -158,10 +163,12 @@ export default (store: any) => (next: any) => (action: any) => {
       next(attachTaskMetadata(task, child.pid));
 
       child.stdout.on('data', data => {
+        console.log('data stdout', data, task);
         next(receiveDataFromTaskExecution(task, data.toString()));
       });
 
       child.stderr.on('data', data => {
+        console.log('data stdin', data, task);
         next(receiveDataFromTaskExecution(task, data.toString()));
       });
 
@@ -182,30 +189,15 @@ export default (store: any) => (next: any) => (action: any) => {
       const { task } = action;
       const { processId, name } = task;
 
-      // Our child was spawned using `shell: true` to get around a quirk with
-      // electron not working when specifying environment variables the
-      // "correct" way (see comment above).
-      //
-      // Because of that, `child.pid` refers to the `sh` command that spawned
-      // the actual Node process, and so we need to use `psTree` to build a
-      // tree of descendent children and kill them that way.
-      psTree(processId, (err, children) => {
-        if (err) {
-          console.error('Could not gather process children:', err);
-        }
-
-        const childrenPIDs = children.map(child => child.PID);
-
-        childProcess.spawn('kill', ['-9', ...childrenPIDs]);
-
+      if (isWin) {
+        // For Windows Support
+        // On Windows there is only one process so no need for psTree (see below)
+        // We use /f for focefully terminate process because it ask for confirmation
+        // We use /t to kill all child processes
+        // More info https://ss64.com/nt/taskkill.html
+        childProcess.spawn('taskkill', ['/pid', processId, '/f', '/t']);
         ipcRenderer.send('removeProcessId', processId);
 
-        // Once the children are killed, we should dispatch a notification
-        // so that the terminal shows something about this update.
-        // My initial thought was that all tasks would have the same message,
-        // but given that we're treating `start` as its own special thing,
-        // I'm realizing that it should vary depending on the task type.
-        // TODO: Find a better place for this to live.
         const abortMessage = isDevServerTask(name)
           ? 'Server stopped'
           : 'Task aborted';
@@ -216,7 +208,43 @@ export default (store: any) => (next: any) => (action: any) => {
             `\u001b[31;1m${abortMessage}\u001b[0m`
           )
         );
-      });
+      } else {
+        // Our child was spawned using `shell: true` to get around a quirk with
+        // electron not working when specifying environment variables the
+        // "correct" way (see comment above).
+        //
+        // Because of that, `child.pid` refers to the `sh` command that spawned
+        // the actual Node process, and so we need to use `psTree` to build a
+        // tree of descendent children and kill them that way.
+        psTree(processId, (err, children) => {
+          if (err) {
+            console.error('Could not gather process children:', err);
+          }
+
+          const childrenPIDs = children.map(child => child.PID);
+
+          childProcess.spawn('kill', ['-9', ...childrenPIDs]);
+
+          ipcRenderer.send('removeProcessId', processId);
+
+          // Once the children are killed, we should dispatch a notification
+          // so that the terminal shows something about this update.
+          // My initial thought was that all tasks would have the same message,
+          // but given that we're treating `start` as its own special thing,
+          // I'm realizing that it should vary depending on the task type.
+          // TODO: Find a better place for this to live.
+          const abortMessage = isDevServerTask(name)
+            ? 'Server stopped'
+            : 'Task aborted';
+
+          next(
+            receiveDataFromTaskExecution(
+              task,
+              `\u001b[31;1m${abortMessage}\u001b[0m`
+            )
+          );
+        });
+      }
 
       break;
     }
@@ -261,9 +289,12 @@ const getDevServerCommand = (
   projectType: ProjectType,
   port: string
 ) => {
+  let command;
   switch (projectType) {
     case 'create-react-app':
-      return [`PORT=${port} npm`, 'run', task.name];
+      // For Windows Support
+      command = isWin ? `set PORT=${port} && npm` : `PORT=${port} npm`;
+      return [command, 'run', task.name];
     case 'gatsby':
       return ['npm', 'run', task.name, '--', `-p ${port}`];
     default:

src/reducers/paths.reducer.js

@@ -13,7 +13,10 @@ import { ADD_PROJECT, IMPORT_EXISTING_PROJECT_FINISH } from '../actions';
 
 import type { Action } from 'redux';
 
+const childProcess = window.require('child_process');
+const path = window.require('path');
 const os = window.require('os');
+const isWin = /^win/.test(os.platform());
 
 type State = {
   [projectId: string]: string,
@@ -42,12 +45,29 @@ export default (state: State = initialState, action: Action) => {
 //
 //
 // Helpers
-export const getDefaultParentPath = () =>
+export const getDefaultParentPath = () => {
   // Noticing some weird quirks when I try to use a dev project on the compiled
   // "production" app, so separating their home paths should help.
-  process.env.NODE_ENV === 'development'
-    ? `${os.homedir()}/guppy-projects-dev`
-    : `${os.homedir()}/guppy-projects`;
+
+  // For Windows Support
+  // Documents folder is much better place for project folders (Most programs use it as a default save location)
+  // Since there is a chance of being moved or users language might be differet we are reading the value from Registery
+  // There might be a better solution but this seems ok so far
+  const winDocumentsRegRecord = childProcess.execSync(
+    'REG QUERY "HKCU\\Software\\Microsoft\\Windows\\CurrentVersion\\Explorer\\User Shell Folders" /v Personal',
+    {
+      encoding: 'utf8',
+    }
+  );
+  // prettier-ignore
+  const winDocumentsPath = winDocumentsRegRecord.split('   ')[winDocumentsRegRecord.split('   ').length - 1].replace('%USERPROFILE%\\', '').replace(/\s/g, '');
+  const homedir = isWin
+    ? path.join(os.homedir(), winDocumentsPath)
+    : os.homedir();
+  return process.env.NODE_ENV === 'development'
+    ? path.join(homedir, '/guppy-projects-dev')
+    : path.join(homedir, '/guppy-projects');
+};
 
 export const getDefaultPath = (projectId: string) =>
   `${getDefaultParentPath()}/${projectId}`;

src/services/create-project.service.js

@@ -11,6 +11,9 @@ import type { ProjectType } from '../types';
 
 const fs = window.require('fs');
 const childProcess = window.require('child_process');
+const path = window.require('path');
+const os = window.require('os');
+const isWin = /^win/.test(os.platform());
 
 // Change this boolean flag to skip project creation.
 // Useful when working on the flow, to avoid having to wait for a real project
@@ -62,9 +65,12 @@ export default (
 
   const id = slug(projectName).toLowerCase();
 
-  const path = `${parentPath}/${id}`;
+  // For Windows Support
+  // To support cross platform with slashes and escapes
+  // Taken from https://github.com/AWolf81/guppy/commit/b2434d907d0c2c2585006d82ef14523a974de6a0
+  const projectPath = path.join(parentPath, id);
 
-  const [instruction, ...args] = getBuildInstructions(projectType, path);
+  const [instruction, ...args] = getBuildInstructions(projectType, projectPath);
 
   const process = childProcess.spawn(instruction, args);
 
@@ -76,7 +82,7 @@ export default (
   process.on('close', () => {
     onStatusUpdate('Dependencies installed');
 
-    fs.readFile(`${path}/package.json`, 'utf8', (err, data) => {
+    fs.readFile(path.join(projectPath, 'package.json'), 'utf8', (err, data) => {
       if (err) {
         return console.error(err);
       }
@@ -97,12 +103,16 @@ export default (
 
       const prettyPrintedPackageJson = JSON.stringify(packageJson, null, 2);
 
-      fs.writeFile(`${path}/package.json`, prettyPrintedPackageJson, err => {
-        if (err) {
-          return console.error(err);
+      fs.writeFile(
+        path.join(projectPath, 'package.json'),
+        prettyPrintedPackageJson,
+        err => {
+          if (err) {
+            return console.error(err);
+          }
+          onComplete(packageJson);
         }
-        onComplete(packageJson);
-      });
+      );
     });
   });
 };
@@ -130,11 +140,15 @@ export const getBuildInstructions = (
   projectType: ProjectType,
   path: string
 ) => {
+  // For Windows Support
+  // Windows tries to run command as a script rather than on a cmd
+  // To force it we add *.cmd to the commands
+  const command = isWin ? 'npx.cmd' : 'npx';
   switch (projectType) {
     case 'create-react-app':
-      return ['npx', 'create-react-app', path];
+      return [command, 'create-react-app', path];
     case 'gatsby':
-      return ['npx', 'gatsby', 'new', path];
+      return [command, 'gatsby', 'new', path];
     default:
       throw new Error('Unrecognized project type: ' + projectType);
   }

src/services/find-available-port.service.js

@@ -12,13 +12,19 @@
  * hard of a problem!
  */
 const childProcess = window.require('child_process');
-
+const os = window.require('os');
 const MAX_ATTEMPTS = 15;
 
 export default () =>
   new Promise((resolve, reject) => {
     const checkPort = (port = 3000, attemptNum = 0) => {
-      childProcess.exec(`lsof -i :${port}`, (err, res) => {
+      // For Windows Support
+      // Similar command to lsof
+      // Finds if the specified port is in use
+      const command = /^win/.test(os.platform())
+        ? `netstat -aon | find "${port}"`
+        : `lsof -i :${port}`;
+      childProcess.exec(command, (err, res) => {
         // Ugh, childProcess assumes that no output means that there was an
         // error, and `lsof` emits nothing when the port is empty. So,
         // counterintuitively, an error is good news, and a response is bad.