Search code examples
browserbuildclojureclojurescriptshadow-cljs

While using shadow-cljs to watch the app, when should I refresh the browser to see the changes? What about hard refreshing and rebuilding?


I have been using Clojure, ClojureScript, lein, shadow-cljs, Emacs, and CIDER to work on a Clojure/ClojureScript dynamic web app project.

Usually, I build the project by executing the command cider-jack-in-cljs in Emacs, choosing shadow-cljs, then shadow for REPL type, and, finally, app for the building option.

It works fine. I can watch changes on the UI on localhost:3005.

Multiple times, I can watch changes happening instantly after some change on the code base.

Sometimes, it is necessary to press the refresh button to see the changes. In other times, it is (seems to be) necessary to do a hard refresh by pressing the refresh button along with the command key (on macOS) pressed. Probably, when there is cache situation involved, along the hard refresh I also execute a clear cache command.

Finally, at other times, it seems to be necessary to do a full rebuild of the app to see them.

I can't recall precise and good examples. I usually execute the above-mentioned strategies in an order of how desperate I am to see the changes I am expecting to see but are not being shown-off (you and I - we - can laugh about it, it is better than crying :D).

I would like to avoid this trial-and-error paleolithic behavior I am having.

When is it appropriate to just wait and see the changes being updated by watch? When should I execute refresh on the browser? How different is it from a hard refresh and clear cache? And, finally, the most painful, when is it necessary to rebuild the whole application to see the changes?

Thanks


Solution

  • Maybe this post on Hot Reload in CLJS can provide some answers.

    You should always be looking at the Browser Console. shadow-cljs will tell you what it is doing. You should see it doing the reload/start cycles always. If it does and your page doesn't update then the issue is in your code. See the post above for common gotchas.

    Generally you are not expected to ever clear the cache manually or rebuilding completely. However there are things you could be doing that would require this. (eg. manually editing files in node_modules). If you are just editing your own source files things should just work.

    It can however also depend on the HTTP server you are using. If this is not the default :dev-http then it could be setting very aggressive caching headers. During development no caching should be done. You can enforce this by clicking the "Disable cache" checkbox in the Chrome devtools Network tab, but it is better if your server sets the proper headers. :dev-http does by default, custom servers may not.