Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jeevanjames/cachebustingwithiisrewrite
Demonstrates cache busting with IIS rewrite outbound rules
https://github.com/jeevanjames/cachebustingwithiisrewrite
Last synced: about 1 month ago
JSON representation
Demonstrates cache busting with IIS rewrite outbound rules
- Host: GitHub
- URL: https://github.com/jeevanjames/cachebustingwithiisrewrite
- Owner: JeevanJames
- License: apache-2.0
- Created: 2019-05-30T10:43:50.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-03-03T06:53:03.000Z (over 1 year ago)
- Last Synced: 2024-10-09T16:33:58.207Z (about 1 month ago)
- Language: JavaScript
- Homepage:
- Size: 701 KB
- Stars: 1
- Watchers: 4
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Cache busting with IIS Rewrite module
For this process to work, you must have the IIS Rewrite 2.1 module installed.
The cache busting works by replacing any references to static resources (CSS, JS, PNG, JPG) in HTML and CSS files with a unique URL.
For example, the following `` tag in an HTML file:
```html
<script src="scripts/main.js">
```
would be replaced with:
```html
```
This changes are done in ``, `![]()
`, `` and `` tags in HTML. This can be customized to support more tags.
In CSS files, usage of the `url` directive is replaced with a new URL in a similar manner.
For example, the following CSS style:
```css
.bg-style {
background-image: url('assets/images/bg.png');
}
```
becomes:
```css
.bg-style {
background-image: url('assets/images/bg.png?c=1234');
}
```
The rules for rewriting are specified in the `web.config` file under the `<system.webServer>/<rewrite>` rules.
## Setup procedure
1. Clone or download this repository to a machine with IIS installed.
1. Create a new website in IIS and point it to the cloned or downloaded folder. Default settings are fine.
## Process for changes
Whenever changes happen in the web application and a new version needs to be deployed, follow the two steps below to get the caches busted:
1. In the `web.config` file, locate the two instances of `?c=<some number>` and increment the number.
2. The HTML file also needs to be modified from the previous release. If it has not been modified, try adding a custom tag attribute or comment to the file to mark it as modified.
In this scenario, a custom attribute is added to the `<html>` tag with the same number value from the first step.
## Process to verify cache busting
These steps describe the process for verifying cache busting in Chrome.
* Open Chrome and the Chrome dev tools. Keep the Network tab active with the `Preserve log` checkbox enabled and the `All` filter selected.
You will also observe that the static resources (`styles.css` and `iis.png`) URLs have a query string appended.
* Navigate to the app URL. You will see that all resources were retrieved without cache:
* Refresh the page normally. This can be done multiple times.
Note that:
* The static resources are being loaded from the browser cache.
* The `index.html` file is also loaded from cache (as indicated by the `304` status code.)
* Make changes to the CSS file (colors, fonts, etc.), optionally replace the image with another one. You can also change the HTML content.
* Follow the steps in [Process for Changes](#process-for-changes) to prepare the new release.
* Back in the browser, do a normal refresh and you should see the updated version without needing to clear the cache or do a hard refresh.
