I have Angular 7 application deployed to Azure App Services. After each new deployment, even if I start a new browser, I have to manually refresh or hard refresh the browser page in order to see the new changes.
I can see in my deployment, the index.html file does have the new hashed file name embedded each time.
<script type="text/javascript" src="runtime.5959ec9531e22bc6ae82.js"></script>
<script type="text/javascript" src="es2015-polyfills.d9df4d9cef7e9c40c764.js" nomodule></script>
<script type="text/javascript" src="polyfills.eb0596823492af2b4693.js"></script>
<script type="text/javascript" src="main.1eb70d066995e0724818.js"></script>
Why the application didn't reload the index.html automatically? How to solve this problem?
The generated index.html which contains the links to your latest scripts is cached.
I would recommend to disable the caching for the location /index.html file only, so the browser ALWAYS loads at least the index.html.
Because the generated css and js contains a hash in the filename that changes if the resulted file changes after the build, the user should always get the latest version.
Related
I'm using Turbolinks on my website. My website has many pages where each page has a unique JS file in addition to the "base" js file.
Every page has the following scripts in its head:
<head>
...
<script defer src="/js/manifest.js" data-turbolinks-track="reload"></script>
<script defer src="/js/vendor.js" data-turbolinks-track="reload"></script>
<script defer src="js/app.js" data-turbolinks-track="reload"></script>
...
</head>
Every page may include another JS file in its body:
<body>
...
<script src="/js/pages/page1/index.js"></script>
</body>
Now many pages may load the same js file in their body tag:
Page1:
<body>
...
<script src="/js/pages/page1/index.js"></script>
</body>
Page 2:
<body>
...
<script src="/js/pages/page1/index.js"></script>
</body>
Page 3:
<body>
...
<script src="/js/pages/page3/index.js"></script>
</body>
Note how Page 1 and Page 2 load the same js file.
In order to build those JS files I use Laravel Mix which uses Webpack to compile and bundle the JS files.
When navigating between pages, since the JS file is embedded in the <body> element, the JS file is being re-downloaded (from cache) and re-evaluated by the browser. One would expect that if page1/index.js content is: console.log('hey');, they would see hey printed in their console for every page that loads the page1/index.js page.
However, unfortunately it is not the case. It seems like the browser does re-downloads the JS file, but for some reason, its content is not being executed. I believe this is due to the transpiled file's content. Because we are using Webpack to bundle the files, the file's content always starts with the following script:
(window.webpackJsonp=window.webpackJsonp||[]).push(...
It looks like Webpack is managing the runtime scripts on its own in order to keep track of dependencies (and also "lazy" dependencies). Inspecting the window.webpackJsonp variable does indeed reveals 2 entries for the pages1/index.js file (the first entry is when the page was first loaded, the second one is when we navigated to another page that loaded that same file).
For some reason, Webpack decides not to re-run the script on subsequent page visits (using Turbolinks) which breaks the application.
Any ideas about what I can do in order to solve this are highly appreciated!
I feel like asking the most stupid question, but i searched for a while now and could not get it figured out.
I have the following file structure under my Apache DocumentRoot:
DocRoot
- page1
- ...
- webapp
- index.html
- somescript.js
with index.html having a script tag looking like
<script src="somescript.js" type="text/javascript">
How do i configure Apache to serve https://myhostname.com/webapp so that the script get's loaded correctly? Page1 should stay accessible under https://myhostname/page1.
The current behaviour is that somescript.js does not get found, because the request is https://myhostname.com/somescript.js.
I do NOT want to set up a Virtual Host for this or edit the html file (get's generated).
Are webapp and page1 located in var/www/html? If so, probably your JS file is searched in html folder.
You have, at least, 2 solutions:
<script src="/webapp/somescript.js" type="text/javascript">
Configure virtual hosts for webapp and page1. So, you'll be able to connect to that pages via webapp.myhostname.com and page1.myhostname.com subdomens, and <script src="somescript.js" type="text/javascript"> will work for both of them, searching in their folders
I have created one web application in mvc. I have added one js file in my project. On _Layout.cshtml page I have added this script.
<script src="~/Scripts/main.js" type="text/javascript"></script>
My problem is if I do some changes in main.js file it is not reflecting after running the code. Browser is not updating the latest changes in script. To update the script I need to go to C:\Users\Demo\AppData\Local\Microsoft\Windows\INetCache and delete all the file from this folder. When I delete the files and refresh the page then the new changes is reflect. How can I avoid this? How can I update the script when there is changes?
In PHP I used to add random numer to link, then the browser treat the file as different:
<script src="~/Scripts/main.js?number=random" type="text/javascript"></script>
I have an html page which references a number of local script files, and in turn those script files reference other local resources. By local I mean local to the html file.
Is it possible to serve such a web page using a node.js server approach? So far as I've been able to work out so far, the node.js server can return html content, but when that is displayed in the user's browser, I can't easily see how it would be able to reference the various scripts, because the html isn't being served from a normal folder on the server, with relative access to the folders and resources around it.
Is there any way of doing this, or is it mad to even contemplate such an approach? Better just to stick the html and related resources on a standard server and be done with it?
EDIT: I should explain that the motivation for serving the html from node.js is that I'm already serving images from the node.js server, where those images are generated using the same scripts that the html will be using. So there are two ways for the user to get the same content: as a png file or as a web page, and in both methods the work is done by the same core scripts... one has an html front end and the other has a node.js front end. So it would be nice to be able to keep all the code in a single location, rather than having to duplicate stuff and have it in two places, and have to remember to update the code in the secondary location when I update it in the primary location.
EDIT to add folder structure to help debug this (see comments below):
mypage.html
myLibFile.js
/lib/*.js (various js resources including jquery)
/lib/modules/*.js (various js resources)
/lib/fonts/* (various resources)
/themes/*.js (various js resources)
In mypage.html I have:
<script type="text/javascript" src="/lib/jquery.1.9.1.min.js"></script>
<script type="text/javascript" src="/lib/libFile.js"></script>
<script type="text/javascript" src="/lib/modules/modFile.js"></script>
<link href="/lib/fonts/awesomefont.css" rel="stylesheet">
<script type="text/javascript" src="/myLibFile.js"></script>
<script type="text/javascript">
$(function () { // On DOM ready...
// ... code ...
});
</script>
and in my node.js I have attempted to set up express as follows:
self.app.use(express.static(__dirname));
self.app.use('/lib', express.static(__dirname + '/lib'));
self.app.use('/themes', express.static(__dirname + '/themes'));
Of course your relative paths will work when using your own custom built nodejs server, which can serve files, .html .css .js and such.
I assume you have some sort of public folder from where you serve your assets. If you don't use any special routing magic, and just reffer to structure of your public folder, then relative paths in your HTML, will work.
<link rel="stylesheet" href="styles/main.css">
Code above could load something like: public/styles/main.css
I am having a problem in the location of my javascript, the location is right, but when I run it in my visual web developer 2010 express, the location can not be found, I don't know the reason why...
here is the location of my javascript:
<script src="Style/javascript/jquery-1.7.1.js" type="text/javascript"></script>
here is the error:
**Server Error in '/Maitenance' Application.**
**The resource cannot be found.**
**Description: HTTP 404. The resource you are looking for (or one of its dependencies) could have been removed, had its name changed, or is temporarily unavailable. Please review the following URL and make sure that it is spelled correctly.**
**Requested URL: /Maitenance/Maintenance/Style/javascript/jquery-1.7.1.js**
Use this... It will work
<script src="<%=Page.ResolveUrl("~")%>Style/javascript/jquery-1.7.1.js" type="text/javascript"</script>
I guess you are using a master page and your .aspx page is put in another directory. The file path you included in master page is relative to the .aspx file. It works OK when your page in the same directory with the master page.
You can include your js file using ResolveUrl:
<script src="<%=ResolveUrl("~/js/jquery.js")%>" type="text/javascript"></script>
or you can include your script in the code behind of master page:
ClientScript.RegisterClientScriptInclude("jquery", ResolveClientUrl("~/js/jquery.js"));