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

I am using PyCharm Professional.

I have a Javascript file named myscript.js.

In package.json, I have this scripts section:

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

Each time I make a change to myscript.js, I go to the terminal and type:

npm run bp

Using File Watchers, or some other way, how can I run **npm run bp** automatically without having to type it out in the terminal each time?

I realize there might be a more efficient workflow, but I am testing AWS S3 buckets and prefer to test on the live bucket for what I'm doing right now.



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/

√ 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 collectstatic --no-input --ignore content/scss*

Traceback (most recent call last):
File "", line 11, in main
from 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 "", line 22, in <module>
File "", 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! errno 1
npm ERR! aws_vod@1.0.0 cs: `python 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
# 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 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.


Please sign in to leave a comment.