Core: `adonis serve --dev` does not watch & nor does it live reload

[WhereJuly]

Package version

Adonis v 4.1.0

Node.js and npm version

Node: v12.16.1
npm: 6.14.4

OS

Windows 8.1

The Issue Description

1. I start development server with adonis serve --dev;
2. It starts the server on 127.0.0.1:3333;
3. It detects JS files changes;
4. It does not detect project/resources/views/welcome.edge changes;
5. It does not live reload the page on 127.0.0.1:3333;

Is it expected behaviour?

[WhereJuly]

Additional Experiment

Package Version

Adonis 5

• fresh installation with npx create-adonis-ts-app <project-name>;
• run with node ace serve --watch;

Node, npm, OS

Same as in the post above

The Issue Description

Same as Adonis 4.1.0 above except Adonis 5 sees the changes in project/resources/views/welcome.edge that Adonis 4.1.0 did not;
But still no live reload;

[McSneaky]

.edge files are re-rendered at every page refresh :wink: Unless you have CACHE_VIEWS variable set to true. There's no need to reload server because of .edge changes

Since Adonis is backend framework it doesn't do page refresh in browser, which is on client side only

[WhereJuly]

@McSneaky I am not talking about server reload. I am talking about live page reload within --dev process.

This is strange to run a development server, have JS re-compiled on files change but not to reload a browser tab. Neither to live reload as a reaction to .edge files change.

Hence my question: is it expected behavior? I beleive this is not. But want a confirmation from the developers.

[RomainLanz]

This is completely intended.
We are a backend framework, it's a non-sense to have hot reload.

[WhereJuly]

@RomainLanz even if this is intented this is a drawback. Which makes use of the framework harder making its target audience smaller.

Adonis is not a backend framework. It is a full-stack framework with 50/50 front / back. It is clearly seen on its Installation page: the adonis new yardstick command installs Adonis full-stack blueprint project structure. Thus by this fact Adoins is promoted by the authors as full-stack farmework.

With all this in mind my question is: do you really not to care for at least a receipe for your target audience on how to make live reload working for the full-stack framework?

I am just interested in the reasoning behind.

[WhereJuly]

For those who want to make a live reload for their Adonis full stack project instead of pressing F5 1000s times a day keep reading.

The general reload system work process outline is as follows:

1. You run your Adonis project server with nodemon instead ot adonis serve --dev, ensure the server is running all the time you are developing;
2. You use gulp and browser-sync to run another continuous watch task to watch for changes in your-adonis-project-scr-folder/**/*.* all the files and reload the project browser tab on each change.
3. The configuration of the Browsersync in the step 2 should proxy the Adonis server 127.0.0.1:3333.

In details (for Windows):
1. On a fresh Adonis installation
- install nodemon with npm i nodemon --save-dev;
- add the following command to scripts section of package.json:
"serve:dev": "nodemon --watch app/**/*.* --watch start/**/*.* --watch config/**/*.* --watch resources/**/*.* --watch public/**/*.* --watch .env -x node server.js"
- run the command npm run serve:dev, edit any Adonis files and see the serever restarts;
2. Install Gulp and Browsersync with npm install gulp browser-sync --save-dev;
3. Add the Gulp watch task call to your package.json scripts section :
"watch": "gulp watch"
4. Add the Gulp task in gulpfile.js with the Browsersync config: see the snippet;
5. Run the command npm run watch, go to localhost:3000, edit Adonis project files and see it live reloads on the page;
6. Do not forget you have to keep running both your Adonis project server (npm run serve:dev) and the Gulp watch task ( npm run watch) simultaneously to have it working.