Let's Learn The Integration of Quasar With Laravel
Laravel is a free, open-source PHP web framework, created by Taylor Otwell and intended for the development of web applications following the model–view–controller (MVC) architectural pattern and based on Symfony.
The Quasar Framework is a node.js based collection of tools for developing and publishing a website; for building and optimising a progressive web-app; a way to make native apps for Linux, MacOS and Windows with Electron; and even a system for creating mobile apps for Android and iOS with Cordova
Sometimes it becomes quite complex to use Quasar app with Laravel. Developers face a lot of issues to serve quasar application from laravel app, because of laravel and quasar both are served independently at different port ( By default - Laravel port : 8000 and Quasar port : 8080), that’s why it prevents requests being made from one origin to another.
In this blog we are trying to explain step by step process to serve Quasar app using Laravel app.
Before integrating quasar project with laravel, you need to make sure that you have installed vue-cli & quasar-cli globally.
Following commands will do this for you -
$ npm install -g @vue/cli
$ npm install -g @quasar-cli
For more information on vue-cli and quasar-cli, visit: quasar doc
Project Setup :
Before moving forward, firstly let us understand ‘How to integrate quasar app with laravel’. If you have already done, then you can skip these three steps.
If integration of quasar app with laravel is done, then it’s time to serve quasar app using laravel. For that, follow below steps :-
Step-1 :- Change directory to quasar project
$ cd QuasarProject
Step-2 :- Run the command
$ quasar build
( This command would create a build of your project in /dist directory in quasar root directory. )
Step-3 :- Change directory to public directory of laravel app
$ cd LaravelProject/public
Step-4 :- Create a link between quasar build and public directory of laravel app.
$ ln -s ../QuasarProject/dist/build directory name/link name
<b>For Example :</b> ln -s QuasarProject/dist/spa web
<p>( This command will link the production folder of quasar app which we want to serve to a newly created directory named web inside public directory. )</p>
Step-5 :- Update home (‘/’) route in web.php file as shown below -
This route would serve quasar app whenever you access home (‘/’) route of laravel app by redirecting you to ‘/web’ route that is the link we created in step 4.
You also need to modify .htaccess file situated in link directory (‘public/web’) as shown in the following figure.
You’re done. Now laravel app would serve quasar app on accessing home (‘/’) route.