ruby '3.0.1' 'rails', '~> 6.1.2'
I am dropping Webpacker from a rails project. I assume it was originally created using rails new with the webpacker flag to generate it but I do not know for sure. All I've done so far was remove yarn, browersify, babel, and etc source files and then moved all of my javascripts and stylesheets to app/assets and app/vendor.
I also added this to application.html.erb:
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => "reload" %>
<%= javascript_include_tag "application", "data-turbolinks-track" => "reload" %>
For a while, things were working. I was correcting paths, fixing small errors, and etc. Then after I restarted the server once, I was given a new error and now I'm stuck.
Sprockets::Rails::Helper::AssetNotPrecompiled in Universes#index
Showing /var/app/app/views/layouts/application.html.erb where line #8 raised:
application.css
Here's what I know so far:
I don't use an application.css. I have a app/assets/stylesheets/application.scss instead.
If I remove the stylesheet stylesheet_link_tag call, I get a similar one for application.js.
I'm sure I have the sass-rails gem installed so it should be using application.scss instead.
I've never used the base rails asset pipeline before. Only the webpacker-way of doing things. So I can assume very basic things are missing.
Any help would be appreciated. Thank you.
For application.scss you should make sure you have the sass-rails gem in your gemfile.
Other than that maybe some help would come from: https://guides.rubyonrails.org/asset_pipeline.html#in-development
Lam Phan had what I needed. My assets/config/manifest.js was not configured correctly. I restored it to:
//= link_tree ../images
//= link_directory ../javascripts .js
//= link_directory ../stylesheets .css
and then made sure application.scss and application.js were at those paths. It was all easy after that. Thank you very much for your time.
Related
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 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.
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
For some reason, the js files under app/asset/javascripts folder are no longer being requested by the rails application.
I have enabled assets in application.rb
I have these lines in application.js:
//= require_self
//= require_tree .
with proper use of the blank lines.
And I have included this line in my application.html.erb file:
<%= javascript_include_tag "application" %>
<%= csrf_meta_tag %>
I have application.js, jquery.js, jquery-ui.js, prototype.js and some other js files in the javascripts folder.
But when I access those js files in Firefox firebug, the content are different from that in the folder. I keep getting the message: Served asset /xxx.js - 304 Not Modified (0ms).
It is so frustrating and I really need some help.
Thank you in advance!
I am using
Rails version: 3.2.7
Ruby version: ruby 1.9.3p194
gem version: 1.8.24
Thin server
UPDATE:
I have used rake assets:clean and this never happened again!
Probably this is beacuse to you have this precompiled files in public dir
try adding this to development.rb
config.serve_static_assets = false
Question:
How do you get the asset pipeline to process all your .js files? (I want them served individually, not bundled into application.js)
I'm getting a ton of 404's for the javascript files that my pages are trying to reference:
GET http://<myStagingServer>.heroku.com/assets/<javascriptFilename1_MD5fingerprint> 404 (Not Found)
GET http://<myStagingServer>.heroku.com/assets/<SubDir>/<javascriptFilename2_MD5fingerprint> 404 (Not Found)
I tried adding this to config/application.rb:
config.assets.precompile << '*.js'
But that didn't do anything as far as I can tell.
Background:
I'm upgrading from Rails 3.0 to 3.1 and enabling the asset pipeline.
Highlights so far:
Switching to Heroku's Cedar stack from Bamboo: heroku create --stack cedar.
Switching to "thin" as the production server, which fixed various issues: gem 'thin'.
Moving my assets from public/assets to app/assets, updating references in code to use stylesheet_link_tag and javascript_include_tag. (Plus whatever I did for images -- they work.)
Removing x_sendfile_header config options because Heroku doesn't support it.
Relevant files:
//
// application.js
//
//= require_self
//
OMG: I found the problem:
javascripts and stylesheets with periods in their names require explicit extensions
For example:
# WORKS
javascript_include_tag "application"
stylesheet_link_tag "application"
# BROKEN
javascript_include_tag "jueryui.custom"
stylesheet_link_tag "jueryui.custom"
# WORKS
javascript_include_tag "jueryui.custom.js"
stylesheet_link_tag "jueryui.custom.css"
I guess I can see why this is, but I think that it isn't very well documented on any of the asset pipeline tutorials. Is it common knowledge that you shouldn't have periods in your asset filenames?
I think you need the following in both application.js and application.css :
//= require_tree .
This loads all the files in the assets directory for CSS and JS.
Also for upgrading to 3.1 and info on the asset pipeline:
http://railscasts.com/episodes?utf8=✓&search=Asset+pipeline
Also: Using Rails 3.1 assets pipeline to conditionally use certain css