PyCharm Run npm command that compiles js and runs django collectstatic?

It can be a file watcher, like

here the "main" scope is a scope configured in Settings | Appearance & Behavior | Scopes that includes your script file only; working folder is set to the project root directory assuming you have the package.json with your scripts located there; if it's located in a subfolder, change the working directory accordingly

I am so appreciative of your help Elena. I am 90% of the way there thanks to you.

When the file watcher executes, an "Output" window appears.

It shows the following output:

----------------------------------------- start output ----------------------------------------------

"C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" run bp

> aws_vod@1.0.0 bp
> npm run build & npm run cs

> aws_vod@1.0.0 build C:\Users\Jarad\Documents\PyCharm\aws_vod
> parcel build content/static/content/js/s3direct.js --dist-dir content/static/content/dist/

Building...
√ Built in 1.40s

content\static\content\dist\s3direct.js 89.47 KB 1.64s
content\static\content\dist\s3direct.css 1.61 KB 2.88s

> aws_vod@1.0.0 cs C:\Users\Jarad\Documents\PyCharm\aws_vod
> python manage.py collectstatic --no-input --ignore content/scss*

Traceback (most recent call last):
File "manage.py", line 11, in main
from django.core.management import execute_from_command_line
ModuleNotFoundError: No module named 'django'

The above exception was the direct cause of the following exception:

Traceback (most recent call last):
File "manage.py", line 22, in <module>
main()
File "manage.py", line 17, in main
) from exc
ImportError: Couldn't import Django. Are you sure it's installed and available on your PYTHONPATH environment variable? Did you forget to activate a virtual environment?
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! aws_vod@1.0.0 cs: `python manage.py collectstatic --no-input --ignore content/scss*`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the aws_vod@1.0.0 cs script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Jarad\AppData\Local\npm-cache\_logs\2021-12-10T18_49_41_906Z-debug.log

Process finished with exit code 1

-----------------------------------------  end output ----------------------------------------------

I understand this to mean that 1) my npm build command did work as evidence by the "Building..." section but 2) I need to activate my virtual environment somehow so Django is imported.

I modified the "Arguments" line (see your screenshot above) to this:

source "C:\Users\Jarad\Documents\PyCharm\aws_vod\venv\Scripts\activate" && "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" run bp

but it did not work. I am on a Windows machine (if that means anything - usually I don't have to type "source /bin/activate").

I guess the question is, how to I activate the virtual environment in the file watcher argument?

If I do this:

venv\Scripts\activate && "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" run bp

I get this error:

"C:\Program Files\nodejs\node.exe" venv\Scripts\activate && "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" run bp
C:\Users\Jarad\Documents\PyCharm\aws_vod\venv\Scripts\activate:1
# This file must be used with "source bin/activate" *from bash*
^

SyntaxError: Invalid or unexpected token
at Object.compileFunction (node:vm:352:18)
at wrapSafe (node:internal/modules/cjs/loader:1031:15)
at Module._compile (node:internal/modules/cjs/loader:1065:27)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
at node:internal/main/run_main_module:17:47

Process finished with exit code 1

----------------

Now that I think about it, I guess this is a node.exe trying to execute the activation of a Python virtualenvironment. I realize that probably makes no sense to try to do. Just not sure what to do.

You can't pass venv\Scripts\activate as an argument to Node.js, your command is invalid

I can only suggest creating a batch script (.cmd or .bat file) that would activate the virtualenv first and then start the npm script, and set this script as a program in your file watcher

Well, actually you can try adding venv\Scripts\activate to your bp npm script

YES! Adding 

"scripts": {
  "build": "parcel build content/static/content/js/s3direct.js --dist-dir content/static/content/dist/",
  "cs": "python manage.py collectstatic --no-input --ignore content/scss*",
  "bp": "venv\\Scripts\\activate & npm run build & npm run cs"
},

worked! This was my file watcher configuration for anyone in the future (and me).

As always, thanks Elena. You saved me a lot of time again.