I just downloaded the latest version of angular-seed, and I noticed a file I haven't seen before (in any project). There is a index-async.html.template file within the app folder. I know enough to know what asynchronous loading is, but I have never seen a .template file used in web development before. Does anyone out there know what this is used for, and if there is any benefit to using the index-async.html.template vs. just the regular index-async.html?
It looks to be used solely when using the Angular-Seed update feature. If you look into the update-angular.sh file in the scripts directory you find this:
# Update the inlined angular-loader in app/index-async.html
sed '/##NG_LOADER##/{
s/##NG_LOADER##//g
r app/lib/angular/angular-loader.min.js
}' app/index-async.html.template > app/index-async.html
So, it seems that Angular-Seed will auto replace some dependencies when you use the update. It does this by token replacing in .template and then overwriting index-async.html.
So, it isn't to be used in web development.
Related
I'm programming a project using HTML and JavaScript. I access my js code with the following script tags:
<script src="js/monthChanger.js"></script>
However, when running my program in Edge & Google Chrame, I keep getting
this error.
Why is this happening? Looking at my file directories there doesn't seem to be anything wrong with the way I declared the function.
check out this article on absolute and relative paths
you probably want this:
<script src="./js/monthChanger.js"></script>
The ./ makes it relative to the current folder.
Alright, so it turns out my issue had nothing to do with HTML.
I didn't specify this in the OP, but I was also using a Django's framework in my project. I had mistakenly assumed that static fields such as css, js, and images would be called the same way they are called in normal html files. However, after reading django's documentation on managing static files, I realize that this is not the case. I follow django's instructions and was able to get my code working.
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 a vue.js/Phoenix app. I'm trying to understand how to properly configure the frontend assets. I'm having trouble understanding why my priv/static/js/app.js file keeps updating whenever I Change something in other files. I'm trying to research this behavior but I can't seem to find out any information.
app.html.eex
<body>
<%= render #view_module, #view_template, assigns %>
<script src="<%= static_path(#conn, "/js/app.js") %>"></script>
</body>
My basic question is how to structure a vue.js app? The fact that I change something in asset/src dynamically changes something in static/js/app.js seems really strange. Does anybody have resources or answers on what might be happening here or places I can go to learn more?
In addition to what Pawel said, this behaviour might be intentionally configured. There is the watcher specified in config/dev.exs:
watchers: [
node: ["node_modules/brunch/bin/brunch", "watch", "--stdin",
cd: Path.expand("../assets", __DIR__)]]
That would be used in development mode to allow so-called “hot reload”: one does not need to reload the application when some changes in assets are made, app.js will be rebuilt and reloaded automagically.
There is also assets/brunch-config.js file, where one might specify rules of how the resulting app.js is being produced. By default is just compiles everything found in assets to the single javascript file, but this behaviour might be easily changed (e.g. one might exclude anything from being built into app.js and specify their own rules to provide an access to these excluded files.)
As contrary as this might sound, this is exactly the behaviour Phoenix (with Brunch) provides.
The main idea is to implement your JS functionality in assets/js/app.js, then Brunch (http://brunch.io/) as a build tool will take the content, compile/transpile and output to priv/static/js/app.js.
This means, with default configuration that comes with Phoenix, you can use ES6 in your code in assets/js/app.js, but this will be "translated" to executable form (that's understood by browsers), and located in priv/. priv/static is exposed publicly, and this will be the content available by:
<script src="<%= static_path(#conn, "/js/app.js") %>"></script>
To wrap up.
Code in priv/static is not meant to be changed by code, it gets there automatically by changes you put under your source control in assets/.
If that's any help, you can take a look at one of old blog posts about assets in Phoenix here.
Good luck!
I have been happy using webpack with Vue as of now. It uses a similar, configurable, watcher as the one mentioned by mudasobwa. In Webpack if you touch a file that is in part of the bundle it will recompile the needed files only (which can still be many depending on the dependency graph), probably brunch recompiles all.
I also use Yarn to manage npm, and I always include vuex unless it's really something just basic (although not related to file organisation it does help a lot organising vue on any non-trivial apps). Then
/assets
js
entry point files that I use for webpack output into its own individual bundles/apps
folders to organise these, usually /components-views-related, /store-related, /shared-utilities
css
.scss files, divided so that they can be split into "global" styles and individual styles that then are required in each "entry point". Then I use a "general" scss stylesheet on "all pages" and each page the corresponding css bundle where they're needed.
Then on the templates side, I wrote a small, overly complex, brittle, system to just automate the "bundle" that gets loaded on the template (in the html document head) but you can just load each bundle/s where you need them.
I am trying to integrate Sonarqube analysis into the JavaScript sources of my project. It is a project using Spring components for the back-end, and as a first step, we did the integration of Java sources, without problem at that point.
We are using Sonarqube v5.6.3
The problem I am finding comes with the sonar.exclusions property. Apparently, that property can't exclude a folder that has already been added as sources (see question and answer explaining that exact issue).
I have the following lines in my pom.xml, which are not working properly; and that's understandable according to the aforelinked question:
<sonar.sources>src/main/java,src/main/docker,js-sources</sonar.sources>
<sonar.tests>src/test</sonar.tests>
<sonar.exclusions>**/target/*</sonar.exclusions>
The problem is: the front-end is made of several modules which are compiled one by one under their own /target sub-folder before being deployed all together into src/main/webapp. (They work as regular target folders: when a new compilation is launched, those folders get deleted/recreated.)
Those js-sources/moduleA/target, js-sources/moduleB/target, js-sources/moduleC/target folders are being automatically included as sources, and thus ignored by the exclusions directive. Those target folder still contain a /src subfolder, which makes it hard to use the limited Sonar patterns (full xpath-like selectors are not allowed) to include or exclude only certain paths.
As I don't think that the Sonarqube team was expecting everyone to add each little subfolder one by one (that's why they made patterns in the first term), I am looking for help: How do I exclude those per-module target folders living down the folder-tree inside my sources?
Another possibility would be that it is kind of a bug forcing us to store this config at a Jenkinsfile or even directly in the Jenkins config (at a job level), but I remain unsure and still think that something can be fixed in the way I am declaring the sources and exclusions.
Try
<sonar.exclusions>**/target/**/*</sonar.exclusions>
EDIT : while inclusions are useful in other cases, the accepted answer above is the correct one. I'm leaving mine, which follows, for the record and just as an example of using inclusions.
Try using inclusions rather than exclusions, I've setup a project as close to yours as I could guess from your description and I was able to ignore the target folders of the js-sources modules :
<properties>
<sonar.sources>src/main/java,js-sources</sonar.sources>
<sonar.inclusions>**/*.java, **/src/**/*.js</sonar.inclusions>
</properties>
You can read this as : 'scan all java files no matter where they are, scan only the javascript files that are found within the src of a subfolder of root'
Recently I added conf/ApplicationResources.groovy (using resources plugin) file to my project structure. Here I keep my modules definitions for javascript and css libraries. Before, I was importing libraries with classic g:javascript tag.
Now every time when javascript code changes (while server is running) I get client side js error saying
"Uncaught SyntaxError: Unexpected end of input".
So for each javascript change application needs to be redeployed, what I dont want.
I have also declared .js files to be excluded from resources plugin pattern, but the problem remains. Any advice/help will be appreciated.
Solution from Sérgio Michels that worked:
Add to Config.groovy: "grails.resources.debug = true;"
To avoid cache issues with the Resources plugin, in all my projects I'm using the config grails.resources.debug = true in Config.groovy.
You still use <r:require modules=""/> in your GSP, but in development mode the source will show all files included instead of merging them.