Make IntelliJ automatically detect changes produced by webpack

Hi,

I'am using IntelliJ to implement the front and back ends of a project, both of them being modules of a single gradle project.

Frontend is bundled together by webpack which produces a bundle.js inside the static folder of the backend (Spring-boot web).

Everything works fine but now i am trying to speed up development so that any change to the front end can be quickly seen by a simple reload of the page served by the backend. Thus i use the --watch option of webpack to make it compile as i edit the files. In IntelliJ, i activated both the "Synchronize files on frame or editor tab activation" option and the "compiler.automake.allow.when.app.running" registry option...

But still, when i edit a file of the front-end, i must wait between 30s and 2min before a reload of the page shows the change.

I can get the change immediately if i manually "Synchronize" the backend project... but ideally, as i am lazy, i'd like to not have to do a second manipulation to observe a change...

Is there a way to make IntelliJ automatically detect the file change faster?

 

18 comments
Comment actions Permalink

By synchronizing the project, do you mean File | Synchronize? Normally, if Synchronize files on frame or editor tab activation is enabled, it's enough to switch the focus to your backend project to get files synchronized

1
Comment actions Permalink

Yes, by synchronizing i mean File | Synchronize (usually i right-click the project and use Synchronize 'project').

I think the problem is that Synchronize files on frame or editor tab activation only deals with files that you manually open/edit in the editor... however i never open the bundle.js file produced by webpack.

0
Comment actions Permalink

No, it should affect all project files, not just the opened ones... Do you have any symlinks in your project path? Is the project stored on a local drive?

0
Comment actions Permalink

No symlinks and the project is stored on a local drive.

I read you comment again and noticed the to switch the focus to your project get files synchronized"... that does not seem to work on my side and, either way, i still consider that to be a second manipulation :-/

I'm wondering... how does IntelliJ deal with files that are modified by external applications? Are they automatically synchronized without having to open the file or use file | Synchronize? Because my problem seems very similar...

0
Comment actions Permalink

>Are they automatically synchronized without having to open the file or use file | Synchronize?

 

no, for sure they aren't. To synchronize IDEA virtual file system with external changes, you have to choose File | Synchronize or switch focus from IDE and back

0
Comment actions Permalink

Then is there a way to automate this process? Making IDEA automatically detect external changes?

I tried the plugin 'auto sync' wich does a File | Synchronize at regular intervals but that's not a perfect solution.

Otherwise any pointer to automate my specific process (front end bundled by webpack and served by a spring-boot web back-end), would be appreciated. Maybe using File Watchers?

0
Comment actions Permalink

File Watcher may be a solution - as file watcher target directory is auto-synchronized once the task is completed.

0
Comment actions Permalink

I fiddled a bit with File Watcher to no avail...

First i thought the fact that file watcher passes the file as argument to the program called would be a problem but fortunately webpack does not care about it. Now, whenever i edit a file in the frontend, File Watcher launches webpack... but it still does not synchronize IDEA virtual file system with the files outputed to the static folder of the frontend :(

Here is the configuration i used, am i doing something wrong?

File Type: any
Source Pattern: file[frontend]:src/main//*
Program: $ProjectFileDir$\frontend\node_modules\.bin\webpack.cmd
Arguments: --progress --hide-modules
Output path to refresh: $ProjectFileDir$\backend\src\main\resources\static\js\bundle.js
No output filter
Immediate file synchronization checked

0
Comment actions Permalink

settings look OK... Can you provide a sample project I can use to recreate the issue?

0
Comment actions Permalink

Here is a link to a 7zip archive of the project.
https://drive.google.com/open?id=0B9NsTZ4lxeXSVDNjclVWUVI3Zlk

This version does not include the File Watcher described above as i was still testing stuff out... but you can easily add it using the above configuration.

First install frontend dependencies using npm install in the frontend folder. Then run the build script of the backend.
That should do it

0
Comment actions Permalink

Thanks!

as far as I can see, VFS is refreshed properly: backend\src\main\resources\static\js\build.js appears in the Project tool window as soon as the build completes. Of course, I have set up the file watcher accordingly:

0
Comment actions Permalink

Alright i managed to make it work... i must have made a mistake in the "Output paths to refresh"...

However how would i select the entire js folder? Ending the path with js/*.js or js/* does not work...
Ideally i would even prefer for the entire static folder to be synchronized instead of just the build file

(Thanks for the help by the way :) )

0
Comment actions Permalink

>Ideally i would even prefer for the entire static folder to be synchronized instead of just the build file

I'd suggest listing all files that have to be updated in `output paths to refresh`, like `$ProjectFileDir$/path/to/file/file.js:$ProjectFileDir$/path/to/file/file1.js:...` Use ':' to separate the patterns

0
Comment actions Permalink

Oki, that might be cumbersome in some projects but luckily there will only be a few js files produced in this one.
However i don't imagine doing that for other static assets like images...

Being able to specify an entire folder to be automatically refreshed could be a nice feature to implement for the IDEA team...

Thanks for the help Elena :)

0
Comment actions Permalink

Hi Elena,

I have exactly the same problem (using Intellij IDEA 2017.2.6, Spring Boot and Webpack).

My biggest issue is that I don't know when the resources generated by Webpack are being updated. It's often that webpack rebuilds the package, I wait 10 seconds, recompile (CTRL + F9), switch to the browser and still have old version (and sometimes it's refreshed).

I would like to ask whether File Watcher plugin is still the recommended solution for that? Cannot we integrate "webpack build --watch" somehow with Intellij, so that it knows when the processes finished? As I'm running "npm" (which runs webpack) from Intellij/Run configuration.

Thank you for help.

0
Comment actions Permalink

I didn't write that using File Watcher is NOT recommended - just the contrary: in my comments above I wrote that File Watcher can be used as a solution for this issue. You can set up your npm script as a file watcher

0
Comment actions Permalink

I think I had the same exact problem.  What fixed it was right clicking on my webpack dist folder (where the generated bundle.js files end up) and then select "Mark directory as" and then "Resource root". Now when I flip over to my browser (Frame deactivation), refresh the browser (have to have cache disabled), the new bundles are loaded.

This is pretty odd behaviour because if you flag the dist folder as "Sources Root" it doesn't work. Requires 2 Frame deactivations to actually update the resources (have to go to browser, then back to intellij, then back to browser, then it would update the bundles).  I also don't really like the fact that there is no visual indicator in Intellij as to what the directory is marked as (as least "Sources root" vs "Resources Root"). Would be nice if there was an icon, or at least a checkbox on the menu so you could see what you had previously flagged it as.

0
Comment actions Permalink

For me checking "Preferences | Appearance & Behavior | System Settings > Synchronize files on frame or editor tab deactivation" worked.

(IntelliJ Idea 2018.2.7)

0

Please sign in to leave a comment.