Live Server/Five Server Refresh Nightmare (and How I Solved it)

After spending hours moving event.preventDefault() around I read this on Stack Overflow link

I quickly deleted Live Server v5.7.8 by Ritwick Deyand and tested the page without Live Server the weird refreshing was gone. It turns out the whole thing was because Live Server was also tracking changes in my backend folder so when I clicked upload and the file was saved to a folder on my backend it triggered a refresh on my frontend🤦‍♂️. Having to constantly refresh the page manually is pretty annoying so I had to find an alternative, introducing Live Server (Five Server) but it had the same problem. Unlike the original Live Server though, this extension provides the option to ignore certain files or directories from your settings.json file.

Here’s how to do it:

1. Open the settings tab

   

2. Search "Five Server Ignore" and click "Edit in settings.json"

   

3. While in settings.json you should see the key fiveServer.ignore at the bottom of the file with an empty array as its value.

   

4. Add the directory you'd like to ignore and just like that, it is done

   

   Any changes you make to files within that directory will not be tracked by Live Server (Five Server) and as such won’t refresh your frontend unexpectedly. Thanks for reading to the end.

   Fun Fact: I initially titled this article “Weird FormData Events” because I thought the issue was caused by the weirdness of the FormData object. I couldn’t have been more wrong.