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
Related
I've been using create-react-app for quite a while and I recently need to build a backend via laravel. Is it possible to use create-react-app, it's npm run start development workflows, etc to communicate with a laravel backend?
I can see that laravel already has a package.json file and from what I can tell, the react packages do not use create-react-app. I have seen an npm package, but it doesn't appear to be current and is probably not compatible with Laravel 7.x.
That's not needed if you are going to build the SPA and the backend in the same directory structure because laravel has its own workflow using Laravel Mix and you can take advantage of the framework Scaffolding but if you are planning to only connect to an existent Laravel Backend you can create your react app with create-react-app command and connect to laravel using axios,fetch or something like that
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 integrated real chat system develop from VUE JS in my project developed in Laravel framework.
All Vue components need to be compiled down to JavaScript locally. Laravel does that automatically out of the box and you end up with a single static asset app.js. You need to use npm -command to do that see Laravel documentation for details. Then you just deploy single static app.js with you code.
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
I am currently using Webpack with Laravel to manage dependencies on a new project. My current workflow looks like this:
npm install whatever-package
require('whatever-package'); (in frontend.js)
GulpFile.JS >
elixir(mix => {
//the core scss file. contains bootstrap and vendor stuff.
mix.sass('frontend.scss')
.webpack('frontend.js');
}
run gulp
Frontend.js is then included in my PHP template. This would work great for a single page application, but if I want to have one javascript file, and multiple web pages what technique should I be using to pull in javascript for other pages?
Should I have multiple JS files all webpacked with Elixir? Or what is the next step to require in the right files?
i.e. does Webpack support a single entry point where I can start to load other scripts via data attributes? I've used this technique with requireJS previously, and just trying to wrap my head around the best way to do this with Webpack.