DEV Community

Kaziu
Kaziu

Posted on • Updated on

"Why only my friend's PC doesn't change CSS ๐Ÿ˜ฑ" ~Real story on my project~

There was like this conversation

๐Ÿ‘ฉโ€๐Ÿ’ป ๐Ÿ‡ป๐Ÿ‡ณ - my friend who lives in Vietnam
๐Ÿ‘จโ€๐Ÿญ ๐Ÿ‡ต๐Ÿ‡ฑ - me, lives in Poland


๐Ÿ‘ฉโ€๐Ÿ’ป ๐Ÿ‡ป๐Ÿ‡ณ I fixed CSS and it was good in my local environment, 
but in test environment(AWS) doesn't change anything

๐Ÿ‘จโ€๐Ÿญ ๐Ÿ‡ต๐Ÿ‡ฑ aha

๐Ÿ‘ฉโ€๐Ÿ’ป ๐Ÿ‡ป๐Ÿ‡ณ could you check it on your PC?

๐Ÿ‘จโ€๐Ÿญ ๐Ÿ‡ต๐Ÿ‡ฑ sure .... tadaaam css is changed on my PC

๐Ÿ‘ฉโ€๐Ÿ’ป ๐Ÿ‡ป๐Ÿ‡ณ what?? yeah exactly...

๐Ÿ‘จโ€๐Ÿญ ๐Ÿ‡ต๐Ÿ‡ฑ Have you tried deleting cache?

๐Ÿ‘ฉโ€๐Ÿ’ป ๐Ÿ‡ป๐Ÿ‡ณ Yeah, I've tried it at first

๐Ÿ‘จโ€๐Ÿญ ๐Ÿ‡ต๐Ÿ‡ฑ hmm... could you try to use incognito chrome?

๐Ÿ‘ฉโ€๐Ÿ’ป ๐Ÿ‡ป๐Ÿ‡ณ Just moment ... it turns out same result...

๐Ÿ‘จโ€๐Ÿญ ๐Ÿ‡ต๐Ÿ‡ฑ on incognito chrome as well ??? Maybe CDN cache??

๐Ÿ‘ฉโ€๐Ÿ’ป ๐Ÿ‡ป๐Ÿ‡ณ How can I check it ?

๐Ÿ‘จโ€๐Ÿญ ๐Ÿ‡ต๐Ÿ‡ฑ chrome devtool > Network > Headers > X-cache
I see I get css file from CDN(AWS cloudfront)
Enter fullscreen mode Exit fullscreen mode

Image description

๐Ÿ‘จโ€๐Ÿญ ๐Ÿ‡ต๐Ÿ‡ฑ and age means the time when this file was created.
so I get file which is created 118 seconds ago on CDN
Enter fullscreen mode Exit fullscreen mode

Image description

๐Ÿ‘จโ€๐Ÿญ ๐Ÿ‡ต๐Ÿ‡ฑ How is it on your PC?

๐Ÿ‘ฉโ€๐Ÿ’ป ๐Ÿ‡ป๐Ÿ‡ณ age is 279313, so almost 3days ago ! this is the reason !!
Enter fullscreen mode Exit fullscreen mode

2 days later...
Image description
file name was like main%5BchunkHash%%5D.css, but it should have be like 7530r9w4j0fef0we.css (without "chunckHash")
it means version of css file.

the reason why css file name was not property was mini-css-extrace-plugin version.

after my friend updated version, everything was ok ๐Ÿ‘

according to AWS doc, if css name is not included version identifier, cache doesn't update.

Top comments (2)

Collapse
 
kaspersfranz profile image
Kasper Sanguesa-Franz • Edited

Another solution could be to invalidate the CloudFront cache :)

Collapse
 
piotrek profile image
Piotr

if you want the CSS to change, you must append a parameter to the CSS file name in HTML, e.g. timestamp
example: "main.css? t = 1650090838"