I have a problem, my bundle command doesn't include my javascript UI,
My code is below:
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include("~/Scripts/jquery-ui-{version}.js"));
I have the "jquery-ui-1.10.2.min.js" file in the script directory, however, in my browser it is not included.
Why is it, according to you ?
If have 2 files with different versions, how will the bundle will know which version to use?
Minified files .min.js are excluded by default.
You can either rename your file to jquery-ui-1.10.2-min.js or change the exclusions.
Check this answer here
Related
In order to access to the benefits of the pro package, adding font-awesome 5 from the gem is not possible.
Tried diferent ways to add the files provided to the project. Following Official guide
Package content:
I saw in other stackoverflow posts, that the correct way to add it to the app is in
vendor/assets/
But after that, puting /on-server/'s css, js, and font or the /web-fonts-with-css/ files still didn't work.
Tried adding custom stylesheet link, require and import in scss. No way to achieve it.
Hope I've been clear.
Using the 'Web Fonts with CSS' approach has a wrinkle because the font url is hardcoded into the CSS file, but it can be done.
CSS:
Copy the fontawesome-all.css to the 'vendor/assets/stylesheets' folder.
Update your app/assets/stylesheets/application.css file with
*= require fontawesome-all
Fonts:
Then copy the webfonts folder to the public dir so all the fonts are in the public/webfonts folder.
Restart your server and you should now be able to see your FA5 fonts.
SVG with JS
If you want to make it even easier (only 1 file to track) then you can do the 'SVG with JS' approach.
JS:
Copy the fontawesome-all.js to the 'vendor/assets/javascripts' folder.
Update your app/assets/stylesheets/application.js file with
//= require fontawesome-all
Restart your server and you are good to go.
If you are using rails which supports Node Modules.
Add Configuration
npm config set "#fortawesome:registry" https://npm.fontawesome.com/ && \
npm config set "//npm.fontawesome.com/:_authToken" YOUR_AUTH_TOKEN
OR
Save configuration in file .npmrc in app root folder as below
#fortawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=YOUR_AUTH_TOKEN
Run NPM or YARN to install the package
npm install --save #fortawesome/fontawesome-pro
OR
yarn add #fortawesome/fontawesome-pro
Add the packages in app/assets/application.js file
//= require #fortawesome/fontawesome-pro/js/all.min.js
Include Node Modules folder in assets path by adding below line in config/application.rb
config.assets.paths << Rails.root.join('node_modules')
Start the server again and you are good to go with font-awesome PRO.
For more details you can visit the below link:
https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers
There is also a way to use raw svg without any js and thus avoiding rendering issues and nasty hacks that lead to annoying flickering side effects
It comes in the form of a view helper called faw_icon https://github.com/alexwebgr/faw_icon and it provides three ways to load svg into your application
using the icons.json from the metadata
using the raw single svg files
using the svg sprites
by design it doesn't bundle any icons catering for a small download size and giving the developers the ability to update the icon sets as new ones become available, use custom ones or the PRO collection
I am adding to my jhipster project a new dependency "tether-shepherd", and below was my steps:
bower install tether-shepherd --save
the dependency was successfully installed & added to 'bower.json', then to add it to 'index.html' I ran below command
gulp inject
the js files was successfully added to index.html but without any .css theme files, when I dig into installed bower components for installed dependency I found all themes there in 'bower_components/tether-shepherd/dist/css/' directory but not included to index.html file, to add it I manually placed its include below loading-bar.css in section but it is automatically removed when I re-run gulp inject!, and when I add it manually outside any block this was not good for production profile
any professional way to include and bundle css files located in bower_components?
This is probably because these CSS are not referenced in the main property of your dependencie's bower.json like here, see gulp/inject.js in your project to understand how they are used.
So, either you add an overrides.main property for these dependencies in your JHipster app's bower.json to add them like JHipster does for Bootstrap or you manage them manually and copy them to src/main/webapp/content/css, (you may have to add #import to your main.css I didn't test).
I use Bower to manage dependencies in the form of Sass and JavaScript libraries. In almost all cases I reference these libraries directly from my Sass, CoffeeScript and JavaScript.
My build process concatenates and compresses the resultant assets. These combined stylesheets and JavaScripts also have sourcemaps. With the Bower-managed libraries coming straight from the bower_components directory, the sourcemaps create a dependency on having the bower_components directory publicly available.
When considering Bower alone, it's obvious that bower_components should be ignored by version control and referenced directly, but when adding the sourcemap aspect it starts to get a little blurry for me.
On the particular project I'm working on now I check compiled assets into version control to avoid having to compile them on Heroku. This might even try to force me to check the whole bower_components directory in. Yuck.
Thanks in advance if anyone has advice.
I have installed into a new project in codekit the following components:
jquery
animate.css
normalize
Modernizer
I understand that keeping these components in the bower directory is recommended so these files are easily updated. However, do we link to these in our html files directly? My sass files get compiled and outputted to assets/css but there aren't any sass files in the bower components and creating them in the original folder would, I assume, get overridden if I was to upgrade. Seems very odd to me to upload the entire bower_components file to the production server with all the dependent files. I have been building site for a long time without all this node, git, grunt, bower, et al stuff. I see the value in it, but I'm having a tough time getting up to speed. Any help sure would be appreciated.
In most cases, you would want to include the third-party components (e.g. css, javascript, ... files) within your own master css or javascript file and then minimize that file for production. For example, my folder structure looks like:
bower_components/
...
release/
css/
styles.min.css
img/
...
js/
scripts.min.js
src/
images/
...
scripts/
scripts.js
styles/
styles.less
templates/
...
And then, within styles.less, I might have:
#import (less) "../../bower_components/normalize-css/normalize.css";
Or within scripts.js I could have:
//#codekit-prepend "../../bower_components/jquery/dist/jquery.js"
I have CodeKit set to generate the minified versions in release/ from those files. The only files that go to production are all of the files in the release/ folder.
When someone installs this plugin, I would like a file to be copied into the config/initializers directory of the app. I could do this in install.rb by copying a template file that resides somewhere in the plugin. Another option would be to require the user to run a generator after install. I know rspec-rails makes you run a generator after you install it, is that the recommended behavior?
And is there anything wrong with copying files into the application in install.rb?
Thanks!
Lou
Does the user need to manually tweak the file? If so, then I would use a generator with parameters. If not, I would prefer that you do it with install.rb. My $.02