I'm following Thinkster's tutorial about Angular on Rails(https://thinkster.io/angular-rails#jumping-in-with-angular).
In this tutorial, I install front-end dependencies following way:
bower install angular angular-ui-router bootstrap --save
Then I require bootstrap in application.css in following way:
*= require bootstrap/dist/css/bootstrap
*= require_tree .
*= require_self
And here is application.js file:
//= require angular
//= require angular-rails-templates
//= require angular-ui-router
//= require_tree .
When I run the rails server I get following errors,
1. couldn't find file 'bootstrap/dist/css/bootstrap' with type 'text/css'
2. couldn't find file 'angular' with type 'application/javascript'
Here is .bowerrc file:
{
"directory":"vendor/assets/bower_components"
}
Here is an error I'm getting from rails server console:
ActionView::Template::Error (couldn't find file 'bootstrap/dist/css/bootstrap' with type 'text/css'):
2: <html>
3: <head>
4: <title>FlapperNews</title>
5: <%= stylesheet_link_tag 'application', media: 'all' %>
6: <%= javascript_include_tag 'application' %>
7: <%= csrf_meta_tags %>
8: </head>
app/assets/stylesheets/application.css:14
app/views/layouts/application.html.erb:5:in `_app_views_layouts_application_html_erb___1398966333390810206_70171728569860'
I confirm that bootstrap and angular are correctly installed in Rails app.
But it seems like it is not finding it in the app. What could be the problem?
Maybe you want to use bower-rails (https://github.com/rharriso/bower-rails) which can help you to manage your front-end dependencies in a Rails app. You can then add your dependencies to your Bowerfile and rake bower:install which will install your dependencies to /vendor/assets/bower_components, so now you can require them on your application.css or application.js files.
I think that having a bower_components folder in the root path of your Rails app is not the way to go, since its contents won't be visible to the Asset Pipeline (more info. here: http://guides.rubyonrails.org/asset_pipeline.html)
Use
config.assets.paths << Rails.root.join('vendor', 'assets', 'components')
in the app.config.
Make sure the .bowerrc is set up as well with this
{
"directory": "vendor/assets/components"
}
Ran into this issue as well.
Related
I've just upgraded my Rails 6 app to Rails 7, and now my Javascript and ActionCable aren't working.
After a bit of googling, I now know that this is because my app is set up to use sprockets with the asset pipeline, not webpacker or import maps.
How can I upgrade my app to work with Rails 7? Is it possible to continue using sprockets and jquery-ujs? I couldn't find much online to help me with this so I'm hoping someone on here knows what to do.
app/assets/javascripts/application.js:
//= require jquery
//= require jquery_ujs
//= require activestorage
//= require cloudinary/jquery.cloudinary
//= require_tree .
//= require cable
//= require local-time
//= require serviceworker-companion
//= require cookies_eu
//= require gmaps/google
import "stylesheets/application";
//javascript functions below here
This is the directory layout:
below are steps that I did to upgrade rails 6 to 7 apps.
I'm using sprocket and combined with new rails 7 Hotwire
1. install importmap and hotwire
as noted from DHH, rails 7 replacing Webpacker, Turbolinks, UJS with import maps plus Turbo and Stimulus from Hotwire as the defaults.
you can learn from https://hotwired.dev/ to get more information.
since my application using Sprockets, here is the steps that I use
2. install importmap
since importmap and hotwire-rails gem already installed from previous step, I just need to install it
run rails importmap:install
3. install hotwire
run rails hotwire:install
4. Change turbolinks to turbo
since hotwire turbo replacing turbolinks below are steps that I did
open file app/assets/javascripts/application.js (since I use sprocket)
delete line //= require turbolinks
5. Using your text editor search inside app/views/
find turbolinks:load replace with turbo:load
save and close all
6. using your text editor search inside app/assets/javascripts/
find div data-turbolinks replace with div data-turbo
save and close all
7. Merge Sprocket with importmap
Change file name app/assets/javascripts/application.js to any name that fit with you, for me I change to application_pipeline.js
Reason to change: since new javascript folder also using application.js inside app/javascript/application.js
Create one manifest file app/assets/config/manifest.js
(if folder config not exist you can create manually)
below are the content for my settings
//= link_tree ../images
//= link_directory ../stylesheets .css
//= link_tree ../../javascript .js
//= link_tree ../../../vendor/javascript .js
//= link_tree ../javascripts .js
../images to call folder inside app/assets/images
../stylesheets .css to call .css file inside app/assets/stylesheets
../javascript .js to call .js file inside app/assets/javascript
../../javascript .js to call js files within app/javascript to this new folder created when we - install importmap-rails
../../../vendor/javascript to call js files within rails root/vendor folder
8. Setting for application.html.erb
open file app/views/layouts/application.html.erb and change
<head>
...
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= javascript_include_tag "turbo", type: "module-shim" %>
<%= javascript_include_tag "application_pipeline", "data-turbo-track" => true %>
<%= javascript_importmap_tags %>
</head>
9. Add precompiled list in production
open file file config/initializers/assets.rb
change and increase version number if you want to total precompile
Rails.application.config.assets.version = “3.3”
Here is the sample, you can increase to any number for example 3.4 or 4.0
# Be sure to restart your server when you modify this file.
Rails.application.config.assets.version = "3.3"
Rails.application.config.assets.precompile += %w( application_pipeline.js )
Rails.application.config.assets.precompile += %w( controllers/hello_controller.js )
Rails.application.config.assets.precompile += %w( controllers/index.js )
as you can see second line above I included application_pipeline.js inside this asset list
do precompile by running rails assets:precompile
I wrote complete article, based from my own experience upgrading rails 6 to 7 my applications and here is the link
Does anyone know if its possible to use the old sprocket pipeline setup in Rails 6? I've read somewhere that it's possible to use it instead of the new webpacker pipeline, but i can't find the source where i've read that.
Thanks in advance everyone!
Greetings!
Well this is how i did it
rails new app-name --skip-webpack-install --skip-javascript
--skip-webpack-install prevents the generator from running rails webpacker:install.
--skip-javascript drops the webpacker gem from the Gemfile.
now in rails 6 app/assets/javascripts doesn't exists so you will have to create it yourself
Then, create app/assets/javascripts/application.js and add the following lines to it
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
Next, open app/assets/config/manifest.js and add the following line in the end
//= link_directory ../javascripts .js
Finally, open your application layout (app/views/layouts/application.html.erb) remove the javascript_pack_tag and add the following line
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
I'm using
apache 2.2.15
passenger 5.1.2
rails 4.2.6
ruby 2.3.3
In the rails log, I get
(No route matches [GET] application-xxxxx.js
as well as
(No route matches [GET] application-xxxxx.css
I can find the assets in the public/assets directory.
My manifests:
app/assets/stylesheets/application.css.less:
/*
*= require jquery-ui
*= require font-awesome
*= require bootstrap_and_overrides
*= require awesome-bootstrap-checkbox
*= require lists
*= require mailgroups
*= require general
*= require colors
*= require print
*= require loader
*= require tooltips
*= require_self
*= require_tree .
*/
app/assets/javascripts/application.js
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require jquery-ui
//= require twitter/bootstrap
//= require bootstrap
//= require turbolinks
//= require twitter/bootstrap/rails/confirm
//= require_self
//= require_tree .
and I set (following other answers here on SO) in config/production.rb
config.serve_static_files = true
in app/views/layouts/application.html.erb
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => "reload" %>
<%= javascript_include_tag "application", "data-turbolinks-track" => "reload" %>
I'm lost, thanks for your help.
UPDATE: I don't use Capistrano, just deploying manually.
When running Rails.application.config.assets.paths in the rails console, I get the following:
=> ["/var/www/myappname/app/assets/fonts",
"/var/www/myappname/app/assets/images",
"/var/www/myappname/app/assets/javascripts",
"/var/www/myappname/app/assets/stylesheets",
"/var/www/myappname/vendor/assets/fonts",
"/var/www/myappname/vendor/assets/images",
"/var/www/myappname/vendor/assets/javascripts",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/twitter-bootstrap-rails-confirm-1.0.6/vendor/assets/javascripts",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/local_time-1.0.3/app/assets/javascripts",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/font-awesome-rails-4.7.0.1/app/assets/fonts",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/font-awesome-rails-4.7.0.1/app/assets/stylesheets",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/less-rails-fontawesome-0.5.1/vendor/assets/fonts",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/less-rails-fontawesome-0.5.1/vendor/assets/stylesheets",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/less-rails-bootstrap-3.3.5.0/app/assets/fonts",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/less-rails-bootstrap-3.3.5.0/app/assets/javascripts",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/less-rails-bootstrap-3.3.5.0/app/assets/stylesheets",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/twitter-bootstrap-rails-3.2.0/app/assets/fonts",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/twitter-bootstrap-rails-3.2.0/app/assets/images",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/twitter-bootstrap-rails-3.2.0/app/assets/javascripts",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/twitter-bootstrap-rails-3.2.0/app/assets/stylesheets",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/twitter-bootstrap-rails-3.2.0/vendor/assets/stylesheets",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/jquery-turbolinks-2.1.0/vendor/assets/javascripts",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/jquery-ui-rails-6.0.1/app/assets/images",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/jquery-ui-rails-6.0.1/app/assets/javascripts",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/jquery-ui-rails-6.0.1/app/assets/stylesheets",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/jquery-rails-4.2.2/vendor/assets/javascripts",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/coffee-rails-4.0.1/lib/assets/javascripts",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/turbolinks-source-5.0.0/lib/assets/javascripts",
#<Pathname:/var/www/myappname/app/assets/fonts>,
#<Pathname:/var/www/myappname/app/views>,
#<Pathname:/var/www/myappname/app/assets/stylesheets>,
#<Pathname:/var/www/myappname/app/assets/javascripts>]
my config/initializers/assets.rb already contains this:
Rails.application.config.assets.precompile += ['.svg', '*.eot', '*.woff', '*.woff2', '*.ttf', '*.otf', '*.js', '*.css']
this is my advise.
I add the following resources that may help in finding a solution.
https://launchschool.com/blog/rails-asset-pipeline-best-practices
https://railsapps.github.io/rails-javascript-include-external.html
https://reinteractive.com/posts/116-12-tips-for-the-rails-asset-pipeline
I read all the guides that can be found by searching rails asset pipeline, but I will not link them all
My advice is to check the fingerprint of the application.css and application.js both with the Chrome Developer Tools (by going in any screen element, opening the developer toolbox with f12 and checking any style of any div or any js file). You will need to check which fingerprint version of the file is used, then open that version with the text editor and check what is loaded in the fingerprint version of the file.
If your file (for ex. user.js) is loaded at the bottom of the manifest, you should easily find it at the bottom of your fingerprinted application.js.
If you want to update this file you can run
rake assets:precompile
This will precompile assets only in development, for production you need to specify the environment. It will change that fingerprinted file application.css and application.js with the editing you have done.
RAILS_ENV=production bundle exec rake assets:precompile
You can also check the file at the following address localhost:3000/assets/yourjsfile.js or check the fingerprint version by following localhost:3000/assets/application-yourfingerprint.js
As you can see, many files are included in that public/assets folder, you can delete them with rake assets:clean or -rf public/assets and then run rake assets:precompile, it will precompile again assets.
If nothing is included, then your application.js is not being loaded. You may try the following as I read on different posts:
Include the file in the config/initializers/assets.rb with the following line of code:
Rails.application.config.assets.precompile += %w( user.js )
Start the rails c and run Rails.application.config.assets.paths
This command will show in red the paths that are automatically included, for example those inside App, Lib and Vendor, in green those that you included by adding inside config/application.rb the follwing code to add new path
config.assets.paths << Rails.root.join("vendor","assets", "fonts")
Another error i made in the past was not using the correct sprockets syntax, you can check it at the following link ( i was using require_user instead of require user):
https://github.com/rails/sprockets#sprockets-directives
Another problem was that I had under App/assets/javascript two files named user (user.coffee and user.js). The first to be loaded was user.coffee which was empty.
I get this when using Foundation 5.0.2.0 in production mode.
On Rails, Unicorn, NginX & Ubuntu.
"NetworkError: 404 Not Found - http://mydomain.com/javascripts/vendor/modernizr.js"
Update 3/13/14
I don't have this problem on heroku with foundation-rails-5.1.1.0. Adding javascript_include_tag "vendor/modernizr" in the head works. I could remove the modernizr I copied to the vendor directory and remove the extra line in app.js
I had the same problem on heroku, the app would crash because it couldn't find modernizr.js. Here's how I fixed it:
Copy modernizr.js from foundation (wherever you installed it with bundler) into vendor/assets/javascripts/.
Add //= require modernizr below //= require_tree . on application.js.
Remove javascript_include_tag "vendor/moderizr" from application.html
I got the same error as you and I did this to fix it:
In config/environments/production.rb, set this:
# Do not fallback to assets pipeline if a precompiled asset is missed.
config.assets.compile = true
Try updating the gem you're using for Foundation. This commit from five days ago may help you since it claims to add a missing modernizr.js file.
There is an issue with the version of the foundation-rails gem you are using. In fact even the latest version currently available (5.0.3.1) has this problem. There is a pull request which claims to fix this: https://github.com/zurb/foundation-rails/pull/71 but another option for now is to update your gem to 5.0.3.1 and add this line to your production.rb file:
config.assets.precompile += %w( vendor/modernizr.js )
Please follow the manual instructions from zurb here:
http://foundation.zurb.com/docs/applications.html
Which specifiy that the modernizr script be included inside the head tag. I ran into this issue and then fixed it using the following code in layouts/application.rb:
%head
%title= title
= stylesheet_link_tag "application"
= javascript_include_tag "vendor/modernizr"
= csrf_meta_tags
= favicon_link_tag
= yield(:head)
I am using foundation-rails (5.2.2.0) and I solved it by just adding:
//= require modernizr
below
//= require_tree .
in app/assets/javascripts/application.js
In my project, I have tried to bundle most of my js libraries into gems so they can be updated and pulled in whenever necessary, however, I've recently setup our production server and I'm having issues with asset compilation and static assets in /public/assets.
Specifically, when I don't use the asset pipeline, I have no issues with datatables or any other JS libraries or css that I am trying to use. I am precompiling my assets in production and using a typical nginx setup (based on railscast #335) to serve them.
Static assets are the following -
public/assets
javascript/jquery.formatCurrency-1.4.0.min.js
stylesheets/datepicker.css
twitter/bootstrap/bootstrap-datepicker.js
is public/assets the correct place for these?
When I deploy with capistrano, these assets get a 404 when loading the page and are not actually copied to the /public/assets directory on the server.
When loading other pages I am calling the datatables plugin as follows
$('#inventory_item_list_datatable').dataTable
sDom: "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
sPaginationType: "bootstrap",
iDisplayLength: 100
Datatables is compiled into my application.js and doesn't throw an error, but the table never actually renders. I'm wondering if this is related to the order that everything is compiled?
app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require jquery_nested_form
//= require twitter/bootstrap
//= require dataTables/jquery.dataTables
//= require dataTables/jquery.dataTables.bootstrap
//= require_tree .
app/views/layouts/application.html.erb
<%= stylesheet_link_tag "application", :media => "all" %>
<link href="/assets/stylesheets/datepicker.css" media="all" rel="stylesheet" type="text/css" />
<%= javascript_include_tag "application" %>
<script src="/assets/twitter/bootstrap/bootstrap-datepicker.js" type="text/javascript"></script>
---edit datatables issue
when using jquery-datatables-rails gem it must be OUTSIDE of your assets group in gemfile.
By default , asset-pipeline comes with 3 locations for placing the assets : app/assets, lib/assets and vendor/assets . You have to place (in case you'd like to rely on the pipeline) your assets there , not in the public/ . In the production env all the assets are compressed and transformed into one file (respectively for .js and .css ) : application.* .
EDIT : In this case the assets directory was structured differently . After the chat with #theIV and #Kosmonaut , we have found the solution : moving the assets to the vendor/assets directory with structure :
For Javascript assets:
vendor/assets/javascripts/specific_javasripts
and for CSS:
vendor/assets/stylesheets/specific_stylesheets
By default , the vendor/assets/ directory does not contain javascripts nor stylesheets directories , they should be created .