Disable caching in Nginx for a single-page HTML application

My single page app is set up using AngularJS and gulp. Whenever I run the command gulp build, it compiles my assets into minified JavaScript and CSS files like app98D9898.css. The random number in the file name changes with each build.

The HTML page named index.html is responsible for loading these CSS and JavaScript files.

So far, everything has been functioning as intended.

To serve my static files, I use NGINX as a proxy. However, a major problem has surfaced: Chrome and Firefox are caching the index.html file. As a result, even when I build a new version of my app, the browsers continue to load the outdated one.

I'm on the lookout for a solution that involves configuring NGINX to avoid caching the index.html file. Any suggestions on how I can tackle this issue?

javascriptangularjscachingnginx

Answer №1

To apply a brief expiration time to HTML files and deactivate the proxy cache, you can establish a location within the server block.

location ~* \.(html)$ {
   expires              1h;
   proxy_cache          off;
   ...
}

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 is the reason for elements such as "if" and "else" not being visually

I am currently developing a browser-based code editor with a unique feature. Task: The objective is to highlight specific keywords like if, else, for... when they are entered into the editor. textarea.addEventListener("input", function() { ...

javascripthtmlcssdom

JavaScript threw an error because it encountered an unexpected or invalid token

I can't seem to identify the error in this code. Can someone please help me correct it? document.write(' <div> <a href=http://www.socialsignal.ir style=\'\\padding:5px;text-decoration: none;border: 1px solid #555;ba ...

javascriptjquery

Navigating through div elements using arrow keys in Vue

Trying to navigate through div elements using arrow keys is proving to be a challenge for me. I have successfully achieved it in JavaScript, but I am facing difficulties doing it the "vue way". Although there should be no differences, it simply does not wo ...

javascriptvue.jsvuejs2

Positioning a designated div directly above a designated spot on the canvas

I'm grappling with a challenge in my game where the canvas handles most of the animation, but the timer for the game resides outside the canvas in a separate div. I've been struggling to center the timer around the same focal point as the squares ...

javascripthtmlcsscanvas

Implementing CSS styles with the className attribute in a Material UI component within a ReactJS application sourced from a dynamic JSON object

I have a dynamic JSON object that includes a button element. I am using createElement and Material UI to display the data from this object. I wanted to add custom CSS styling to the button component using className, but I've been struggling to achiev ...

javascriptcssreactjsmaterial-uijsx

The bootstrap function for showing the modal with the ID "myModal" is malfunctioning

As someone who is just getting started with PHP and Bootstrap, I am running into an issue where the modal doesn't seem to work when triggered using the .modal method. Here is the PHP code I am using: if ($show_login_modal) { echo " <scr ...

javascriptphpbootstrap-4bootstrap-modal

The slider customization on Joomla is functioning perfectly on my local machine, but it seems to be encountering some issues on

Having recently started working on a Joomla website for the first time, I encountered some challenges when trying to add a slider module. Despite successfully implementing the slider on my local machine, I faced issues when transferring the code to the liv ...

javascriptphpjqueryjoomlajoomla2.5

Is there a way to retrieve all "a" tags with an "href" attribute that contains the term "youtube"?

My goal is to capture all a tags that have the href attribute containing the word youtube. This task requires the use of jquery. ...

javascriptjqueryhtmlcssjquery-selectors

Unraveling JSON data in AngularJS

After receiving a response from an OData service in JSON format, the data looks like this: [ { "id":1, "ProductName":"Surface Pro 2" }, { "id":2, "ProductName":"iPad" }, ] When att ...

jsonangularjs

What is the process of establishing a connection to a web service using Meteor or Node.js?

Currently working on developing a package that interfaces with a web service (either through nodejs or meteor). The web service will be delivering real-time data, so I am in need of a mechanism like a listener or trigger event that can alert me when new da ...

javascriptnode.jsmeteor

Is it possible to achieve a smooth transition to the right using CSS

I'm attempting to create a sliding box effect from left to right using only transitions, similar to this: #box { width: 150px; height: 150px; background: red; position:absolute; transition: all 2s ease-out; right:auto; } .active{ bac ...

javascripthtmlcss

Can you explain the distinction between $.param and JSON.Stringify?

I am encountering an issue with my code snippet: $http({ url: config.apiUrl + 'mail/Sendmail', method: 'POST', data: JSON.stringify({ Body: $scope.Message, ...

javascriptjqueryjson

Develop a versatile JavaScript or jQuery script that automatically sets the focus on the first input field within a div or tag when the user clicks on it

I am currently working on creating a data entry form using a table layout. The form has two columns - the first column for input titles and the second column mostly for input tags. I styled the inputs in the second column to appear transparent with no bord ...

javascriptjqueryhtmlforms

List with pulldown options

I am trying to implement a drop-down list with bullets using Angular 2, JavaScript, and CSS. Although I have managed to create the drop-down list, I am facing difficulty in adding bullets to the list items. Unfortunately, I have found that jQuery and Boot ...

javascriptcssangular

Hiding the C3 tooltip after engaging with it

I'm currently expanding my knowledge on utilizing C3.js for creating charts, and one aspect I'm focusing on is enhancing the tooltip functionality. Typically, C3 tooltips only appear when you hover over data points as demonstrated in this example ...

javascriptcsschartstooltipc3.js

Setting up yeoman-generator only to realize it's nowhere to be found

Every time I try to install yo generator like angular, angular-fullstack, cg-angular using these commands: npm install -g generator-angular npm install -g generator-angular-fullstack npm install -g generator-cg-angular I encounter an issue when trying to ...

angularjsnpmyeomanyeoman-generator-angular

Leveraging an external React library to utilize .ogg files for audio playback specifically in the Safari

Hey there! I'm currently working on incorporating ogg-opus audio playback in a react app on Safari (since it doesn't support .ogg format). My project was initialized using create-react-app. I came across the "ogv.js" library, which supposedly h ...

javascriptreactjssafariogg

Using placeholders for multi-statement queries in Node.js with MySQL

I've reached the final stages of my project. The only thing left to do is to write the final query to the database. I want to use placeholders for this, but I'm not sure how to do it correctly in a multi-statement query. This is the query I have ...

javascriptmysqlnode.js

Error message: NullInjectorError: R3InjectorError[ToastrService -> ToastrService -> InjectionToken ToastConfig -> InjectionToken ToastConfig]:

I'm struggling with integrating ngx-toastr into my Angular standalone micro-frontend in angular 16. When I try to add the ngx-toastr provideToast() function in the main Module component, it doesn't seem to work as expected. Can someone please hel ...

angularangularjsangular-materialangular-standalone-componentsngx-toastr

Having trouble initializing the canvas with fabric.js and Vue.js, as the function this.lowerCanvasEl.getContext is not recognized

When attempting to initialize a canvas in a VueJS component, I encountered an issue. Here is an example: https://jsfiddle.net/eywraw8t/55338/ I tried initializing the canvas in the mounted hook, ensuring that the DOM is available. Fabric seems to be worki ...

javascriptvue.jsfabricjs