Adding utility scripts to a create-react-app React / Typescript app

Question

I have a Typescript single-page React app created using create-react-app --typescript. The source code is in .ts and .tsx files in src/.

Now I want to create some utility scripts to use in development. In this case, to download data from our production server and upload it to my local development server, but that's just an example. The scripts have dependencies that the app also has (like an API client library) and I want to import from the App for various constants and helper functions.

Is there a place in create-react-app's structure where I can put such scripts and have them work? I want to be able to call them with npm run scriptname and have them import from the App.

(on our Django backends I would make these into Django management commands, I'm looking for a way to make something similar)

Answer 1

I create a folder in src called scripts.

It might look like

- scripts
  |- lint.ts
  |- deploy.ts

Then in my package.json

"scripts": {
  // ... add commands:
  "deploy:staging": "ts-node ./src/scripts/deploy.ts --staging",
  "deploy:production": "ts-node ./src/scripts/deploy.ts --production",
  "lint:check": "eslint ./src",
  "lint:format": "eslint ./src --fix"
}

Run like any other script: npm run link:format