'configuring package.json on windows

I'm trying to manage the configuration of a react project on windows, it was previously running on mac. I'm using yarn build. inside the package.json scripts>build was configured as "rm-rf deployment/static;react-scripts build && mv build deployment/static". since the rm-rf and mv commands are for Linux, I tried using rmdir/del and move instead.. but it doesn't seem to work. I'm getting the error: Parameter format not correct - "static".

reactjsnpmpackage.jsonyarnpkgnpm-scripts


Solution 1:[1]

Windows Solution (cmd.exe)

The equivalent of that build script running via Command Prompt or PowerShell on Windows is:

"scripts": {
  "build": "rd /s/q \"deployment/static\" 2> nul & react-scripts build && md \"deployment/static\" && move \"build\" \"deployment/static\""
}

Explanation:

  1. The rm-rf equivalent for Windows (cmd.exe) is rd /s/q
  2. The mv equivalent for Windows (cmd.exe) is move

  3. All directory paths have been wrapped in escaped double quotes \"...\". For example;

    deployment/static has been rewritten as \"deployment/static\".

    Although escaped double quotes are not entirely necessary in this scenario, it's good practice and necessary to do this when paths may include spaces or punctuation characters.

  4. The semi-colon ; has been replaced with the single & operator to ensure the react-script build part runs regardless of whether the initial rd /s/q ... command fails or succeeds.

  5. The following error message would be printed to the console when using rd to delete a folder/path which may not exist:

    The system cannot find the path specified

    To prevent this error message from potentially being printed to the console we redirect the error message to NUL using the 2> nul part.

  6. The md \"deployment/static\" part utilizes Windows md command to make the static directory - which is very similar to the mkdir command in bash.

Note: The above syntax will fail on nix based operating systems such as macOS and Linux.

Cross Platform Solution (Windows/Linux/macOS...)

To achieve a cross platform solution, (i.e. one which runs successfully on Windows, Linux, and macOS), I suggest writing two Nodejs utility scripts to substitute the rm -rf and mv bash commands. These two Nodejs scripts can then be invoked via your npm-script.

The following steps describe how this can be achieved.

  1. Install shelljs which provides portable Unix shell commands for Nodejs. To do this, cd to your project directory an run the following command:

    npm i -D shelljs

  2. Create a new Nodejs script named rm.js with the following content:

    rm.js

    const shell = require('shelljs');

const args = process.argv.slice(2);
const dir = args[0];

shell.rm('-rf', dir);

    Save this file in the root of your project directory, at the same level as where your projects package.json is stored.

  3. Create a another Nodejs script named mv.js with the following content:

    mv.js

    const shell = require('shelljs');

const args = process.argv.slice(2);
const src = args[0];
const dest = args[1];

// Check src path has been provided and is valid
if (!src || !shell.test('-d', src)) {
  console.log('\x1b[31m\x1b[40mERR!\x1b[0m src path cannot be found: %s', src);
  process.exit(1);
}

// Check dest path has been provided.
if (!dest) {
  console.log('\x1b[31m\x1b[40mERR!\x1b[0m dest path must be provided:');
  process.exit(1);
}

// Make dest directory if necessary.
shell.mkdir('-p', dest);

// Move the file.
shell.mv(src, dest);

    Also save this file in the root of your project directory, at the same level as where your projects package.json is stored.

  4. Then configure your build script in package.json as follows:

    "scripts": {
  "build": "node rm \"deployment/static\" & react-scripts build && node mv \"build\" \"deployment/static\""
}

Note

The two utility scripts rm.js and mv.js are invoked in the npm-script named build via the parts reading; node rm ... and node mv ... respectively.

If you decide to store these two scripts in a different folder instead of the projects root directory, (as suggested in steps 2 and 3 previously), then you'll need to change the paths to the files. For example; if they were both saved in a folder named scripts which is located in the root of your project directory then your build script would be changed to:

"scripts": {
  "build": "node scripts/rm \"deployment/static\" & react-scripts build && node scripts/mv \"build\" \"deployment/static\""
}

Edit / Update:

An alternative cross-platform solution, (which wasn't available when originally posting this answer), is to utilize the shx package, which is described as:

shx is a wrapper around ShellJS Unix commands, providing an easy solution for simple Unix-like, cross-platform commands in npm package scripts

  1. Run the following command to install shx:

    npm i -D shx

  2. Then change your build script in package.json as follows:

    "scripts": {
  "build": "shx rm -rf deployment/static & react-scripts build && shx mv build deployment/static"
}

Solution 2:[2]

I use rimraf for this very reason. Install it globally

    npm i -g rimraf

and update your script as follows

    "rimraf deployment/static;react-scripts build && mv build deployment/static"

Solution 3:[3]

The shx package should work very well; they even show rm -rf in the topmost package.json demo

Some of my coworkers use rimraf which is specifically the rm -rf unix command for node

Solution 4:[4]

for Windows:

in client folder

  },
  "scripts": {
    "build-win": "react-scripts build && move build ..\\server\\public",
  },

that will move folder to server folder

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 adam_th
Solution 3
Solution 4 Igor Z

Related Questions