CODEWITHSUNDEEP
ruby-on-railsrubyasset-pipelineassets
Dede Banell
Dede Banell

Reputation: 33

Rails : assets not working on Heroku

assets not working on Heroku (js/jQuery/image)

I am new to ruby and I have a little problem, I created a landing page that works perfectly on local (images are showing up, animation on js are also working).

But on Heroku, images are still here but animations are not working.

There is something weird, even if it's working when I check the console I have plenty of errors : 

Failed to load resource: the server responded with a status of 404 (Not Found)
font-awesome.min.css:1 Failed to load resource: the server responded with a status of 404 (Not Found)
application-18ac3fd2669832ec776c17e2e795d1fa260c46da2ba1ea9854a54227ada3a7cd.js:6 Uncaught TypeError: Cannot read property 'breakpoints' of undefined
    at application-18ac3fd2669832ec776c17e2e795d1fa260c46da2ba1ea9854a54227ada3a7cd.js:6
    at application-18ac3fd2669832ec776c17e2e795d1fa260c46da2ba1ea9854a54227ada3a7cd.js:6
jquery.min.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
pages.scss:1 Failed to load resource: the server responded with a status of 404 (Not Found)
jquery.scrollex.min.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
banner.jpg:1 Failed to load resource: the server responded with a status of 404 (Not Found)
pic02.jpg:1 Failed to load resource: the server responded with a status of 404 (Not Found)
pic01.jpg:1 Failed to load resource: the server responded with a status of 404 (Not Found)
jquery.scrolly.min.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
skel.min.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
util.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
main.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
pic03.jpg:1 Failed to load resource: the server responded with a status of 404 (Not Found)
font-awesome.min.css:1 Failed to load resource: the server responded with a status of 404 (Not Found)
pages.scss:1 Failed to load resource: the server responded with a status of 404 (Not Found)

I have an index.html.erb page that call the scripts :

<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/util.js"></script>
<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
<script src="assets/js/main.js"></script>

My scripts are in a folder app/assets/javascripts/js.

Thanks very much!

Upvotes: 1

Views: 822

Answers (2)

user9769384
user9769384

Reputation: 60

It's not right to use it like this: 

<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/util.js"></script>
<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
<script src="assets/js/main.js"></script>

Check this out: The Asset Pipeline.

You should put the all js files into app/assets/javascripts without jquery.min.js, because this library includes rails by default.

I believe the javascripts/application.js should be like this (by default):

//= require jquery
//= require jquery_ujs
//... example 
//= require_tree .

this //= require_tree . automatically maps the javascripts folder for all js files.

Remove this line //= require rails-ujs after edited like above.

And the app/views/layouts/application.html.erb should be like this:

<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

Update

You should place the pages.scss into assets/stylesheets/ and create a file inside assets/stylesheets/ like custom.scss then the custom.scss like this

@import "pages";

Upvotes: 2

Akash Pinnaka
Akash Pinnaka

Reputation: 475

You don't need to include scripts in index.html.erb.

In your app/views/layouts/application.erb, there should be the following line exists.

<%= javascript_include_tag "application.js", "data-turbolinks-track" => 'reload' %>

In your app/assets/javascripts/application.js you shouls see a line //= require_tree .

In your app/assets/javascripts create any .js file and write your code. It will work in all views without including anywhere.

If your animations are not working, try moving the following line from <head> 

<%= javascript_include_tag "application.js", "data-turbolinks-track" => true %>

to above closing body tag. i.e., </body>

Upvotes: 0

Related Questions