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
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
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/
I have a Spring Boot Web Project that uses Joinfaces and Primefaces. The application extends from SpringBootServletInitializer and also generates a war file.
For development I start my Project (in Eclipse) using RunAs -> Spring Boot App. I've added the spring-boot-devtools dependency as described in the Developer Tools Docu. Everything seems to work, except that changes in a xhtml file also triggers the restart.
I've added the spring.devtools.restart.additional-exclude property in my application.yml to exclude also webapp/**. But this seems to have no effect, because a change still triggers the restart.
spring:
devtools:
restart:
additional-exclude: webapp/**
My Project structure looks like:
src
-main
-java
-resources
-webapp
- *.xhtml
But maybe I do not understand how to use the DevTools correct - Starting the application as Spring Boot App might not be the correct usage? Because if I place a file e.g. foo.txt under src/main/resources and update its content the application is also restarted (using the DevTools defaults (which should exclude /resources)).
Using:
Eclipse Oxygen.3a Release (4.7.3a)
Joinfaces 3.2.1 -> Spring Boot 2.0.2.RELEASE
The solution to my main problem might be relatively easy.
I've added the webapp folder as Source Folder in Eclipse. As soon as I've removed the folder from the list of source folders, the reload was no longer triggered when I changed something in the xhtml files.
This answer gave me the idea, that the source folder might be the problem.
My exclude also did not work. What I did as a workaround is slowing the reload down like this:
poll-interval: 6000
quiet-period: 5000
I am using MavensMate Build 3124, which requires a separate MevensMate app in combination with Salesforce. I can now no longer find my project settings, meaning I can not refresh from my Salesforce server using API 38.0. This keeps resetting my package.xml to v37.0. I have set my Global Settings to use API v38.
Where can I find my project settings so that I can refesh using API 38?
look for the following file in your repository:
[your-project-name].sublime-project
add the following
{
"mm_api_version" : 38.0
}
Hoping someone can answer this because I'm struggling...
I have an angular js app that was build with the yo-angular generator. All works fine with deploying through grunt build control, as long as I'm not using the #-free "html5mode."
However, once I enable html5mode to remove the # from my routing and then deploy, my app on github pages doesn't point to the correct source for its scripts and such... For instance, I'm getting a 404 error because it's looking for http://{{user name}}.github.io/scripts/{{name of file}}, instead of http://{{user name}}.github.io/{{app name}}/scripts/{{name of file}}
How can I get it to point to the correct directory?
Hope this makes sense. I'll share more if needed!
You also need to configure the server. The configuration change will depend on what technology you are using to host the app on the server. How to configure your server to work with html5mode
Any time, I make code changes in .hmtl file or the .js file, the browser still renders the old code and my new code changes don't show up in the browser result.
For example, I add the following 2 lines of code in .html file.
<div class="control-group">
<label class="control-label">First Name</label>
<div class="controls readonly">
{{profile.FirstName}}
</div>
</div>
<div class="control-group">
<label class="control-label">Last Name</label>
<div class="controls readonly">
{{profile.LastName}}
</div>
</div>
Then I do the following:
In VS2013, right click on my project and view in browser (IE or Chrome).
Login to my application.
Go the respective page and I see the rendering of the old html file. I do not see the newly added 2 div elements rendered at all.
I even hit f5 to refresh the browser but still no luck.
What am I doing wrong?
Hit F12 in your browser to bring up the Developer Tools. Disable the Cache. Reload your page.
Besides using Dev Tools to make sure the cache is disabled, you can edit your Web.config file and tell IIS to not cache your Angular files:
<configuration>
<!-- Disable IIS caching for directories containing Angular templates and scripts -->
<location path="app">
<system.webServer>
<staticContent>
<clientCache cacheControlMode="DisableCache"/>
</staticContent>
</system.webServer>
</location>
...
</configuration>
My Angular root directory is app/. You may need to modify according to your file structure.
TypeScript only!
In tsconfig.json add…
"compileOnSave": true,
Try disabling your cache with Dev Tools:
https://developer.chrome.com/devtools/docs/settings#general
Open devTools in chrome and select Network tab, In Network tab Un-check the Disable cache and reload the page.
For me, none of the previous answers worked. I was using Chrome, and the only way I was able to view the update was by opening an incognito window. My regular browser window, for some reason, just will not get the latest assets.
I have tried clearing my cache, disabling cache on devtools, and hard refresh, to no avail. The only way I was able to fix it was by clearing the DNS cache. Here's a link with more details:
How to Clear the DNS Cache on Computers and Web Browsers
Using command line, here's how you go about doing it:
Windows 7 & Earlier
ipconfig /flushdns
Windows 8
ipconfig /flushdns
OSX (Yosemite, El Capitain, and Sierra)
sudo dscacheutil -flushcache
sudo killall -HUP mDNSResponder
You need to change the aspnetcore enviroment variable from production to development. From the official website:
... set an environment variable to tell ASP.NET to run in development mode:
If you’re using PowerShell in Windows, execute $Env:ASPNETCORE_ENVIRONMENT = "Development"
If you’re using cmd.exe in Windows, execute setx ASPNETCORE_ENVIRONMENT "Development", and then restart your command prompt to make the change take effect
If you’re using Mac/Linux, execute export ASPNETCORE_ENVIRONMENT=Development
If you are in linux, you might have to do it as a superuser. i.e.
sudo export ASPNETCORE_ENVIRONMENT=Development
The value of the variable may revert back to Production after re-booting. If you want to work with several environments, I suggest you define them in the launchSettings.json file:
{
"iisSettings": {
"windowsAuthentication": false,
"anonymousAuthentication": true,
"iisExpress": {
"applicationUrl": "http://localhost:40088/",
"sslPort": 0
}
},
"profiles": {
"IIS Express": {
"commandName": "IISExpress",
"launchBrowser": true,
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development"
}
},
"IIS Express (Staging)": {
"commandName": "IISExpress",
"launchBrowser": true,
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Staging"
}
}
}
}
Read about environments here:
In chrome press F12>go to network tab> disable cache
deleting the dist folder from clientApp folder from source resolve my issue and it started auto refresh again
Or you can use Browserlink in Visual Studio 2013 to automatically reload the page
http://www.asp.net/visual-studio/overview/2013/using-browser-link
You need to run command yarn webpack:build to recompile your client code. Otherwise modifications/updates in .HTML, .json, .ts files will not be reflected.
I simply deleted the dist folder in Visual Studio and it auto refreshed again.
**** this was for Angular 7 ***
Just right click on the page reload button on the browser and choose "Empty cache and Hard Reload"
In my case issue inside Angular.json file "deployUrl": should be relative path Like "/support/yourpagenam/bundle/dist/"
Hence any changes made in Angular files are not reflecting to Browser.
Problem
Client-side (Browser) caching of static files in dev enviornment
Server-side (IIS Express) caching of static files in dev enviornment
Solutions
For Client-side (Browser) caching of static files in dev enviornment
Web.Config/ApplicationHost.config Approch: Web.config Approach
suggested by #NateBarbettini above. Please note that this approach is
also can be applied to 'Applicationhost.config' instead of web.config
file.
"Always Refresh From Server" in IE as suggested above by #Phil Degenhardt. Please find screenshot below.
Navigate to source file location in browser address bar: Try to navigate to the JavaScript file in question by typing the address. It will show you JavaScript file contents. Once you do this, file gets updated.So you can again go back and try to navigate to proper landing page of your application. This time, you will see you get latest JavaScript code getting executed.
e.g. If you have problem with not updating 'app/home/home-account.js'. Then in browser navigate to 'http://[your-host/localhost]:[specified port of your application]/app/home/home-account.js. This will show you the contents. Then again navigate to your application's home page i.e. in this case 'http://[your-host/localhost]:[specified port of your application]/'
For Server-side (IIS-Express) caching of static files in dev enviornment
visit IIS Express appcmd commandline utility. In my case, appcmd is located in "C:\Program Files(x86)\IIS Express\appcmd.exe" this path. Then use SITE list and SITE delete command to remove temporary files cached in iisexpress.
There is also one solution which is specific to IE mentioned here:
Visual Studio 2013 caching older version of .js file
This happens because of cache stored by the browser. Before running your application you can delete cache and cookies stored by your browser.
Set HTTP Response headers to expire content through IIS manager.
Open HTTP Response Headers module for you web application
Click Set Common headers in the Actions pane
https://www.iis.net/configreference/system.webserver/staticcontent/clientcache
I opened link in Incognito mode since in that mode cache is disabled and Voila it worked.