im workin with LARAVEL and vue. i’have launched a project on digital ocean using ubuntun and nginx. Since the launch i’have add more features. Today i pulled those change on the production server, but they do not appear on the browser..
Using nano i’have chechked all the files, and yes, the files have changed but they do not reflect on the browser.
I’have used
npm run dev, npm run watch
php artisan config:cache, php artisan cache:clear but yet it doesnt seems to work
any idea ?
2
Answers
Did you clear your browser’s cache?
If you are working with Vue and/or Sass and therefore your files are changing from time to time, I suggest you to use
mix()
instead ofasset()
for cache busting. Otherwise all of your users will have to delete their cache (this is obv. not a good approach)https://laravel.com/docs/8.x/mix#versioning-and-cache-busting
Before you push your updated Vue files you need to run
npm run prod
to prepare your assets as production ready.Laravel uses
mix
to compile assets: https://laravel.com/docs/8.x/mixNow you have your freshly compiled assets in your
public/
directory, therefore you can pull to digitalocean machine. But now the browser might still be using cached asset (if name stays same, browser doesn’t fetch same asset again for a while)So, Mix Versioning comes to help: https://laravel.com/docs/8.x/mix#versioning-and-cache-busting
In your
webmack.mix.js
file you need to add.version()
at the end of mix piping. End result will be something like this;As you want to use versioning, now you need to resolve asset urls with
mix(...)
instead ofasset(...)
in your blade files;Now whenever you compile your assets, mix will assign them new version numbers and will at them to end of assets’ urls in your blade. Browser will understand there is a update in file (because of a different version number) and will fetch updated asset.