(Been looking for this for ages over internet...).
Been working with very old npm packages recently and seems that they cannot be loaded properly within Rails-6 (I know I could create a question by each cases, but I'd like to learn to handle this myself since every time it is for a different reason).
I'd like (as for debugs and in development mode only) to display the list of available all assets, including js, css, images, and anything else available at public level (the client could load). So it should be a set of compiled assets ?
Similarly to http://localhost:3000/rails/mailers like http://localhost:3000/rails/assets ?
Displaying the list of all available assets (prior compilation, also for debug intents) could also be great.
This might do what you want:
Rails.application.assets.each_file do | pathname |
# ...
end
This will enumerate every file of which Sprockets is aware. You can run that at rails c or build a simple controller to dump the list into a view if you prefer. For more information, see https://stackoverflow.com/a/11005361.
If you're not using Sprockets (e.g. a newer Webpacker-based application) then, obviously, you'll need a different solution.
You can run rails assets:reveal and see all the available assets:
$ rails assets:reveal
application.js
application.js.map
application.css
application.scss
...
To view the full path, use rails assets:reveal:full:
$ rails assets:reveal:full
/home/{REDACTED}/app/assets/builds/application.js
/home/{REDACTED}/app/assets/builds/application.js.map
/home/{REDACTED}/app/assets/builds/application.css
/home/{REDACTED}/app/assets/stylesheets/application.scss
...
Related
Upon running rails g graphql:install, a set of useful base type files are created in /app/graphql/types for us to extend when defining our own types. When running any of the generators, it creates these files in the same folder also. I set about creating sub directories thinking I could add some sense to this giant catch-all directory, but couldn't get things to load properly.
Since there is a base file for each type (base_enum.rb, base_object.rb, etc.), I created a folder for extensions of each of these types (enum_types, object_types, etc.). This broke auto loading though and I had to explicitly import these files to be able to use these custom types. So, at the top of query_type.rb, mutation_type.rb and app/graphql/mutations/base_mutation.rb I added the following:
['enum_typs', 'input_object_types', 'interface_types', 'object_types', 'scalar_types', 'union_types'].each do |dir|
Dir[File.dirname(__FILE__) + "/#{dir}/*.rb"].each {|file| require file }
end
This allowed things to run, but any change would break auto loading so I would have to restart the server on each change. I started reading through this article about auto loading on the rails site, but it was quite honestly a little over my head. Though it led me to believe I had to either find the correct names for my folders or namespace the objects defined in my type definition files properly to be able to do this.
Is there a sane way to organize these files in sub-directories which doesn't break auto loading? Do most projects just have a flat folder structure for these files?
Thank you!
I have renamed app.js to app.coffee (as well as translated the contents), but now when I compile I get this error:
Running "validate-imports:tests" (validate-imports) task
>> client/tests/helpers/start-app: Cannot find module "client/app"
This error goes away when I translate the file back to javascript.
I have added the grunt-contrib-coffee and confirmed it works correctly, the problem I believe is that the coffee-script compilation happens after the validate-imports task which looks for .js files in the app folder. Does this need to be tweaked to look in the tmp/javascripts folder where the coffee-script gets compiled to?
Here is the task in question:
// Scripts
grunt.registerTask('buildScripts', filterAvailable([
'jshint:app',
'jshint:tests',
'validate-imports:app',
'validate-imports:tests',
'coffee',
'emberscript',
'copy:javascriptToTmp',
'transpile',
'concat_sourcemap'
]));
Anyone know of this bug?
I found an answer here. Thus, when I tried it, I renamed start-app.js to start-app.coffee, converted the code into coffescript and now it works without that error.
Bryan
One approach to this would be to add this line to your testem.json file:
"before_tests": "coffee -c tests/**/*.coffee"
This should compile the .coffee files within your /tests directory before test execution, meaning they will compile down to their .js equivalent before they are run. While you could technically change the EAK boilerplate from .js to .coffee with a similar trick, it might be better just to write your tests in .coffee, while leaving the default .js testing harness to maintain compatibility with EAK.
You can also remove these files when the test run is over, as shown within the tapas-with-ember testem.json file.
Are we supposed to use something else aside from image-url and others in Rails 4? They return different values that don't seem to make sense. If I have logo.png in /app/assets/images/logo.png and I do the following, this is what I get:
image-url("logo.png") -> url("/images/logo.png") #obviously doesn't work
image-path("logo.png") -> "/images/logo.png"
asset-url("logo.png") -> url("/logo.png")
Of course none of these work because they need at least /assets in front.
UPDATE: Actually, I just noticed, how do I access images in Rails 4? I have an image at /app/assets/images/logo.png. But if I go to any of the following URLs, I still don't see my image:
http://localhost:3000/assets/logo.png
http://localhost:3000/assets/images/logo.png
http://localhost:3000/logo.png
http://localhost:3000/images/logo.png
UPDATE 2: The only way I can bring up my logo.png is by moving it into the /app/assets/stylesheets directory and then pulling up:
http://localhost:3000/assets/logo.png
I just had this issue myself.
3 points that will hopefully help:
If you place images in your app/assets/images directory, then you should be able to call the image directly with no prefix in the path. ie. image_url('logo.png')
Depending on where you use the asset will depend on the method. If you are using it as a background-image: property, then your line of code should be background-image: image-url('logo.png'). This works for both less and sass stylesheets. If you are using it inline in the view, then you will need to use the built in image_tag helper in rails to output your image. Once again, no prefixing <%= image_tag 'logo.png' %>
Lastly, if you are precompiling your assets, run rake assets:precompile to generate your assets, or rake assets:precompile RAILS_ENV=production for production, otherwise, your production environment will not have the fingerprinted assets when loading the page.
Also for those commands in point 3 you will need to prefix them with bundle exec if you are running bundler.
Your first formulation, image_url('logo.png'), is correct. If the image is found, it will generate the path /assets/logo.png (plus a hash in production). However, if Rails cannot find the image that you named, it will fall back to /images/logo.png.
The next question is: why isn't Rails finding your image? If you put it in app/assets/images/logo.png, then you should be able to access it by going to http://localhost:3000/assets/logo.png.
If that works, but your CSS isn't updating, you may need to clear the cache. Delete tmp/cache/assets from your project directory and restart the server (webrick, etc.).
If that fails, you can also try just using background-image: url(logo.png); That will cause your CSS to look for files with the same relative path (which in this case is /assets).
I just found out, that by using asset_url helper you solve that problem.
asset_url("backgrounds/pattern.png", image)
I had a similar problem, trying to add a background image with inline css. No need to specify the images folder due to the way asset sync works.
This worked for me:
background-image: url('/assets/image.jpg');
Rails 4.0.0 will look image defined with image-url in same directory structure with your css file.
For example, if your css in assets/stylesheets/main.css.scss, image-url('logo.png') becomes url(/assets/logo.png).
If you move your css file to assets/stylesheets/cpanel/main.css.scss, image-url('logo.png') becomes /assets/cpanel/logo.png.
If you want to use image directly under assets/images directory, you can use asset-url('logo.png')
for stylesheets:
url(asset_path('image.jpg'))
In case anyone arrives looking for how to generate a relative path from the rails console
ActionView::Helpers::AssetTagHelper
image_path('my_image.png')
=> "/images/my_image.png"
Or the controller
include ActionView::Helpers::AssetTagHelper
image_path('my_image.png')
=> "/images/my_image.png"
I want to make use of the new json fixtures ability of jasmine-jquery, but can't get it to work. I have a Rails 3.2 app with evergreen for JS testing. As the readme of https://github.com/velesin/jasmine-jquery said, putting the jasmine-jquery.js inside the spec/javascripts/helpers dir would load jasmine-jquery automatically.
I put jasmine-jquery (and other libraries like jasmine-ajax) into
spec/javascripts/helpers dir (so they are automatically loaded) and
fixtures into spec/javascripts/fixtures dir.
But it doesn't. I tried to load the file inside the spec_helper.js, but the require only points to the public dir.
I also found this answer: https://groups.google.com/forum/?fromgroups=#!topic/ruby-evergreen/0Tma5RKqZB8
But the solutions aren't working in my case.
So, where can I tell evergreen / jasmine to load the jasmine-jquery.js file, so that I can use the loadFixtures methods...?
I have these a coffeescript file for a model entree that just instanciates a class in another coffeescript file:
jQuery(document).ready ->
ch = new CepageHandling
ch.handleKeyPress()
The handlePress function captures keyup events on a control.
I have another model vin where I want to enable the same feature. I'm surprised to see I don't need to do anything (it already has the same html), it's already working, even though the coffeescript for the vin model is completely empty. I assume that the created javascript for entree gets called even when I'm not on this page.
I have seen the same behavior with scss files, where style defined for one model gets applied to others if the descriptors match. Can someone explain (or point to some article) if this is normal behavior that assets are not isolated in rails? I really have a hard time grasping how it works.
The default manifest files (application.js, etc) do require_tree . which will load all files on all pages, concat them all together in production, etc. If you want things to be isolated you'll need to put a test in your ready handler to skip this code in some cases, or you'll need more manifests (and not use application.js for example) to silo your code per page. I suggest you read every word of the asset pipeline Rails Guide very carefully... required reading!
It happens because of the manifest file application.js, more precisely in this line of code:
//= require_tree .
What this means is that all .js files contained inside the /assets/javascripts/ folder would be loaded to your views.
As your entree.js is already loaded and using the JQuery document ready function, it searches for the rules of your file inside all of your views.
This means that all of your pages that contains this ch element will get the same behavior.