DEV Community

loading...
Cover image for Pre- and Post- NPM Scripts

Pre- and Post- NPM Scripts

thomasxbanks profile image Thomas Banks ・1 min read

I've been working on a project at work recently that takes data from a CMS, builds into a React app, and bundles into an iOS app using CapacitorJS

{
  "scripts": {
    "build": "react-scripts build",
    "harvest": "node harvest.js",
    "copy": "npx cap copy ios"
  }
}
Enter fullscreen mode Exit fullscreen mode

It would be tedious to keep running npm run harvest && npm run build && npm run copy every single time.

I guess I could make a special case build script…

{
  "scripts": {
    "build:ios": "npm run harvest && npm run build && npm run copy"
  }
}
Enter fullscreen mode Exit fullscreen mode

I'm not a fan of long chains of commands and, it turns out, neither are NPM.

Introducing pre and post!

{
  "scripts": {
    "prebuild": "npm run harvest",
    "build": "react-scripts build",
    "postbuild": "npm run copy",
    "harvest": "node harvest.js",
    "copy": "npx cap copy ios",
  }
}
Enter fullscreen mode Exit fullscreen mode

These suffixes can be added to any NPM script and will run automatically when you run the main script.

Now, whenever I npm run build, I get npm run harvest and npm run copy for free!

It saves my fingers, it stops me forgetting to copy my build folder to iOS, and it satisfies my compulsion for short, neat lines.

What could you do with this?

Discussion (0)

Forem Open with the Forem app