setup script for my workshops

package.json

{
  "name": "workshop-setup",
  "version": "1.0.0",
  "description": "This is the common setup script for most of my workshops",
  "bin": "./setup.js"
}

setup.js

#!/usr/bin/env node

var spawnSync = require('child_process').spawnSync

var FAILURE = 'failure'
var SUCCESS = 'success'

// disable https://scarf.sh/
// which is used by some projects dependencies
process.env.SCARF_ANALYTICS = false

var styles = {
  // got these from playing around with what I found from:
  // https://github.com/istanbuljs/istanbuljs/blob/0f328fd0896417ccb2085f4b7888dd8e167ba3fa/packages/istanbul-lib-report/lib/file-writer.js#L84-L96
  // they're the best I could find that works well for light or dark terminals
  success: {open: '\u001b[32;1m', close: '\u001b[0m'},
  danger: {open: '\u001b[31;1m', close: '\u001b[0m'},
  info: {open: '\u001b[36;1m', close: '\u001b[0m'},
  subtitle: {open: '\u001b[2;1m', close: '\u001b[0m'},
}

function color(modifier, string) {
  return styles[modifier].open + string + styles[modifier].close
}

function run(title, subtitle, command, options) {
  options = options || {}

  console.log(color('info', '    ▶️  Starting: ' + title))
  console.log(color('subtitle', '          ' + subtitle))
  console.log(color('subtitle', '          Running the following command: ' + command))

  var result = spawnSync(command, {stdio: 'inherit', shell: true})

  if (result.status !== 0 && !options.ignoreFailure) {
    console.error(
      color(
        'danger',
        '    🚨  Failure: ' +
          title +
          '. Please review the messages above for information on how to troubleshoot and resolve this issue.',
      ),
    )
    process.exit(result.status)
    return FAILURE
  }

  console.log(color('success', '    ✅  Success: ' + title + '\n\n'))
  return SUCCESS
}

function main() {
  var result

  result = run(
    'System Validation',
    'Ensuring the correct versions of tools are installed on this computer.',
    'npx --yes "https://gist.github.com/kentcdodds/abbc32701f78fa70298d444c2303b6d9"',
  )
  if (result === FAILURE) return

  result = run(
    'Dependency Installation',
    'Installing third party code dependencies so the workshop works properly on this computer.',
    'npm install --legacy-peer-deps --no-save',
  )
  if (result === FAILURE) return

  result = run(
    'Custom Setup',
    'Handling custom setup (if neccessary)',
    'npm run setup:custom --if-present',
  )
  if (result === FAILURE) return

  result = run(
    'Project Validation',
    'Running validation checks to ensure dependencies were installed properly',
    'npm run validate --if-present -s',
  )
  if (result === FAILURE) return
}

main()

This is pretty sweet! 1) I didn't know npx could do this and 2) This is an awesome way to be able to easily/quickly update the scripts for all the workshops. 👍

Glad you like it Ben :)

This is awesome.

A query here. Does npx handle gist urls seperately. I am trying to understand how npx is working in this case. AFAIK npx looks for package.json/bin entry of the package name passed as argument to npx e.g. npx eslint and runs the specified file with node as runtime. But for npx every package that is not present locally is to be downloaded in zip format. but when I do curl -X GET https://gist.github.com/kentcdodds/bb452ffe53a5caa3600197e1d8005733 it gives me content type as text/html. Correct me If I am wrong.

@technikhil314 probably behind the scene it just adds .json to the gist url, then it looks for files and if it finds package.json executes the bin task.

Try curl -XGET https://gist.github.com/kentcdodds/bb452ffe53a5caa3600197e1d8005733.json

Yeah makes sense but still that means npx will have to handle gist urls as special case @mirzap

Indeed, they do treat gists special :)

oh reply from THE kent on my comment. thanks for confirming @kentcdodds

IF I am a Windows user and have run into the common error where I have a space in my Window's user name, therefore npx is broken but global npm installs work as a work-around, how could I alter the script in your setup.js file to work around your npx command? @kentcdodds

EDIT: Fixed with the following command
npm config set cache "C:\Users\Firstname~1\AppData\Roaming\npm-cache" --global

now it breaks on Step: Project Validation
with error:
'npm-run-all' is not recognized as an internal or external command,
operable program or batch file.

looking into a fix now.

@RichardSPrins, the setup script is basically the npx thing. Check the README and it'll tell you to simply run: npm install and npm run validate if the setup script isn't working.

I really just learned this from your course. Thanks a lot!

Hey @kentcdodds,
Hope you are having a wonderful time!
npm install --legacy-peer-deps --no-save ? we not worried abt peer-deps ? and saving the packages ?
https://gist.github.com/kentcdodds/bb452ffe53a5caa3600197e1d8005733#file-setup-js-L65

--legacy-peer-deps is because I don't need npm to auto-install peer deps for me, I have installed all necessary peer deps myself.

--no-save is because npm v6 and npm v7 have a different package-lock.json format and I don't want workshop learners to override the lockfile. They don't need to. My goal is to have the install process be exactly the same on their computer as it is on mine.

This is awesome! Thank you @kentcdodds

🤯 I had no idea. This is impressive

@RichardSPrins, the setup script is basically the npx thing. Check the README and it'll tell you to simply run: npm install and npm run validate if the setup script isn't working.

This just saved me a huge headache, thank you! Note to self - check for the README haha

this is amazing @kentcdodds 🤩

wow nice, didn't know you could run remote javascript file with npx. This is neat. Learning more than react. Highly recommend Epic React by Kent C. Dodds

Thank you 😊