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).
Related
I'm working with a Rails application, using Webpacker to bundle assets. I'm using a particular library I've installed via yarn whose code needs to be transpiled in my project. I'm trying to do this by modifying the paths that are ignored by Webpack/babel-loader within my config/webpack/environment.js file.
const { environment } = require('#rails/webpacker');
// Ignore all node_modules packages EXCEPT `a-random-third-party-package`:
babelLoader.exclude = /node_modules\/(?!(a-random-third-party-package))/;
module.exports = environment;
This is NOT working, though. For example, the JavaScript classes and static properties that exist in the third party package aren't transpiled at all in my bundle. But when I copy that same code into my own JS files, it's transpiled as expected.
How can I get this package to transpile like I want?
Solved! I had been using yarn link to work with this package separately and test it within this Rails application. For whatever reason, this was interfering with the build step, preventing it from being properly transpiled.
If you run into this yourself, verify that none of your dependencies are yarn link-ed, and if they are, run yarn unlink so you can locally test Webpacker without issues.
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 appreciate this is not a real problem, just curious...
I'm using bower version 1.7.2 and all my projects so far have a .bowerrc file in the main project folder.
On my current project (through an oversight with .gitignore) I lost the .bowerrc file. However bower still works just fine and everything gets created where I want it.
I've read the docs on the Bower site and there is nothing to suggest that it will work without the .bowerrc file, and plenty on stackoverflow suggests that I need the .bowerrc file - ALSO - there isn't a .bowerrc file in the file tree between the project folder and root (although there are plenty around in folders that have different paths)
My question then is: does bower work ok without a .bowerrc file (e.g. defaulting to directory:bower_components) ? or is there a way to see which .bowerrc file my bower is using?
Many thanks for any reply, although completely understandable if you read this and move on, like I said, my problem is that it works, and I don't think it should...
As the docs specify, the .bowerrc file can be either in the project dir, the user home (i.e ~/.bowerrc - depends on your OS) or the root dir.
If you didn't put it anywhere Bower uses defaults as specified here.
And to answer your question - the default directory for bower packages is bower_components
Yes , I tested in my project with out .bowerrc I am able to install packages with bower.If we don't specify the .bowerrc file bower_components directory is creating in the root directly which is default. If we want "bower_components" to be in specific location that should be specified in the .bowerrc file.
For example if we want bower_components folder in "app" folder
bowerrc file should specify directory location : "directory": "app/bower_components",
But while downloading packages from git ,if you computer has any proxy settings that need to be configured in .bowerrc file. If we don't specify the proxy settings in .bowerrc we wont be able to download packages form git.
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.
I would like to use the SlickGrid plugin in my Rails 3 application.
I contains several JS and CSS files that I should include in my HTML page.
It is possible to put all the needed JS files in the public/javascripts directory and all the CSS files in the public/stylesheets directory. However, I don't like this solution because it breaks the plugin package files structure.
I would like to put all the plugin files in one place (I thought about vendor/plugins, is it a better place?), and include the needed files from there. Is that possible ?
What is the proper way to include the JS and CSS files when integrating a plugin ?
I think Jammit can help you accomplish what you're trying to do. Besides packaging, embedding, gzipping your assets, it also allows you to store javascript and stylesheets anywhere in your app. Images (if not embedded) could be a problem though.
Answer by #rubiii is also good, but since sprockets gem from version 2.10.0 supports bower, now it is extremely easy to integrate any js/css libraries. Also version management and updating as easy as typing bower install. Bower can be installed through nodejs npm install -g bower, include .bowerrc file in root of application with content inside:
{
"directory": "vendor/assets/components"
}
Then specify libraries in bower.json and run bower install
{
"name": "appName",
"version": "0.0.0",
"dependencies": {
"bootstrap": "~3.0.0",
}
}
After components installed, require files in application.js/application.css as usually. e.g.
*= require bootstrap