When I update my code, and refresh the page, my server doesn't reflect the changes! It is still loading the old file? (this is running locally). I really don't understand why!
What I mean is that say I make a mistake, or decide to change a line of code. I fix the mistake, or change the line of code. But when I refresh the page, it is as though I have not done so. The mistake or the line of old code still remains behind and that code is ran!
Why?! I am using node's http-server to run my server on a Mac.
Angular sometimes comes with minimizing tools. If this is the case, you have to build your app using these tools to regenerate the files your browser should load.
If not, then probably it is a simple caching issue and you should clear your browser's caches.
In firefox , press Ctrl+Shift+I , then click on the gear (settings icon) ,
look for the option DISABLE CACHE under Advanced Settings , check it , so that it doesn't cache your old code , instead display the new code .
Angular caches your template files. You need to clear the cache, Chrome Developer Tools comes with a setting to disable the cache while the developer tools are open.
Disabling Chrome cache for website development
Related
I'm using DDEV with Visual Studio Code and I tried to configure Live Server Extension to automatically auto reload page that I'm working on in Chrome when I hit save in VSC, but it doesn't seem to work with PHP.
Is there a way to configure this to work with DDEV?
I can't seam to find any info on this issue.
Thanks
I've managed to do it another way, with guard and guard-liveguard on linux.
The workflow was:
guard installation
guard-livereload installation
Installation was not quite straightforward, but you can follow the instructions in Terminal and install what's missing if it tells you so.
Guard placed Guardfile inside of /home/user directory so I edited it to contain only this, regarding livereload pard:
guard 'livereload' do
watch(%r{.+\.(css|scss|html|php|js)$})
end
Then I installed Liveguard Google Chrome Browser Extension from here:
http://livereload.com/extensions/
Under settings I had to enable "Allow access to file URLs".
Also, you have to press liveguard extension icon in Chrome in order for it to track changes.
That's about it, now when I edit any of the file types entered in Guardfile (you can edit and add what you need, of course) it automatically reloads my Chrome window whit the edited page opened.
I'm using Firefox and use console.log quite a bit.
It just got updated to version 100, might have something to do with it.
But now files updates stop appearing in the browsers localhost upon refresh.
It's like the browser is still just seeing the older version of the files.
I have through trying and testing, found out that by going:
History
->Clear Recent History
->Select only cache, over the last 1 hour
And then click ok.
After that I can update the file and the browsers localhost will then show the new version after f5.
But after some time it stops working again in that given file.
And i need to repeat this.
I have tried:
Restarting the computer.
Reinstalling Firefox.
Renaming the given file im using each time.
Running sudo apt get update/upgrade
All to no avail.
It's like there is some cache storing the file and Firefox has just stopped updating that cache as I update the file.
Chromium appears to have the same problem.
I pressed f12 and there manually cleared several of the storages and that appears to solve the problem. But only temporarily. After a bit of time, its back.
It's like its emptying some cache, which once filled. Does not get updated again.
My OS is Linux Mint, 20.2.
And my browser is Firefox, version 100.0.
What's going on, how can I solve this?
Is anybody else having this issue?
Also, whatever the solution. I can expect this to be a problem for anyone trying to use my website. Question is how I can possibly solve this in a manner that solves this for anyone using my future website as well.
I think I found the solution
In Firefox, go to:
about:config
And set the following values:
browser.cache.disk.enable = false
browser.cache.memory.enable = false
network.http.use-cache = false
I think , you should try removing userdata from /home//.config or /home//.config Search for Mozilla or Firefox Folder
For firefox I like to use the Clear Cache addon, especially when doing web development in order to get the most recent version of pages. You may also look at changing the way your browser caches by modifying your code, as outlined here.
So I'm getting a blue screen of death whenever I have "npm start" running for a reactjs app. It's an intermittent crash, i.e. it doesn't happen every time I run it nor are there any exact steps to duplicate the crash, but I'll try to explain below under what circumstances it happens.
Create a reactjs app using create-react-app npm module.
Start the app using npm start. Chrome window opens, webpack is listening to changes I make to the source files.
Change any source file, and save it. NPM compiles it, Chrome page refreshes, and I can see my changes.
The above things work fine as expected "normally", but once in a while, right after I save a file, the system crashes with a BSOD saying DRIVER_IRQL_NOT_EQUAL_TO_OR_GREATER_THAN (NETIO.SYS) There is no definite "step" or action other than saving the file, or refreshing Chrome that would cause this to happen, and it also doesn't happen every single time.
Here are the steps I took to find out/eliminate the root cause of this issue:
Disabled by AV (Symantec Endpoint Protection).
Use a different browser (Mozilla, hell, even IE).
Changed the system (used a different laptop, although the same type - Microsoft Surface on Windows 10)
Updated all drivers, etc. (Verified by my organization admins)
Closing all other programs, etc. that might potentially be interfering (Atom IDE, Eclipse, etc.)
The necessary conditions for the crash to happen are:
npm start must be running (webpack server on localhost:3000)
A browser window must be open connected to localhost:3000 (if no browser is connected, it doesn't crash even if you change and save the file 200 times - I checked). Also, doesn't matter which browser (Checked with Mozilla/Edge/Chrome)
I believe the crash happens when NPM is recompiling the files and serving it to the browser (asking it to refresh using some websockets), but I'm not an expert on NodeJS/NPM so I'm not sure.
I've been stuck on this issue for more than 2 weeks now. Any help would be really appreciated. Kindly let me know if more information is needed.
The issue was with Symantec DLP (Data Loss Prevention) that was also installed on all our systems. The issue resolved itself after the admins added application exceptions for Nodejs, NPM, my reactjs project workspace paths.
Just posting this so that in case someone has a similar issue they can try this or remove Symantec DLP altogether.
I have my work computer which is a Windows 10 Pro and my laptop is a Windows 10 Home. Working on the same project on both: push and pull to Git. Learning React through Udemy. Both computers using Chrome. Both using Bash on Ubuntu on Windows with latest updates. Both using ConEmu for the console. Both npm -v = 3.10.10. Both node -v = 6.11.2. Hardware is different obviously, but not sure that is relevant and worth listing.
Anyway, this starter project I am playing around with, when I make changes to it and npm start is running, you can see activity in the console, hit refresh in the browser, and any changes made will be reflected.
On the laptop, this process does not work. Make change, save, no activity in console, refresh in browser does not reflect the changes. Have to restart npm start for changes to be reflected. A little irritating to say the least.
Anyway idea what might cause this? Really haven't come across anything in my Googling efforts.
If you are using npm in WSL2.0 for development, please refer the last point in this-
https://create-react-app.dev/docs/troubleshooting/#npm-start-doesnt-detect-changes
While WSL1.0 doesn't use a VM, WSL2.0 does use a lightweight VM, so adding
CHOKIDAR_USEPOLLING=true
in a .env file in the project directory fixed the problem.
On a sidenote, you might wanna take a look at this
Client side
To ensure client side changes aren't being cached, you can open devtools > Network, and check "Disable cache". After enabling this, you won't have anything in the cache as long as devtools is open.
Alternatively, you can use incognito / private browsing mode to prevent the cache from holding on to things.
Server side
I'm sure you've realized that it's a pain to restart your server every time you want to see your code update. There are several tools that will detect file changes and handle restarting the server automatically.
PM2
Nodemon
Forever
I just add file .env and inside FAST_REFRESH=false.
For me, working in Windows, WSL2 caused this not to work. Running npm start in Command Prompt, not WSL solved this issue for me.
I'm making an app in the Cloud9 IDE using Node.js with the Express.js framework. Something very odd is happening to a specific .ejs file where if I try to update it (like typing some mumbo jumbo in an h1 tag and then saving and restarting the server), it NEVER gets reflected in the browser no matter what I do. For example, if I delete my jumbotron, save, restart the server, and then refresh the browser, I still see the same page with the jumbotron. I also tried deleting this entire file and then restarting the server and I still see the page and it doesn't break my application which is bizarre. All other .ejs files are fine and I can see the changes that I make.
I've spent about 4 hours trying to figure this out and no one else seems to have my specific issue. I tried clearing my browser cache, using different browsers, logging in/out from Cloud9, creating a new database, going back to older versions of my code, etc. and nothing seems to be working. I'm not even sure what code to post on here since my entire app is about 2000 lines of code so far. Does anyone have any suggestions because this is really frustrating.