Reloading browser

[musicman11]

More a development question than the app itself, I'm running natively with Yarn as described in Readme (can't use Docker on my laptop). I can search for and edit code but each refresh causes the rebuild process to start again from Yarn Dev, at least 5 minutes on both Windows and Ubuntu. What are others using? Some live reload/browser sync?

[ivan-aksamentov]

@musicman11

Are you not running yarn prod by chance? It rebuilds on every change.

If you are running yarn dev, then the reloading depends on what you edit. If you edit any of the files watched by nodemon here:
https://github.com/neherlab/covid19_scenarios/blob/master/config/nodemon/dev.json#L5-L23
then the entire app restarts (there isn't really a way to hot reload any of this). If not, then webpack dev server should compile and hot reloads only the changed files.

Overall, the dev setup is quite slow and memory hungry. On a decent laptop with 8-16 Gb RAM and an SSD the initial build takes about 60-90 seconds. Hot reloading is typically 3-15 seconds, depending on number of changed files and their location in the dependency tree.

I am not sure what can cause the problem. So far it's been working for a few dozens of developers. Docker is guaranteed to work correctly. If not docker, maybe you could try a clean virtual machine? Maybe your global npm packages conflict with the project's packages? Do you place the project on an SSD? Are there any errors or warnings?

Type checking consumes a lot of memory. You may try to disable type checking and linting by setting these env variables (in shell or in .env file):

DEV_DISABLE_CHECKS=1
DEV_DISABLE_STYLELINT=1

[musicman11]

I used yarn dev but did prod:watch as well, same reloading issue with both even a simple html change from VS Code. Also though the project installed there were serveral 'warnings' about compatibility with core-js versions and lint dependencies. Took some jiggery pokery on both OS to install at all with all this. I'm still seeing if I can get Docker installed and it did seem like webpack should help with reloading. Cheers

[ivan-aksamentov]

@musicman11 warnings on yarn install are to be expected. There are so many dependencies and subdependencies that they sometimes clash. It should work fine.

However, yarn dev:nowatch (the part of yarn dev without nodemon watcher) should be warning- and error-free. Let me know if you encounter any warnings and errors there.

I am not sure what you mean when you say

a simple html change from VS Code

we don't really have any HTML in the project.
"Hot reload"/"fast refresh" are mostly only useful for anything in the src/components and src/pages directories, which developers modify the most often.

If you meant that you modify the index.ejs file (the HTML skeleton), the full rebuild is expected, because that's how webpack works. You don't need to modify this file under normal circumstances though.

Please let me know what kind of changes you have in mind and what other problems you encounter while investigating this issue, and I will be glad to help.

P.S. I also wanted to port the entire project to Next.js, so that we wouldn't need to maintain the build system, but it is not going very fast right now, as we have other priorities.