I have an Ubuntu VPS with Laravel v5.6 served with nginx, and I am trying to use React on the front-end. I don't know if this is possible what I want to do is:
use node and npm to build my front-end app locally,
generate the CSS and JS files and upload those already generated files to my VPS server,
the output should not change since as far as I know npm generates at JS and CSS files with your whole code in it
Thanks for the help, and if there is any suggestion for a different approach just let me know.
You should start to use a frontend bundling solution like webpack or parcel, they do exactly the same
If you generate your app with create-react-app it comes with webpack built-in
Related
I have two separate project, laravel and nuxt;
i want to, when i upload file from the laravel, it'll be stored on static folder of the nuxt project. Is there any way for that?
For that, you'll need to send your file upload to a CI that will inject it into the Nuxt project, and rebuild the whole Nuxt app.
Also, remember that static is not bundled via Webpack.
Meaning that it will be shipped raw: if it's uploaded while not being properly optimized, it'll be shipped as is (would be better suited into an /assets directory but still >> build time for the whole project required here).
Even hosting it on your Laravel server is more worth at this point.
TLDR: it's not worth to send it to Nuxt's static directory.
I recommend hosting it on a CDN or alike.
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 am working on a Laravel project and part of the app was converted to a Vue app. Ultimately, the blade file is reading from the source of /dist/app.js , which is generated after running npm run production and runs the whole Vue app. The company only wants 1 engineer to run deploys to ensure backend code doesn't get inadvertantly changed.
To make strictly frontend changes, can I technically have the src read off a CDN in the Blade file and then just remove the Vue app entirely from the github repo into it's own so I can continuously make changes on my own. That way, I can make changes and then upload the new bundle to the CDN without touching the backend repo. Is that doable?
I've a vuejs app builded with the latest vue-cli, the vuejs app runs ok with the development server and communicates with the laravel app, but now I'd prefer that laravel handle this static files...if I build the js files with yarn run build this generates me several files, I could add thems to my laravel homepage but I'm afraid that if in the future I make some change and build these files again, I could get different file names...
what is the best approach for this???...I've found several articles integrating vuejs and laravel but all these are using the vuejs tool incorporated with laravel
thanks so much guys
I have an application in which I am developing using Laravel + VueJs with Laravel mix (both back and front end within the same folder structure) and now I want to start using Quasar.
Is it possible to integrate the Quasar CLI together with the Laravel Mix and continue using the same folder structure? If so, how to generate the build script?
Will there be any changes in the deploy script?
I assume that Quasar CLI builds all assets into static files; js / css. My opinion is compiling Mix's assets first and pass the out put (js / css) to Quasar by configuring at quasar.config.js then running quasar build.
Or It might able to config quasar.config.js to load all Mix' assets.
this docs might help https://quasar-framework.org/guide/app-quasar.conf.js.html