I'm using Laravel Nova v1.1.4 within docker container.
I created a new tool via nova:tool command. Everything seems to be ok but everytime I update my vue component (tool.vue) the application does not display the updated data.
I run "npm run dev" from within /nova-components/myComponent/ directory, compiling is working fine but the application does not get updated.
My webpack.mix.js is the following:
let mix = require('laravel-mix')
mix.setPublicPath('dist')
.js('resources/js/tool.js', 'js')
.sass('resources/sass/tool.scss', 'css')
I think is a "refresh" problem, in fact after "npm run dev" execution if I stop and restart the docker containres and refresh the web page then it displays the updated information I included in the vue componenet of the custom tool.
Do yuo have any idea to avoid containers stop/start?
Any help will be great.
Thanks,
MaxdB71
You need to either disabled your cache in Chrome(or your browser of choice):
Or you need to implement versioning:
https://laravel.com/docs/5.7/mix#versioning-and-cache-busting
If you have not done implemented one of these solutions you will simply get served the same file over and over until your cache expires.
Related
I am using remix and just created the most basic project by running npx create-remix#latest. Right out the gate, I get this in my console when running npm run dev.
Warning: Extra attributes from the server: class
It goes away after removing the <Scripts /> tag, but I think I need that?
That's a React error, it happens when you're hydration a server-side rendered HTML but the HTML doesn't match what React expected it to be when hydrating.
The most common reason for this to happen is when a browser extension is changing the HTML before React hydration process run.
Removing the Scripts components hide the error because you're not hydrating React client-side anymore.
I have developed a small appointment system using Laravel and Vue.js. For deployment purpose, this system has been deployed using Vapor(https://vapor.laravel.com/) and AWS. While the deployment has been successful i.e I can see the login page, login successfully and even perform some functions. However most of the navigation links are not working. The errors that I see in browser console : ChunkLoadError: Loading chunk XY failed at path https://hosturl/js/[file].js
Before deployment when I execute npm run production, I can see that files are being generated in root/public/js. But after deployment the system seems to be unable to find/access them. All the routing has been handled using vue router in the development.
Is this issue somehow related to webpack.mix.js or is the expected folder structure different after being deployed? Am I missing something important here that is needed for production? I am new to Vapor and AWS so help will be really appreciated.
I'm building a web app using Laravel 8.6, Vue 3.2, and hosting on AWS with Laravel Forge. Everything works fine locally and on staging. However, when I deploy the app to production, some people initially see a blank white screen. They don't see any errors in the console. This problem is fixed with a hard refresh on the browser. However, when I try to replicate this issue locally, I can't replicate it.
The only real difference between local and staging and production is that on production, I'm running "npm run prod", which runs "npx mix --production".
Could this be an error in the server configuration? Any idea how to solve?
I appreciate any comments or suggestions!
Could be related to the users in production having a cached copy of your assets, if not already, can you add to your webpack.mix.js file:
if (mix.inProduction()) {
mix.version();
}
To ensure that users are getting a fresh copy of your assets when you deploy to production (https://laravel.com/docs/9.x/mix#versioning-and-cache-busting )
I finally found the answer.
The problem was that Laravel Mix was adding a hash to app.js, but NOT adding it to the chunked bundles.
I needed to change up the webpack.mix.js file and add the chunkhash to the output. This ensured that the chunked files weren't brought in from disk cache.
For example:
mix.webpackConfig({
...
output: {
chunkFilename: '[name].js?[chunkhash]',
}
})
Note that I added the ?[chunkhash] after the filename.
Here was my inspiration: https://laracasts.com/discuss/channels/vue/laravel-vue-files-requiring-hard-refresh-even-when-caching-implemented
I'm deploying a Laravel app to Vapor and cache is automatically deleted right after the deploy. I also clear it manually via CLI just to be sure. Still, it's not running with the updated build because it can't find a Class that instead it's there (double checked the namespaces and everything else). On my local machine it's working fine, the class is found and so I can instantiate it.
I tried to clear every possible cache (route, config, view, also run a composer dump-autoload) but nothing seems to work. Any clue?
I already deployed successfully a Laravel and vuejs project to AWS.
I put the project and app.js everything, into ~/laravel then i created a symlink in /var/www/html/laravel/ that point to ~/laravel/public
It is working fine.
I got one problem, whenever i pull a new code including app.js from the branch in github. The code is updated, but when i go to the website, its not updating yet. Several hours later, its back to normal with my new updated code.
Its driving me nut cause i can not test it right away
any suggestion
Thank you
I encountered this behavior when the server was enabled OPcache.
try clear OPcache
https://jenssegers.com/77/clearing-php-s-opcache-with-cachetool
Adding a version number on your app.js every time you compile your assets should fix this. If you are using Laravel mix, simply add on webpack.mix.js file
if (mix.inProduction()) {
mix.version(); // this will add a version number to your app.js
// every time you do `npm run production`
// ex: app.js?id=b35f8fd52c344cb84a52
}