Heroku - JavaScript and CSS Updates Causing Loading Issues

Ruby version: 2.1.5 | Rails version: 4.1.1

For some reason, the changes I make to my JavaScript and CSS files are not reflecting on Heroku; it seems like the cached assets are still being used. I've tried removing the assets and precompiling them before pushing to Heroku. Below are the commands I usually use:

To Remove Assets: rake assets:clobber

To Precompile Assets: rake assets:precompile

I even added RAILS_ENV=production before running these commands to ensure they take effect in the production environment. Despite doing this, my changes were not updating on Heroku. So, as a last resort, I attempted to remove the assets and precompile them directly on Heroku platform with the following commands:

To Remove Assets: heroku run rake assets:clobber

To Precompile Assets:

heroku run rake assets:precompile

Upon checking the public/assets folder on Heroku, I discovered an overwhelming number of files present:

(List of files in public/assets)

It's evident that there are too many files in that directory than expected, but unfortunately, I haven't been successful in getting rid of them. Even after deleting the entire public/assets folder and executing a heroku run rake assets:clobber command, the folder automatically repopulates with all those files.

How can I effectively clear this extensive cache?

Answer №1

Finally solved it! Every time I checked the status with git status, it would show all those deleted files from my public/assets directory. The main issue seemed to be that Git was not tracking my public/assets folder. To fix this problem, I took the following steps:

git rm -r public/assets

This command removed all precompiled assets from my git repository in the public/assets folder and prepared them for commit. Previously, they were not staged for commit.

RAILS_ENV=production rake assets:precompile

Afterwards, I executed this command to precompile my assets before pushing to Heroku. As a result of the previous command, my public/assets folder was removed.

git add .

By doing this, I staged all new, modified, and deleted files in my project for commit.

Following this, I simply committed and pushed to Heroku, and now only a few files are listed in the public/assets folder on Heroku! Additionally, I can see the updated JavaScript and CSS on my website!

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

What improvements can I make to enhance my method?

I have a block of code that I'm looking to clean up and streamline for better efficiency. My main goal is to remove the multiple return statements within the method. Any suggestions on how I might refactor this code? Are there any design patterns th ...

Updating the chosen option using jQuery

Is there a way to change the currently selected option using jQuery? <select name="nameSelect" id="idSelect"> <option value="0">Text0</option> <option value="1">Text1</option> <option value="2" selected>Text ...

React.js onClick does not display the dropdown

Hello, I have a question regarding my navbar icon functionality. When I click on the icon, it is supposed to open a dropdown menu. However, although the div name changes when clicked, the CSS properties remain the same as the initial class. I am unsure w ...

Accessing an object from an AngularJS controller in an external function

I previously inquired about this issue and received a suggestion to add a service, but it did not solve the problem. I am trying to access a variable from a controller ($scope) within an external function. Below is a snippet of the example: app.controll ...

Find the ID of the clicked table row using HTML and JavaScript

Currently, I am trying to implement this code snippet: <td align="center"> <div class="dropdown"> <button onclick="DropdownShow(this)" class="btn btn-default glyphicon glyphicon-picture"></button> <div id="@TableR ...

Sliding background in a multi-column accordion

I've hit a roadblock with this project. I'm working on setting up a FAQ section that needs to display its items in two columns on desktop, each with a drop shadow effect using Bootstrap 4. I've experimented with Flexbox and CSS columns with ...

Failing to verify the presence of specific text within a dropdown menu using Selenium

Previously, I successfully implemented this code, however, the HTML/CSS for the dropdown has since changed and now I am unable to get it to function correctly. Below is the structure for the dropdown code, with specific text highlighted that I am trying t ...

Can you please tell me the font size specified as 20px/26px?

Recently stumbled upon the 20px/26px value in a codebase I'm currently working on. Wondering if anyone has encountered this before and knows what its purpose is. Interestingly, it renders with the latter pixel value (26px) in Chrome. #action { font: ...

Synchronizing timers among different elements

Just a little context: I'm diving into the world of React and currently working on a small app using next.js (with a template from a tutorial I followed some time ago). Lately, I've encountered a challenge where I need to synchronize a timer betw ...

Having trouble getting the image to stack in the center above the text on mobile devices

When viewing the website on a desktop, everything appears correctly. However, there seems to be an issue with responsiveness on mobile and tablet devices. Specifically, I want to ensure that the image of team members stacks above their respective bio parag ...

Concealing a column in a printed output on Internet Explorer 9

Our application features a webgrid with a hidden reference column that is concealed using CSS. While this method works seamlessly on most browsers, we encounter an issue when it comes to printing. In our print.css file, where the column is hidden similar t ...

Menu Design Inspired by Amazon Using jQuery

Can someone please assist me in locating a jQuery Amazon-style menu example? I would like to implement something similar and am hoping to avoid having to write it from scratch. Thank you! ...

Tips for activating scroll feature for certain section of an HTML page

For the styling of my page, I'm utilizing Scss and am facing an issue related to setting up scrolling for specific sections of an HTML page. You can check out the image reference here. During a scroll event, I want to ensure that the Categories (left ...

When iPhone images are uploaded, they may appear sideways due to the embedded exif data

When trying to upload images from a mobile device like an iPhone, it's common for the images to appear sideways unless viewed directly in Chrome. It seems that this issue is related to the image exif orientation data, which Chrome can ignore but othe ...

The `<Outlet/>` from react-router is being rendered in a location outside of its intended wrapper div

Utilizing MUI for crafting a straightforward dashboard featuring an <AppBar>, a side <Drawer>, my component appears as follows: <> <AppBar> // code omitted <AppBar/> <Drawer> // code omitted <Drawer/> / ...

changing the RadioButtonList to preselect a default value

On a page, I have a pre-existing RadioButtonList where I want to make the second button checked by default instead of the first one. Since I am unable to edit the original control directly, it seems like I might need to achieve this using javascript on th ...

What is the method for storing API status JSON in the state?

Can anyone help me figure out why the json in the register state is returning an empty object after console.log(register); from that state? import React, { useEffect, useState } from "react"; import { Formik } from "formik"; // * icons ...

Using PHP's $_GET with an Ajax/Jquery Request

I've been struggling to set a variable $id=$_GET["categoryID"] and can't seem to make it work. I suspect it's related to the Ajax request, but I'm unsure how to format it correctly to work with the request for my mysql query. Any assist ...

What is the best way to create a number input field that also accepts text input?

The goal I have in mind is to create an input field that will contain text like "100%", "54vh", or "32px". I am attempting to utilize the number input's up and down arrows, while still allowing the user to edit the text. However, it should only allow ...

What steps can be taken to resolve the vulnerability in webpack-pwa-manifest?

Looking for solutions to address the [email protected] and minimist vulnerability. I attempted removing node/modules and package-lock.json, followed by a fresh npm installation, but the issue persists. Any suggestions would be greatly appreciated. Scr ...