React App in Azure Website caching issue, browser serves old version

Question

I have a react app which works perfectly fine.
However we are pushing code after NPM BUILD and deploying the code manually via SFTP

We can see the JS and CSS files have different names.

However the browser keeps downloading css and js files form cache, even if I disable cache in the browser.

I tried deleting all files in FTP, and magically the website keeps working? so it looks all the files are retrieved from the browser cache even if nothing exists in the server

I tried stopping and starting the azure website, but didnt make any difference I tried cleaning the browser, cache, history, etc, no difference.

I wonder if I need to setup something in web.config, or in Azure website settings to make this works

Answer 1

This seems to be not an issue with Azure app service (Web app), you need to remove the caching of the react app with the following steps

Step 1: adding the following to in index.html

<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

Step 2: inserting the following to the js

import { unregister } from './registerServiceWorker';

and call

unregister()

Reference Answer

Answer 2

It depends on how your app is configured, but I would not recommend disabling cache on the JS & CSS. Instead, it's best to add some version-dependent information to the file name so every time the JS or CSS update the file name changes.

Last time I worked on a web project we had it such that our JS & CSS had a content hash at the end. Something along the lines of main.205199ab45963f6a62ec.js instead of just main.js. Also note that you don't even have to manage that hash yourself, as there are ways to get ASP.NET or webpack (etc...) to update the reference in the HTML/JSX for you.

Here's webpack's page about it: https://webpack.js.org/guides/caching/