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

Having trouble with res.render() when making an axios request?

I am encountering an issue with my axios requests. I have two requests set up: one to retrieve data from the API and another to send this data to a view route. const response = await axios({ method: 'POST', url: 'http:// ...

Restful Spinner

app.config(function(RestangularProvider) { RestangularProvider.addRequestInterceptor(function(element) { console.log("Request initiated"); return element; }); RestangularProvider.addResponseInterceptor(function(data) { ...

Efficient Error Handling in Next.JS with Apollo GraphQL Client

Although the component successfully renders the error state, an uncaught exception is displayed in the console and a dialogue box appears in the browser. How can expected errors be handled to prevent this behavior? import { useMutation, gql } from "@a ...

Removing the switcher outline in Bootstrap Switch: a step-by-step guide

I have implemented the bootstrap-switch - v3.3.1, however, I want to remove the default blue outline that appears around the switcher when toggling it on or off. Despite setting style="outline: 0 none; for the input, the outline remains visible. Below is ...

The ConsoleCapture does not capture every console error for Sentry

Running into an issue capturing console errors with Sentry in a Next.js app. The problem arises from an error within a library that is inaccessible to us, specifically related to WebSocket "WebSocket is already in CLOSING or CLOSED state" This error is c ...

utilize text offsets to insert tags within strings

I've been facing challenges with using JavaScript string methods and regular expressions. It seems like I might be missing something obvious here. Please forgive me if I'm repeating the question asked by tofutim in more detail, which can be found ...

Text positioned in the center alongside an image, or if there is limited space, it will be aligned to

Take a look at this code snippet: img { float: left; } #inner { height: 128px; background-color: yellowgreen; display: table-cell; vertical-align: middle; } #content { background-color: red; } <img src="http://cdn.memegener ...

What could be causing the 304 error when using $http.get?

I'm a newcomer to angular and facing an issue with a service that was functioning perfectly, but suddenly stopped. The service I am referring to has the following method. this.retrieveForms = function() { return $http.fetch("/forms"). then(fu ...

Guide on using JSZip and VUE to handle an array of promises and store them in a local variable

My lack of experience with async functions has me feeling a bit lost right now... I'm attempting to loop through files in a folder within a zip file using JSZip, store these files in an array, sort them, and then save them to a local variable for furt ...

Is there a way to improve or simplify this jQuery validation code?

I am implementing client side validation using jQuery to ensure all fields are filled in before proceeding. var passedValidation = new Boolean(true); // Validate Required Fields if ($('#fbsignup input.firstName').val().trim() == '') { ...

Having issues with ASP.NET MVC AJAX PartialView not loading Telerik UI components

I am facing an issue with a PartialView that I update using AJAX. The HTML elements load correctly when updating the Div with AJAX, but the Telerik chart is not loading. The datasource in the chart does not call the Action method: .DataSource(ds => ds. ...

Using vue.js to make an HTTP GET request to a web API URL and display

I am currently utilizing vue.js to make an http request to a web api in order to retrieve a list of projects and display them in a list. However, I am encountering an issue where only one item from the response array of eight items is being rendered. Any a ...

Content on the page is not fully visible on mobile devices when the Right-to-Left attribute is applied

I recently added multilanguage support to my blog using the RTL attribute. However, I noticed that when users switch to another language, the page content shifts from LTR to RTL. Everything was working fine until I encountered an issue with a toggle tab o ...

"VueJs and ChartJs work together to create single file components, but the computed property is only rendered in Vue Dev Tools when the component is

Currently, I am working on a single file component that utilizes Chart.Js to display a basic visualization of some hardcoded data. The Chart.Js library is being called from a CDN placed in the head section of my index.html file. The project is based on th ...

Display only the most recent AJAX results

There are times when I encounter a scenario where performing an action on the page triggers an ajax request. If multiple actions of this nature happen in quick succession, each ajax request performs its task (such as updating a list of items) one after t ...

Make sure to blur all images whenever one of them is clicked

I am currently facing an issue with my webpage where I have 3 images displayed. I have implemented an event listener to detect clicks on the images, and once a click occurs on one of them, I want everything else on the page to become blurred, including the ...

Using regular expressions to replace strings in JavaScript

I have a URL that resembles the following http://localhost:12472/auctions/auction-12/lots/sort/something/12 I am looking to switch it out with this new URL http://localhost:12472/auctions/auction-12/lots/sort/somethingelse/12 Here, somethingelse can be ...

What is the process for confirming the authenticity of lengthy passwords with bcrypt?

"I encountered a problem that I just can't seem to solve. I set up an authentication flow using JWT with access and refresh tokens. The refresh tokens expire after a long time period, and they can be reset to prevent unauthorized use of stolen refresh ...

How can we reduce the use of !important in SCSS when working with React and Material UI?

In my current project, I am developing a Select component in React with Material UI. The CSS styling for the component is managed through an external SCSS sheet imported into the script file. While working on restyling the component, I found it challengin ...

The functionality of tinymce setContent can only be activated by directly clicking on it

Everything is running smoothly with the code below: $('.atitle').on('click', function(){ console.log('323'); tinymce.get("ed").setContent("<p>lorem ipsum</p>"); // it's working ...