I like to use Live Edit feature, however, it seems to me it only works with regular .html files, however, none of the known to me ways work with Laravel .blade.php files. Google didn't answer.
Is there really no way to do so?
For Laravel projects, you can use BrowserSync to automatically refresh websites when you make changes to your template files. Support for BrowserSync comes out of the box with Laravel Mix. To use this feature, all you have to do is go to your webpack.mix.js file and add the mix.browserSync() function call. If you're using Laravel Valet or something similar to get pretty URLs, you can pass in a URL as an argument to proxy.
mix.browserSync();
// OR
mix.browserSync('my-domain.test');
Documentation: Compiling Assets (Mix)
Related
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 ?
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/mix
Now 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;
mix.js('resources/js/app.js', 'public/js')
.version();
As you want to use versioning, now you need to resolve asset urls with mix(...) instead of asset(...) in your blade files;
<script src="{{ mix('/js/app.js') }}"></script>
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.
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 of asset() 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
I work on a single-page application written in Vue.js 3 and built by Vue CLI 5 (Webpack 5). The app is being served from a Laravel app which is deployed to AWS by Laravel Vapor. This tool also uploads all static assets (including JS chunks) to AWS S3 and make them available via CloudFront.
I want to load all static assets used in the Vue.js app from this CDN. The URL of the CloudFront distribution is available at build time in ASSET_URL environment variable. I have written my own asset functions in both TS and SCSS which are able to resolve asset paths properly for both local development and production environment. I use these functions whenever I write a URL of a static asset (image, font, etc.) in either .scss or .vue file and everything works fine.
But I am not able to make Vue.js app load JS chunks from CDN. When I modify publicPath option in vue.config.js, Vue Router gets broken. If I try to change output.publicPath directly in Webpack config, I get an error from Vue CLI saying that I cannot modify it directly.
So I have written a script that rewrites all URLs pointing to static assets in the generated index.blade.php file (similar to index.html in a typical Vue.js project) and initial JS chunks are loaded from CDN now. However, all lazy-loaded chunks are still being loaded from the server where Laravel app is deployed. It looks like these paths are somehow defined the generated app.f73fadef.js file.
So my question is, how can I load all static assets (including JS chunks) from CDN while serving an app from a dynamic web server? Is it even possible to do this just by changing Vue CLI or Webpack config and without any dirty "hacks" (like modifying generated JS files)?
I have finally been able to solve this. The problem was caused by the following router initialization code:
createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
});
Once I remove the parameter of createWebHistory function, I was able to set publicPath option in vue.config.js to my CloudFront distribution URL and everything started to work properly. I was even able to remove my own script that changed the URLs in index.blade.php since it was no longer needed.
I'm trying to integrate an existing React project with Laravel. I'm using Laravel Mix to compile the assets.
I managed to get everything going, besides one thing: I do not know how to make Mix read constants from the .env file, which are needed for the Webpack build process.
I'm using Firebase, and the various keys are kept in this .env file. Of course i could work around it, but i would like to make it properly.
I do not see anything in the webpack.mix.js file that implies this functionality. How can it be done?
You can prefix your keys with MIX_ and access them via process.env once you recompile your js.
So having mix.js('resources/assets/js/app.js', 'js'); or mix.react('resources/assets/js/app.js', 'js'); will work fine.
You will also need to restart any running watch tasks for changes to take effect.
https://github.com/JeffreyWay/laravel-mix/issues/1096#issuecomment-320328087
https://laravel.com/docs/5.4/mix#environment-variables
I've SSH into the server and into the Laravel folder. I updated one of the html footer files but the changes aren't reflected on the website. I feel like I probably need to recompile something.
I tried deleting and re-creating the .env file (I backed it up first).
I've tried running the following commands:
php artisan clear-compiled
php artisan optimize
php artisan cache:clear
The only way I can seem to update the site is by updating the main.min.js file, located at /laravel/public/assets/js/main.min.js which is a terrible way to update the site.
How do I force Laravel to recreate this file or recompile the site based on changes I made to html template files within the site?
What am I missing here? I don't have any Laravel experience and am trying to update this site for a client.
edit:
I think I need to clarify a bit more...
The site appears to be rendered from this file: /public/assets/js/main.min.js
Most of the site's homepage, for example, is located in this js file. But the file is minified and therefore unwieldy to edit directly.
I am assuming (and I could be completely wrong here) that the file is generated from the html files located in the Laravel folder. To support this notion, I have found html files in other directories that correspond to the html located in the main.min.js file.
My assumption is that the previous developer would update the html files and then run something to compile the site into javascript files. But maybe this has nothing to do with Laravel, per se, and more to do with some frontend framework?
Try clearing the cached views...
php artisan view:clear
Laravel assets reside in
resources/assets/js
of your root directory you can have look their
if your file main.js is build using laravel mix have a on webpack.mix.js which compiles all your files you can get idea from that. make sure to run
npm run prod
if you change any file
Hope this helps?
I'm working on creating a new project in Laravel 4. I have a tiny bit of experience in Laravel 3, in which I got used to the assets system. I'm now having a lot of trouble figuring out how to load CSS and JS files in the new system.
I believe I should be using Composer PHP, but I'm not sure how. Where do I put the actual .css and .js files? And then how do I load them with Composer to be utilized in the Laravel project?
I know there are outside plugins like Best Asset, etc. that are written to replicate the Assets system of Laravel 3, but I was hoping to understand the new system and not have to use an outside plugin.
Any help? Thanks.
You don't need Composer for your css/js assets. You can use assets pretty much the same as with Laravel 3
You can just place them in your public folder and reference them in your views. You can use plain html, or use the HtmlBuilder: HTML::style('style.css') and HTML::script('script.js')
You must take care of case sensitive.
This class must write with uppercase.
HTML::style('style.css');
HTML::script('script.js');
Laravel stylesheets and javascript don't load for non-base routes