Integrated Live Reload

[LyubomirT]

Solves the issue #1. This pull request integrates Live Reload into the server, so the changes will be shown on the page itself when any of the files are changed. It works by pinging the /version route of the server (new), which shows the current version of the boilerplate. If the version differs from the "current" one, the page will be reloaded and the new version will become current. The version number is increased after each file update.

Possible improvements

To make the code the user wrote work out-of-the-box without unnecessary changes, we can make the server "secretly" add Live Reload to the current page in a <script> tag when rendered, instead of placing it in the boilerplate for the project.

[adhilsalim]

Thanks for PR I'll take a look at it on Sunday morning.

[adhilsalim]

Hey @LyubomirT,

Great work on your PR! I've reviewed it and your solutions definitely hold water.

One minor adjustment, though: the current approach adds a reload script that, while functional, triggers an additional reload during project build (including the script itself).

Ideally, we'd want the live server to handle reloading itself. For reference, here's my previous implementation:

server.close();
server.listen(3000);

Let me know your thoughts on this! We can definitely brainstorm better solutions together.

[LyubomirT]

Hey @LyubomirT,

Great work on your PR! I've reviewed it and your solutions definitely hold water.

One minor adjustment, though: the current approach adds a reload script that, while functional, triggers an additional reload during project build (including the script itself).

Ideally, we'd want the live server to handle reloading itself. For reference, here's my previous implementation:

server.close();
server.listen(3000);

Let me know your thoughts on this! We can definitely brainstorm better solutions together.

Hello! Thanks for reviewing the PR. Unfortunately, it's not possible to integrate Live Review without anyhow dealing with the frontend. We can, however, make the process more user-friendly by hiding / simplifying some things. Would you like me to do that?

[adhilsalim]

Hello! Thanks for reviewing the PR. Unfortunately, it's not possible to integrate Live Review without anyhow dealing with the frontend. We can, however, make the process more user-friendly by hiding / simplifying some things. Would you like me to do that?

Sure, but can you also make sure this is the only way we can do this? When you have time (after your exams!) please see MEVN-CLI and how they achieved the same.

I'm using chokidar to watch file changes, here is an example btw:

npm install chokidar

const chokidar = require('chokidar');

const filePath = 'my-file.txt';

const watcher = chokidar.watch(filePath, {
  // Optional: configure options like ignored files
});

watcher.on('add', (path) => {
  console.log(`File added: ${path}`);
});

watcher.on('change', (path) => {
  console.log(`File changed: ${path}`);
});

watcher.on('unlink', (path) => {
  console.log(`File deleted: ${path}`);
});

// You can define event listeners for other events like 'addDir', 'rename', etc.

(I'll be little busy until this Wednesday, university lab exams)
Thank you !

[LyubomirT]

Wish you all the best with your exams. I'll take a look at MEVN and will try to figure things out, thanks for pointing me in this direction.