Deploy web application - javascript

I am new in web deploying. Now I have to manage windows server and every month I need to deploy new version of applications.
I have trouble with javascript. In almost every version of web applications is changed some javascript file (all javascript files are bundled in one minify javascript file).
Most of users use google chrome. Trouble is browser cacheds styles a javascript files. After deploy new version is loaded in browser old version of javascript file.
Does exists any solution how to resolve this problem programmatically in application or some solution after deploy? In best case withou user colaboration (for example refresh cache by CTRL+R)? What is the best practice?
Our application is developed as .NET CORE 2 Razor Pages web application.
Thanks for advice

Use the tag helpers for script and style files, which take an additional attribute append-version, which appends a new query string value each time there are changes in the files.
<link href="/styles/site.css" append-version="true" />
<script src="/scripts/site.js" append-version="true"></script>

If you are using normal html, css, js project then you can add versioning in your js and css libraries and update your index.html with updated version.
Or if you are using node js, react js, angular js then you can use index.ejs instead of index.html and you can add hash code with your js and css libraries like
script1.1ebecec8538d52c8f844.js
script2.2e765bd6680f0c925e8a.js
style1.1ebecec8538d52c8f844.css
style2.2e765bd6680f0c925e8a.css
Or you can also use CI/CD for npm project.

you can make sure that any updates you’ve made to your bundle files will take place immediately for all users with using versioned names like:
<link rel="stylesheet" href="style.css?v=1.1">
The browser will view a file name of style.css as different from a file name of style.css?v=1.1. It also works for script files as well:
<script src="main.bundle.js?version=1.0.1"></script>
But then If you have one giant file, and change one line of code, the user must download that entire file again. Think of a solution, to creating more smaller files, like with splitting out npm packages used in your solution from your own code, to have better release-flow.

If this is about .css and .js changes, one way is to to "cache busting" is by appending something like "_versionNo" to the file name for each release. For example:
script_1.0.css // This is the URL for release 1.0
script_1.1.css // This is the URL for release 1.1
script_1.2.css // etc.
Or alternatively do it after the file name:
script.css?v=1.0 // This is the URL for release 1.0
script.css?v=1.1 // This is the URL for release 1.1
script.css?v=1.2 // etc.
Please check link
Link

Related

How to read javascript file in frontend javascript/browser

Please read carefully before marking as dupe.
I want to read a javascript file on frontend. The javascript file is obviously being used as a script on the webpage. I want to read that javascript file as text, and verify if correct version of it is being loaded in the browser. From different chunks of text in the js file, I can identify what version is actually being used in the end user's browser. The js file is main.js which is generated by angular build.
I know we can do something like creating a global variable for version or some mature version management. But currently, on production site, that will mean a new release, which is couple of months from now. Only option I have right now is html/js page, which can be directly served from production site, without waiting for new release.
So my question is, is it possible we can read a javascript file as text in hmtl/js code in the browser.
an idea can be :
use fetch api to get a container that can be use to async load the script
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
use text() method which return a promise to get text content
fetch('http://localhost:8100/scripts.js').then((res) => res.text()).then(scriptContent => {
// scriptContent contain the content of your script
// if (scriptContent.includes('version : 1.1.1')
console.log(scriptContent);
});
this is absolutely not an efficient way, but since you want to work without any new version release or working with a version management system
here is the thing
assume file's checksum (md5 sha125 or anything) of V1.0 equals X and you will calculate before the coding part.
if checksum(X) != X{
location.reload()
}
would help for a security features too since it's an important project.
another way of controlling this situation is changing the main.js file's name if it is possible.

How to version JavaScript and CSS files efficiently?

I have lots of CSS and JavaScript files. Currently I maintain versioning using something that looks like this:
modal.js?v=1.0.0
form.js?v=1.0.0
table.js?v=1.0.0
style.css?v=1.0.0
These files are loaded in multiple HTML files. When I need to change version I manually go to every HTML file and change the path like this modal.js?v=1.0.1. But it's a headache to change every files every time.
I can do versioning dynamically like this
modal.js?v=<script>(new Date()).getTime();</script>
But I have a problem here: I use file caching. I need to cache files only when the file version is updated, otherwise use old cached files.
I already tried these but they do not fulfill my requirements:
JavaScript and CSS dynamic versioning
https://www.c-sharpcorner.com/article/how-to-force-the-browser-to-reload-cached-js-css-files-to-reflect-latest-chan/

Cache Busting: Parameters vs Folders vs Files

I am looking into best practice / browser-proof techniques of ensuring that the browser cache is refreshed when I push a new update to my site, containing changes to html/css/js etc.
So far I have implemented a parameter based system next to all files that are loaded but I don't believe it is working consistently across browsers.
I was thinking of implementing folder based versioning, is this a good / bad / useless option? Example:
|--Site
|--redirect.v1
|--redirect.html
|--redirect.html
|--login.v1
|--login.html
|--login.css
|--home.v1
|--index.html
|--index.css
|--shared.v1
|--js
|--bootstrap.min.js
|--tether.min.js
|--jquery-3.2.1.min.js
|--ie-detector.min.js
|--images
|--logo.jpg
|--loading.gif
|--favicons
|--favicon.ico
|--favicon-16x16.png
|--mstile-144x144
Example file loading within the HTML:
<script src="../shared.v1/js/jquery-3.2.1.min.js"></script>
<script src="../shared.v1/js/tether.min.js"></script>
<script src="../shared.v1/js/bootstrap.min.js"></script>
<script src="../etc.v1/etc/etc.min.js"></script>
If any update occurs to a file in a folder I would like to simply update the physical folder name and deceleration in the HTML.

Force reload Javascript-file on publish WITHOUT server code in view

I have a project that uses a Javascript-File for its logic:
<script src="myMagicCode.js" ></script>
When I publish a new Version, clients have to clear the cache for the new code to work.
I usually can get around this problem by adding a parameter:
<script src="myMagicCode.js?version=1.23" ></script>
But I am too lazy to do this on each release. So I want to automate this behavior.
The page containing the script-reference is pure html and can not contain any server code.
I have however server code that returns the version.
So my idea would be to change the script - code to something like
<script src="api/GetJsUrl"></script>
Where api/GetJsUrl is a GET-Action which contains something like
string url = "myMagicCode.js?Version="+GetCurrentVersion();
HttpContext.Response.AddHeader("Location", url);
return new HttpStatusCodeResult(307);
Will this force the browser to reload the JS-File when a new version is published? Or will just the api/GetJsUrl-Request be cached and I have the same issue like before?
If there are still issues: Are there better solutions?
Remark: I do NOT search for a solution that reloads the JavaScript-File every time. I need a solution that only reloads the file when I deploy a new release (the version number changes).
You can use a task runner like Grunt or Gulp:
http://gruntjs.com/
http://gulpjs.com/
They can lint, minify, build some things AND do what you want, looking to some properties file that contains the project version and editing your html.
They even can join your js file to one and replace it on your index.html:
<script src="compiled.js?_=1234567890"></script>

how to load the latest javascript files every time the user visits the website [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How do I force the refresh of javascript files in a browser?
My application in ASP.NET MVC based and javascript files are included in .csHtml file.
I require this so that the user do not have to do a [Ctrl+F5] or manually clear cache and the most recent version of javascript file is loaded everytime in the browser.
I appreciate if some examples can be provided.
Primary technique suggested is to use a dummy paramater while including the file.
Also I do not what to change the parameter manually every time I modify a js file. Need some examples if this can be done automatically.
EDIT 1:
Please provide solution to this with ASP.NET MVC prospective.
Put a version number in the filename for your JS files (like jQuery does). Then, whenever you rev the JS files, you bump the version and change the HTML files that include it.
The jQuery file naming example:
jquery-1.8.3.js
jquery-1.9.0.js
This lets you set very long caching on your server for the JS files themselves which really helps with performance on your site. But, any time you rev the JS files, the viewer gets the new JS files immediately because the newly named files are pulled by the new HTML file because they aren't in the browser cache.
You want to use Bundling and Minification. Depending on your version of MVC, the implementation is slightly different. In the newest version, it is used by default.
Bundling and Minification will combine and minify all your scripts (and styles sheets) into one file (or multiple, depending on how you use it) and serve them up with a unique parameter. Any time a file changes in that particular bundle (and thus the user would require to download the new files) the parameter automatically changes.
For MVC3, you'll need to install Microsoft Web Optimization.
Then in your global.ascx, you'd do something like this and call it from Application_Start:
private static void SetupBundling()
{
var jsBundle = new Bundle("~/Scripts/js", typeof(JsMinify));
jsBundle.AddDirectory("~/Scripts/", "*.js", false);
jsBundle.AddDirectory("~/Scripts/anothr-good-folder/", "*.js", false);
BundleTable.Bundles.Add(jsBundle);
var randomBundle = new Bundle("~/Scripts/random", typeof(JsMinify));
randomBundle.AddFile("~/Scripts/random/main.js");
randomBundle.AddFile("~/Scripts/random/cool.js");
BundleTable.Bundles.Add(randomBundle);
var cssBundle = new Bundle("~/Content/css", typeof(CssMinify));
cssBundle.AddDirectory("~/Content/", "*.css", false);
BundleTable.Bundles.Add(cssBundle);
}
So that first bundle will bundle every .js file in your ~/Scripts folder. In your head file you can reference it like:
<script src="#Microsoft.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Scripts/js")" type="text/javascript"></script>
And it will be rendered like:
<script src="/Scripts/js?v=-2573834892993289" type="text/javascript"></script>
And any time one of your .js files change (or .css), so will the parameter.
Similar implementation for the CSS bundle, and also if you want to reference the randomBundle only on certain pages.
You can do cache-busting by attaching a random hash or number URL parameter after each javascript file URL like so:
http://www.bestsiteonearth.yes/cool_javascript.js?cache_buster=2187sasas1289012890aohkjaiosa0990
Since that number is different each time the page is loaded the URL will not be cached. More info here. Tutorial gives PHP examples, but if you know how to create a hash or random number in any language & can attach it to a URL you are good to go.
Personally I use PHP, but the way I do this is to search the output buffer for static files, such as images, scripts and stylesheets (and audio, video, whatever), then retrieve their modification time from the filesystem and append it as /t=TIMESTAMP. I then use .htaccess to strip the timestamp off and get the original filename. This is preferred over query strings because many clients will not cache files with query strings, and it's also preferred over versioning because it updates automatically simply by modifying the file.

Categories