Suppose we start pure HTML5/JS/JSON application. So UI in browser, user interaction handled by JS, data fetching/storing in AJAX.
By pure I understand that you don't preprocess any .html, .js, .css files (except a few configs) with any view template engine, scriplets, etc. Just pass as static resources.
To be maintainable project resources structured in hierarchy with several levels by / in URLs (and directories in file storage).
We don't want to inline any specific URLs in our code.
How to define URLs in HTML/JS so project can be moved without changes in .html, .js files (except a few config files)?
I see problems in following HTML code:
<script src=".../js/...">
<style src=".../css/...">
<image src=".../img/...">
and in following JS code:
ajax('GET', 'http://.../ajax/...');
When you preprocess files you can use:
<script src="${base}/js/...">
<style src="${base}/css/...">
<image src="${base}/img/...">
ajax('GET', '${base}/ajax/...');
Note that relative paths (like ../../ajax/data.json to get data from /html/data/list.html) may not work in included JS code (as you don't know at which level of HTML this inclusion happen, so don't know how much strip /).
Or pure HTML 5 project is myth?
One time preprocessor pass for inserting concrete IP/DN and context URL part resolve issue, but deploy in that case deploy far complicate then just copy files and set static content hosting...
Related
In WebPack I can use HtmlWebpackPlugin to build an HTML "front door" to my web app.
If WebPack has built chunks with dynamic filenames like runtime.384756.js, main.283746.js, then these will be injected into the HTML as:
<script src="runtime.384756.js"/>
<script src="main.283746.js"/>
But, I want a JS file to be the "front door" of what I serve. (The use case is a micro-frontend: a different site contains the HTML that calls my JS with a single <script> tag.
I can disable chunking, and generate a huge main.js which my client can link to.
But I'd the .js file they link to to be a small one (so it can be cheaply served without caching), which then loads the larger chunks. Functionally identical to loading the single-file version, but potentially more cache-friendly behind the scenes.
I'm not giving an example of what that tiny .js file would look like, because I'm not sure what it would be: import statements? Something more kludgy, but compatible with more browsers?
How can I get WebPack to build such a JS file?
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
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/
I have a web applictaion which use has the following folder structure
application_root
js
in the html, I refer the js like
<script src="../js/****"></script>
everything is file if I start the html page using file:///protocol, but when I use the web server, like http://loclahost:6000/application_root, I found the js cannot be loaded correctly.
How to solve this issue?
You need to start your path with /: <script src="/js/some.js"></script>
Anyway, this can be problematic because if you use a virtual directory, / won't work since it's the root path.
For example: /js/some.js is http://localhost/js/some.js, and if your web site is hosted in a virtual directory like http://localhost/myapp/js/some.js this approach won't work.
If you find above case part of your issue, you might need to use server-side code to get your application root (i.e. /myapp/) so you can concatenate /myapp/ to js/some.js and get the right URI.
I'd like to split my views in Grails into 2 files a .gsp file and a .js file so that I get a cleaner Javascript separation from my views. So here's an example:
views/index.gsp
views/index.js
views/home/index.jsp
views/home/index.js
But when I simply add the index.js script reference like this:
<script src="index.js" type="text/javascript"></script>
all I get is a 404.
Does anyone knows how to deal with this?
A great benefit would be to have the ability to use view data inside the index.js file to produce the desired content.
Matthias.
Actually, it should be perfectly possible to serve a JS file (or any other file type) as a GSP from your grails-app/views/ directory. The only thing you have to do, is define a suitable URL mapping for those GSPs, e.g.:
"/javascript/home/index"(view:'/home/index.js')
With this URL mapping, you can put your JS code into grails-app/views/home/index.js.gsp (note the trailing .gsp) and you can use any grails tags in your JS source. To ensure that your JS is delivered with the correct content type, you may want to place
<%# page contentType="text/javascript"%>
at the beginning of your GSP.
Unfortunately, the createLink tag doesn't support link rewriting to views, but it should be easy to write your own tag to create those links.
Anyways, keep in mind that this won't have a very positive impact on your app's performance. It's usually better to have static JS files (and also serve them as static resources) while passing dynamic stuff as parameters to JS functions for example. This will also keep you from some headaches wrt. caching etc.
The idea is good, but Grails has this directory structure for a reason. The view folder is intended for a certain artifact type (views)..
You could clone your view folder structure under web-inf, but that gives you more work as I guess the idea behind this is to keep related files close together for convenience reasons.
Even though I'm not to excited about storing Javascript together with the view I loved Robert's idea of hooking into the build process by using build events to copy javascript sources into the right directory! If you decide to go down that road you might as well compress the sources while you're at it. ShrinkSafe is popular library.
I don't think you are allowed to access js inside views/
if you need to do that ... here is the trick
create your js and rename it with myjs.gsp (use "")
iniside _myjs.gsp type you js
... write down you js in here ...
inside you gsp (for example: index.gsp, view.gsp, etc)
type this tag to upload you js
Update 2:
Grails offer the possibility of hooking into the build lifecycle using custom events.
An event handler can be written which synchronises all JavaScript files under grails-app/views with the target folder of web-app/js.
Place the custom code in $PROJECT/scripts/Events.groovy. The PackagingEnd is a good target for the invocation, since it happens right after web.xml is generated.
eventPackagingEnd = { ->
// for each js file under grails-app/views move to web-app/js
}
Update
If you'd like the JavaScript files simply 'meshed' together, you can do that using symlinks, e.g.:
grails-app/views/view1/index.js -> webapp/js/view1/index.js
As far as I know, there is no way of forcing grails to directly serve content which is outside of web-app.
Alternatively, you can inline your JavaScript, but that can have performance implications.
JavaScript files belong under web-app/js.
Then you can reference them using <g:javascript src="index.js" />.