Having trouble connecting Heroku to my asset javascript and css files within my Rails application

After deploying my app on Heroku, I encountered an issue where my scripts and CSS files are not properly linked. While everything works fine locally, the same does not hold true in the production environment.

This is how I am rendering my scripts and CSS in the view:

<%= javascript_include_tag "welcome_page_scripts" %>
<%= stylesheet_link_tag "welcome_page_styles" %>

I have placed these JS/CSS files in the vendor/javascripts or vendor/stylesheets directory.

In my production.rb file:

config.serve_static_assets = false
config.assets.compile = false

I have tried setting either one of them to true, followed by running the command below, but unfortunately, it did not resolve the issue.

rake assets:precompile --trace RAILS_ENV=production

Update 1: (I also noticed that I already have this in my Gemfile). Despite adding 'rails_12factor' gem for production environment, the asset links are still not functioning correctly on Heroku compared to local setup.

gem 'rails_12factor', group: :production

Any guidance on the right approach to fix this would be greatly appreciated. Thank you.

Answer №1

Make sure you don't forget to push your changes to git after precompiling (git add public/assets) and then pushing those changes to Heroku (git push heroku master). This includes the creation of a manifest.yml file in public/assets during precompilation. For more details, check out this link: https://devcenter.heroku.com/articles/rails-asset-pipeline

Answer №2

When it comes to enhancing your Heroku experience, the Heroku gem is a valuable tool. Check out the link to learn more: https://github.com/heroku/rails_12factor

If you prefer not to use the gem, browsing through the issues on that page can provide useful insights.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ensure that the side navigation panel is equal in height to the content

I'm struggling to make my right side navigation div fill up the remaining vertical space based on the content box size. I've experimented with setting the height of the body and the div to 100%, using absolute positioning, and even shedding a few ...

The CSS transition for changing the background image of a div upon hover is not functioning properly

I am attempting to add a transition effect on hover to a div element. Despite creating CSS code for the transition, it does not seem to be working properly in Chrome or Firefox. #header { border: 0.1px solid #666; background-image: linear-gradi ...

How to make text in HTML and CSS stay at the bottom of a div?

I am in the process of creating a website dedicated to my "Starcraft II" clan. My goal is to have the navigation bar display the text "ALLOYE" and remain fixed at the bottom of the screen. I attempted to achieve this using the following code: vertical-alig ...

The changing of colors does not function properly when clicked in JavaScript

I am having an issue with a drop-down list that offers two options: blue and green. When I select blue and click on the text input field, its background color alternates between blue and black (the default text field color). The same applies when I choose ...

Enhancing font awesome brand icons with tooltip functionality

I've been incorporating font awesome brand icons like fab fa-css3-alt, however, I'm facing difficulty in adding tooltips on hover. I've tried using the title attribute and data-toggle attribute based on some suggestions, but unfortunately, t ...

Generating replicated elements at varying positions

After discovering that my previous question, which can be found here, is currently not feasible due to limitations with html2canvas only taking 'snapshots', I have chosen to approach the problem differently. The new approach involves making an o ...

What is the best way to create a div with a smaller background color than its content?

Can someone help me with adjusting the size of a gray box in this code so that it is smaller than the text inside it? .media-body { background-color: gray; } <div class="media-body"> <h5>Lagoa Azul</h5> <span class="texto-medi ...

What is the best way to make a DIV box span the entire webpage without overflowing to the left?

I am currently working on a client's website and running into some issues with the layout of the booking page. The address is supposed to be on the left side, the contact form on the right, and both should be contained within a white box that fills th ...

The edges of the cube are not joined together

Looking for a 3D transform cube that can freely flip left and right, with the button fitting into it perfectly. I've found the CSS code to achieve this, but when I set the width of the ".cube" below 200px, the borders of the cube don't connect. I ...

Update the jQuery Mobile components on the page by refreshing them after dynamically adding them using AJAX and PHP

I have developed a PHP script that dynamically renders three form elements for each entry in a database. The script generates HTML output similar to the following example: <!-- Entry 1 --> <div data-role="fieldcontain"> < ...

Slider Adjusts Properly on Chrome, but Not on Firefox

Visit this URL This link will take you to the QA version of a homepage I've been developing. While testing, I noticed that the slider on the page works perfectly in Chrome and IE, but has layout issues in Firefox where it gets cutoff and moved to th ...

Trying to rearrange the sequence of tags can alter the behavior of Bootstrap and CSS

I'm in the process of designing a hockey-themed website and wanted to incorporate a "carousel" display for live games without using Bootstrap 4's carousel feature. My goal was to rearrange elements so that the score would always be positioned ins ...

Utilizing CSS to conceal the scrollbar while allowing scrolling functionality on Firefox

Greetings to all! I have successfully created a navbar similar to apple.com for phone screens that works perfectly on Safari and Chrome. You can find the code on jsfiddle. The main CSS used is as follows: ul::-webkit-scrollbar { dis ...

Unexpected behavior with Bootstrap classes

I have come across the following HTML code which appears to be using bootstrap, however, it is not responsive. It is supposed to be responsive and adapt to mobile and tablet devices, but it still displays the desktop view on mobile and tablet screens. < ...

Utilizing hover effects and timeouts to conditionally show React components

I encountered a challenging React layout dilemma. It's not a complex issue, but rather difficult to articulate, so I made an effort to be as clear as possible. The data I have maps individual components in the following way: map => <TableRow na ...

Creating a customized file input using CSS

I am currently utilizing Bootstrap4 to craft my webpage and I am incorporating a custom file input bar. To retrieve the three labels of the input bar ("Choose file", "Browse", "Upload") from my stylesheet, I have created three custom classes with their co ...

Is it possible to apply a PNG icon collection using CSS?

Throughout various examples, jQuery plugins, and CSS-styled HTMLElements, I have observed the setting of icons on an image with multiple options. I am eager to implement this practice in my own apps. https://i.sstatic.net/WDCH3.png For instance, in the ...

Say goodbye to my HTML5 creations

I am currently working on an HTML5 grid project that involves implementing a rectangle select tool for use within the grid. Everything is going smoothly, except for the fact that when I attempt to use the rectangular select tool, the grid disappears from t ...

Turn off automatic zooming for mobile device input

One common issue observed in mobile browsers is that they tend to zoom in on an input field or select drop-down when focused. After exploring various solutions, the most elegant one I came across involves setting the font-size of the input field to 16px. W ...

Attempting to dynamically alter the background color of a sticky header once a specific class reaches the top of the viewport

I am in need of a solution to alter the background color of a simple sticky header whenever a div/class/id reaches the top of the window, and revert back when scrolled up. This change should occur multiple times. The base code for the sticky header can be ...