search

spring-attic / tut-react-and-spring-data-rest

React.js and Spring Data REST :: A tutorial based on the 5-part blog series by Greg Turnquist
https://spring.io/guides/tutorials/react-and-spring-data-rest
883 stars 1.58k forks source link

Modification in app is not reflected. #112

Closed rvplogu closed 4 years ago

rvplogu commented 4 years ago

Hi, I run my application file and also run npm run watch command. If I do any modification in js file it is not reflected in browser. Can someone suggest me for this?

lauriharpf commented 4 years ago

Also experiencing this.

Steps to reproduce

  1. git clone https://github.com/spring-guides/tut-react-and-spring-data-rest.git
  2. Run the basic project with spring-boot:run via IntelliJ Idea
  3. Open http://localhost:8080/. App works.
  4. Run npm run-script watch in the basic directory. Watching starts OK.
  5. Change app.js and save it. Watch triggers.
  6. Open http://localhost:8080/ and hard-refresh the page. Changes from the previous step don't appear.

Expected behavior Changes appear.

Platform Windows 10

Additional details Here's the watch output:

Hash: d393da15462f9a854f4f
Version: webpack 4.41.5
Time: 120ms
Built at: 2019-12-29 22:15:18
                                      Asset      Size  Chunks             Chunk Names
./src/main/resources/static/built/bundle.js  3.13 MiB    main  [emitted]  main
Entrypoint main = ./src/main/resources/static/built/bundle.js
[./src/main/js/app.js] 4.82 KiB {main} [built]
    + 60 hidden modules

The changes do show up in ./src/main/resources/static/built/bundle.js, but they don't show up in the bundle.js unless I stop & start the server.

lauriharpf commented 4 years ago

Seemed to find a potential fix:

In package.json, change "watch": "webpack --watch -d" to

"watch": "webpack --watch -d --output ./target/classes/static/built/bundle.js"

After doing that, restarting the server & running npm run-script watch, the changes are immediately reflected when editing app.js.

Details Looks like there are two bundle.js files:

  1. src/main/resources/static/built/bundle.js
  2. target/classes/static/built/bundle.js

The webpack.config.js directs the output to file 1, which I guess gets copied to file 2. when the project is built.

Without the change mentioned above, npm run-script watch updates file 1. Because Spring Boot serves file 2, the updates aren't reflected in the UI.

Next steps? Unless someone comes up with a better fix, I'll PR this one.

I'm wondering if webpack.config.js could be changed to direct the output to ./target/classes/static/built/bundle.js instead of './src/main/resources/static/built/bundle.js' (would remove the need for watch output configuration). But I don't know if that would work, haven't tested it.

nelsonjd commented 4 years ago

If you're not using an IDE (which it looks you ARE), and using ./mvnw spring-boot:run I found after digging for a bit that this is the correct answer: enabling addResources see https://docs.spring.io/spring-boot/docs/current/maven-plugin/usage.html#Running_the_application

https://stackoverflow.com/questions/24762657/refreshing-static-content-with-spring-mvc-and-boot

However, you might need an IDE specific answer for Eclipse.