CODEWITHSUNDEEP
ruby-on-railstwitter-bootstrap-3ruby-on-rails-4.1
EastsideDev
EastsideDev

Reputation: 6639

Gliphs not showing up properly on an Ubuntu Rails 4.1 installation

On my development machine:

Windows 8.1
Ruby 2.0
Rails 4.1
Bootstrap 3

On my production machine:

Ubuntu 12.4
Ruby 2.1.1
Rails 4.1
Bootstrap 3

Here's my code:

<td>
  <%= link_to my_model, class: 'btn btn-info' do %>
    <span class="glyphicon glyphicon-search"></span>
  <% end %>
</td>
<td>
  <%= link_to [:edit, my_model], class: 'btn btn-warning' do %>
    <span class="glyphicon glyphicon-pencil"></span>
  <% end %>
</td>
<td>
  <%= link_to my_model, method: :delete, data: { confirm: 'Are you sure?' }, class: 'btn btn-danger' do %>
    <span class="glyphicon glyphicon-remove"></span>
  <% end %>
</td>

The gliphs show up fine on my development machine, but not on the production machine. Images attached. Any ideas?

Production Machine Development Machine

Precompiling:

I forgot to add that I precompile as follows:

RAILS_ENV=production bundle exec rake assets:precompile

Inspecting the elements:

Here's what firebug says when I inspected these elements. They are the same:

Firebug inspection for production:

<td>
  <a class="btn btn-info" href="/agents/1">
    <span class="glyphicon glyphicon-search"></span>
  </a>
</td>

Firebug inspection for development:

<td>
  <a class="btn btn-info" href="/agents/1">
    <span class="glyphicon glyphicon-search"></span>
  </a>
</td>

Answer:

It looks like I was dealing with a known Rails 4.1 issue. The solution is to:

  1. Have the following set in environments/production.rb:

    config.assets.compile = true

  2. Precompile assets as follows:

    RAILS_ENV=production bundle exec rake assets:precompile

Precompiling the assets will prevent dynamnic asset re-compilation. I tested it and it now works on my ubuntu 4.1 server

Upvotes: 1

Views: 117

Answers (1)

Richard Peck
Richard Peck

Reputation: 76774

There could be a number of issues causing this:

--

Precompilation

The primary issue here will likely be precompilation:

By default Rails assumes assets have been pre-compiled and will be served as static assets by your web server.

Precompiling Rails assets is the bane of many Heroku-bound apps (I know you're not using Herou), as many people don't factor in their pre-compilation requirements when designing their asset pipeline.

The problem you probably have is your assets are either not precompiled, or are referencing their "dynamic" filenames, rather than their "static" ones

I would personally precompile your assets before deploying to production:

$ rake assets:precompile RAILS_ENV=production

-

Fingerprinting

When you precompile your assets, Rails performs something called fingerprinting - basically where Rails will append a hash to the end of the filename

Another issue for many people is they'll reference the "static" filename using something like the following:

#app/assets/stylesheets/application.css
.style {
   background: url("your_image.png");
}

The problem here is although this will work in development (where assets are referenced statically), you will have a problem in production. To fix this, you'll need to use some of the Rails CSS pre-processors (SASS):

#app/assets/stylesheets/application.css
.style {
   background: asset_url("your_image.png");
}

--

Fix

In reference to your issue directly, I would say the main problem you're likely not referencing your CSS files correctly, probably with incorrect paths.

I would firstly look at the developer console in your browser - this will likely tell you that you don't have the various CSS files available, to which you'll then be able to try precompiling & referencing the glyphs dynamically to see if that will work

Upvotes: 0

Related Questions