Trying to connect a template in my application I have move all the files from the /assets to vendor/assets of my application and wrote in application.rb
config.assets.paths << Rails.root.join("template_folder")
but all the css&js worked only to the index page specified in the routes.rb
root to: "pages#index"
When I opening pages/index or pages/contact css & js don't work. how can I make them work with others controllers in my application?
You will have to mention the added files into application.css and application.js . Any new files added will have to mentioned in the application file , and also you will have to precompile the assets using rake:assets precompile if you are using assets .
Related
Hi My I am using the Rails 5.2.1
ruby 2.4.0
I have style.scss and style.css both files present in the rails project.
The application is working fine on the Development environment.
But in the production on Nginx server after precompiling the assets by
rake assets: precompile
The application view is distorted and browsers is giving 404 style.css not found error.
please update how to manage this kind of situation in assets when both .css and scss both are preset, or should I paste the content of style.css file in end of the style.scss file.
I am using the Play! Framework ( 2.6.2 ), Scala ( 2.12.2 ) and trying to integrate LESS into it.
I was using this tutorial on their documentation website.
In my build.sbt file this is the code in place:
lazy val root = (project in file(".")).enablePlugins(PlayJava, PlayEbean, SbtWeb)
includeFilter in (Assets, LessKeys.less) := "*.less"
excludeFilter in (Assets, LessKeys.less) := "_*.less"
LessKeys.compress in Assets := true
And in my plugin.sbt file I've added:
addSbtPlugin("com.typesafe.sbt" % "sbt-less" % "1.1.2")
I've got 2 files with .less extention. main.less and login.less in a /css folder under /public directory.
When I compile and run the project in my target folder the files stay as .less files and don't get compiled into .css files.
In my HTML template code I have this line:
<link rel="stylesheet" media="screen" href="#routes.Assets.versioned("css/login.css")">
The link to the stylesheet works if I change the extention from login.less to login.css but the variables don't seem to be accessible in the login.less file.
The link to the stylesheet doesn't work with the .css extention as expected because the framework doesn't seem to be compiling the files to .css, it just seems to leave them as .less files. Therefore I'm just getting a 404 on the .css file. If i change the extention in the link to .less it then works fine but variables I've imported from main.less to login.less don't work.
Is there a step I'm missing? Can somebody explain why the framework would not compile the .less files to .css files in my target folder?
EDIT 1: After trying the fix suggested by #marcospereira: I think the application is trying to compile both files but also returns me an error and application doesn't run at all.
[info] LESS compiling on 2 source(s)
-------
Unexpected exception
JsTaskFailure: java.lang.NoSuchMethodError: org.mozilla.javascript.ScriptRuntime.setObjectProp(Ljava/lang/Object;Ljava/lang/String;Ljava/lang/Object;Lorg/mozilla/javascript/Context;Lorg/mozilla/javascript/Scriptable;)Ljava/lang/Object;
at io.apigee.trireme.node10.main.trireme._c_anonymous_1(trireme.js:37)
at io.apigee.trireme.node10.main.trireme.call(trireme.js)
at org.mozilla.javascript.ContextFactory.doTopCall(ContextFactory.java:394)
at org.mozilla.javascript.ScriptRuntime.doTopCall(ScriptRuntime.java:3102)
at io.apigee.trireme.node10.main.trireme.call(trireme.js)
at io.apigee.trireme.core.internal.ScriptRunner.runScript(ScriptRunner.java:762)
at io.apigee.trireme.core.internal.ScriptRunner$4.run(ScriptRunner.java:702)
at org.mozilla.javascript.Context.call(Context.java:488)
at org.mozilla.javascript.ContextFactory.call(ContextFactory.java:504)
at io.apigee.trireme.core.internal.ScriptRunner.call(ScriptRunner.java:697)
at io.apigee.trireme.core.ScriptFuture.run(ScriptFuture.java:183)
at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1149)
at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:624)
at java.lang.Thread.run(Thread.java:748)
-------
You need to install node.js on your machine.
If you do not have node.js installed then it will fall back to the Trireme Java-based JavaScript engine, which does not work very well and is resulting in that error
Managed assets needs to be inside app/assets. From the docs:
Compilable assets in Play must be defined in the app/assets directory. They are handled by the build process, and LESS sources are compiled into standard CSS files. The generated CSS files are distributed as standard resources into the same public/ folder as the unmanaged assets, meaning that there is no difference in the way you use them once compiled.
So, you need to move your files from public/css to app/assets/css.
I have an external css, javascript and Images files in a separate project and wanted to include in my new rails project. Here is my structure of folders:
external-assets/js/ <Files>
external-assets/js/plugin/<Files>
external-assets/css/<Files>
external-assets/css/plugins/<Files>
external-assets/images/<some Folders>/<Files>
external-assets/images/<Files>
So, I copied external-assets/js folder to app/assets/javascript and for css I copied external-assets/css to app/assets/stylesheets.
and replace <link rel="icon" href="external-assets/css/plugins/bootstrap.min.css"> to <%= stylesheet_link_tag "/plugins/bootstrap.min.css" %> in my html.erb file. I followed the same thing for other css files and js files. When I start the server I got this error:
Asset filtered out and will not be served: add `Rails.application.config.assets.precompile += %w( style.css )` to `config/initializers/assets.rb` and restart your server
After searching on SO post like: Asset filtered out and will not be served: add `config.assets.precompile and
Asset filtered out and will not be served. I need to mention my all js and css files to config.assets.precompile.
Questions
1) Do I really need to mention all of js, css and images file? I know the reason but I do have a lot of assets files.
2) What about If I put them in public folder? Is it good approach?
3) There is stylesheet_link_tag for css , javascript_link_tag for js. What about Images?
Do I really need to mention all of js, css and images file? I know the reason but I do have a lot of assets files.
No.
Sprockets has the require directives which concatenate any files you "require" into your application file...
#app/assets/javascripts/application.js
//= require x
What you want? Probably not... but it at least gives you the ability to call one file (application), whilst benefitting from the content of all the others.
2) What about If I put them in public folder? Is it good approach?
No.
Precompiling assets puts the minified versions into public/assets anyway.
3) There is stylesheet_link_tag for css , javascript_link_tag for js. What about Images?
image_tag
Assets
I think you're getting confused about the role of "external" assets.
If an asset is truly external (such as Google's JQuery repo), you'll be able to reference them by using the javascript_include_tag or stylesheet_link_tag respectively:
<%= javascript_include_tag "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" %>
This will basically add the following to your layout at runtime:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
If this is what you want, you'll be best adding the external repos calls to your #app/views/layouts/application file (as above).
-
Rails Assets
However....
They're obviously not "external" assets if you have them stored locally.
So you're either going to have to call them from their real external repositories, or use them locally in your app.
If you're happy using them locally (which carries the responsibility of keeping them updated), you may wish to look at Rails Assets:
This is a gem repository (you have to add source https://rails-assets.org to your Gemfil), which allows bundler to ping their server for asset-based gems.
It is meant to work like Bower - taking any of the public repos and converting them into gems. It allows you to call external repos into your app:
#Gemfile
gem "rails-assets-jquery.easing"
#app/assets/javascripts/application.js
//= require jquery.easing
This will basically store a local version of the JS / CSS you wish to use in your asset pipeline, allowing you to include it with the sprockets require directive.
The big difference is that since these assets are downloaded through the gem system, they will be updated each time you run bundler.
We use it, and although it can be a little tricky sometimes, it's well worth it.
Either put it all into the public directory, and then use the html <script>, <link>, ≤img> tags to reference the assets. You will lose some Sprockets features like minification and digesting, but that's not a big deal.
Mention all the assets in the application.css / application.js, or create a new manifest file, e.g. custom.css / custom.js, list the assets to use here and then add those two files into the:
Rails.application.config.assets.precompile += %w( custom.css custom.js )
Do you have require _ tree in your application.js & application.css?
If not, just add it to both files and restart your server.
The require_tree directive tells Sprockets to recursively include all JavaScript files in the specified directory into the output. These paths must be specified relative to the manifest file. You can also use the require_directory directive which includes all JavaScript files only in the directory specified, without recursion.
Check out this guide
Hope it helps. :)
Situation
Use bower In .bowerrc
In bowerrc set directory vendor/assets/bower_components
In config application.rb I typed config.assets.paths << Rails.root.join('vendor', 'assets', 'bower_components')
Install gallery plugin called «fotorama», do it by bower
All files of plugin «fotorama» now storage in this directory "/vendor/assets/bower_components/fotorama"
In manifest css file application.css I type *= require fotorama/fotorama.css
In layout file I typed <%= stylesheet_link_tag "application" %>
Starting server rails server — everything is ok. In source of generated page I see <link href="/assets/fotorama/fotorama.css?body=1" rel="stylesheet" />. This css file has this line .fotorama__video-play {background: url(fotorama.png) no-repeat}, and many other lines where uses url for file "fotorama.png", and it is ok, browser try to find this png file near the css file, and successfully do it.
Stop server, precompile all essets rake assets:precompile, and then run server in production environment rails server -e production
Problem
In production, all my css files concatenated, and in source of page it looks like this <link href="/assets/application-2d31fc33890d01b046194920367eb3d4.css" rel="stylesheet" />, and still this file has this line .fotorama__video-play {background: url(fotorama.png) no-repeat}. Now browser trying to find png file here http://localhost:3000/assets/fotorama.png, but it isn't here, it isn't anywhere, because, I don't know why, there is no "fotorama.png" in "public/assets" folder.
Questions
Why pictures didn't transport from "/vendor/assets/bower_components" to "public/assets"
Have you got an idea, what can I do to solve my problem? Important, that I don't want to change urls in css manually, programatically — ok.
Excuse me for my english, and thanks for everybody who going to help me.
Solution and answers
Only files from "app/assets" transports to "public/assets" by default. To transport images from "/vendor/assets" type in "application.rb" this code config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif)
Task for gulp: if you see some changes in "bower.json", take all main files of bower components by npm moudle called "main-bower-files". Generate a manifest file with each css file with .erb extension, and save it "app/assets/stylesheets/bower_components_manifest.css"
This task continue: in every main css files, by npm module called "gulp-css-url-adjuster", add before every url <%= asset_path ' plus path to directory, and after ' %>. url("fotorama.png") >> url("<%= asset_path 'fotorama/fotorama.png' %>"). Add .erb extension and save.
In "app/assets/stylesheets/application.css" I add * require bower_components_manifest.
One of the other solutions, use gem "bower-rails". But I don't like it, because in some plugins in bower I need override some "main" files, and gem "bower-rails" can't do this, npm "main-bower-files" can. And I like to save my workflow for everything what I have done before start include my code to rails, gulp, bower.
I'd like to change the name of the file of application.css but this yields the following error:
Asset filtered out and will not be served
I'm assuming this is because somewhere in the config files, rails is told to precompile application.css, and when I change its name, the config file still looks for application.css. can someone explain to me how I would go about doing this?
I ask because I would like to learn how to create my own manifest files for different controllers.
Have you tried include your new .css file to the list: config.assets.precompile += %w( newname.css ) in 'config/environtment/production.rb'?
The joke is in that you probably on the last rails 4 version. The rails team included sprockets_better_errors gem into out of the box functionality, so it checks 'precompilability' of assets even in development mode. Prior to that, you would not see any error, until deployment to the production
Hope it helps