Heroku production differs from local development (Rails)

Question

I am new to coding and Rails, and this is the first time I have encountered this problem - the local version for developing my application is different from the malicious one from the production version.

I use the Zurb Foundation in my Rails application and deploy it to Heroku to see it during production. The problem I am facing is that locally, the CSS that I wrote to get the padding between the navigation bar and the rest of the page works correctly, but when I deploy to Heroku, the CSS does not display correctly and the padding is missing.

I wrapped the output in application.html.erb with a class div I called "fixednavbar" and wrote the following css:

.fixednavbar { padding-top: 60px; } 

I put this css in the layouts.css.scss file in the asset pipeline (Rails 3.2.13). The code in the application.html.erb file is as follows:

 <div class="row fixednavbar"> <%= yield %> </div> 

I checked the code locally and on github to make sure they match and they do it. I took a decisive step and started a new repository, then deleted the local git repository and started a new one and clicked all the current files there (I created a new repository on github so that all my previous versions were still in the original repository).

After that, I created a new Heroku application and deployed it, and still the production version does not display CSS the same as the development version.

I have a complete loss as to why these versions will be different if the code is the same (if only something is hiding somewhere else that I did not think to check).

Any help is greatly appreciated. As I said, I know that Rails (and coding for the most part), and this is the first time I have encountered a problem like this.

Thanks!

Update: I kept trying to figure this out. I did other work on the application and then returned to this problem. I want the production version to reflect what is under development, so any help at all would be awesome.

To describe the problem further: almost the same as if my production deployment in Heroku got stuck in the old version of the application when css was not developed yet. The color of the navigator is stuck in the first color that I changed, and I am not updating to a new color. A sticky nav still causes a problem in production, where the body is partially hidden behind the navigation.

Now, in the process of developing a local server, I fixed all these problems. Changes are reflected in development, and everything is as it should be.

After the changes, I commit git, then click github. After clicking on github, I click on Heroku.

The github files reflect the changes and the code, as it should be. However, Heroku does not reflect this. I am honestly a dead end here and need some help please.

Answer 1

With some help from the users who responded, I was able to identify the error and look for a solution. I found it HERE .

The solution is to look in the production.rb file and find the line that says

 config.assets.compile = false 

and change the value "false" to true.

 config.assets.compile = true 

Then run

 rake assets:precompile RAILS_ENV='production' 

After deploying to Heroku, you may need to run

 heroku run rake db:migrate 

This ensured the correct operation when deploying to Heroku.

Answer 2

How did you enable this plugin? Instead of directly adding js and css, try using their gem https://github.com/zurb/foundation-rails and remove any direct links from your application. I ran into similar problems with other plugins like bootstrap, bxslider etc.

Answer 3

As a newbie, I had a difficult time with the same problem. Since I'm using Rails 4, an easy way to remove this line from config / application.rb did the trick.

config.assets.initialize_on_precompile = false

https://devcenter.heroku.com/articles/rails-asset-pipeline

Of course, I bother with all of the above steps and a few others from other posts.