How did you solved? Auto upload external file changes | npm run watch (solved)

I know, this issue is one of the favourite ones here and I got much information regarding this topic. The solutions I've read about are often simple configuration changes like:

  • Checkmark into Synchronize files on frame or editor tab activation in Appearance & Behavior >> System-Settings.
  • Setup Deployment-Options to Always-Upload and including external-changes.
  • Using plugins, external mounted locations and so on...

Or just use a File-Watcher to fire a command to start your build-application or script and getting upload the resulting changes.

But all recommendations ignoring often the fact, that people are looking for a way to auto-upload watched files from an external application/script and don't want to use another build-system with File-Watcher.

As an example:

  1. In a Laravel project with a simple webpack-setup (JS/SCSS → Compile and Minify to Public) to fire an build-script `npm run dev` and getting the results uploaded via a File-Watcher takes: 5-7 seconds.
  2. To do the same without File-Watcher and working with the Always-Upload-Deployment Options on a watches (via `npm run watch`) file by just Tab outside and inside PHP-Storm takes 1-2 seconds until the file gets uploaded.

So the current only option or more felt like workaround which I've found was to write an script and bind it with a hotkey via BetterTouchTools which does the job (point 2: save file, unfocus phpstorm, focus phpstorm, focus browser) for me.

But I can't think that this can be really the the intention of the developers of PHPStorm.

So I just want to ask:

How did you solved the issue, that you don't really get an detection of external file-change if you don't toggle a "Synchronize" or Trick out the "System-Settings-Options for Synchronize" to do the job of uploading file-changes to your remote-location.

File-Watcher seems to slow, also because it is not made for external watch-processes and focus more to run the build-commands of external build-tools. But still an external watched file is builded faster then a a simple build-process where webpack for example has to validate and setup everything before generating the expected files.   

Comment actions Permalink

I've been facing the same issue - at least I thought I was. The point is: Do the webpack generated assets (for development) really need to be uploaded to remote server? This may depend on your DEV environment - in my case the "remote" server is a VM running local. If these assets get served straight from the host system where webpack/watch is running, even better.

I came up with - in my case - a BrowserSyncPlugin configuration like this:

  host: 'localhost', 
  port: 3000,
  proxy: 'http://project.local',
  serveStatic: [{
    route: '/build',
    dir: 'web/build'

This is not really an answer to your question.

However it is a workaround that works perferct in my situation using webpack/browsersync - maybe it applies to yours as well.

Comment actions Permalink

Thanks for your response and an interesting approach.

I wasn't able to solve this issue with PHPStorm alone, but I found another usable workaround.

I found SSHFS for mounting directorys via SSH and Itermocil, an terminal-application which allows you to create window/pane-presets for your ITerm2-Sessions.

With that I wrote one pane into unmounting and mounting the remote public location via SSHFS and let the other panes execute `npm run watch` on my local asset-locations. (modular structured projects).

Since then I haven't to hassle with that issue anymore.
So this topic could be marked as solved.


Please sign in to leave a comment.