About Quasar:

Quasar is one of the best frameworks. that provides you the facility to create the apps with the help of using the same codebase. Like Responsive  Single Page Apps, Server-side Rendered apps, Progressive web apps, Hybrid Mobile apps and Electron apps,

Quasar has a built-in UI library including Material and IOS theme. it is just like a dream All you ever require to serious about is creating your idea, if you do it correctly, with the use of a single command you can easily create your project for some different platforms. So it is a good thing. Quasar frequently does the work for 90% of the use cases or much more and it still growing day by day.

Quasar Framework is based on node.js it is a bunch of tools that provides the easy way to do some important tasks such as:

  • Development of website,
  • Creating and optimizing a progressive Web Applications,
  • Provide a framework to create native applications for Linux, macOS and Windows including Electrons,
  • Quasar is acts like a system for building Mobile Applications forAndroid and iOS with Cordova.

Laravel is developed by Taylor Otwell it is an open-source PHP framework and it follows the architectural pattern of Model View Controller (MVC)  basically it was designed for the development of web applications.

How to Serve Quasar App From Laravel:

It is a very complicated task to utilize Quasar Applications with the Laravel. The reason behind it that Quasar and Laravel both are independently delivering their services at distinct port (quasar port is: 8080 and Laravel port is: 8000) there for it secures the request being made from one point to some other point.

In this article, we will discuss the whole process to serve Quasar Application using Laravel Application.

Requirements :

First of all, you need to install vue-cli and Quasar-cli globally. You have to use the Following commends for installation.-

  • $ npm install -g @vue/cli.
  • $ npm install -g @quasar-cli.
(A) Project Setup :

Now we discuss the way “How to integrate Quasar Application with Laravel

Step:- 1. Setup first for new Laravel project:

$ composer create-project --prefer-dist laravel/LaravelProject 

Step:- 2. Setup second for new Laravel project:

  1. Change directory to your quasar project
    • $ cd LaravelProject
  2. Create a new quasar project
    • $ quasar create QuasarProject

Step:- 3. Setup third install dependencies for new Quasar project:

  1. Change directory to your quasar project
    • $ cd QuasarProject
  2. Install npm
    • $ npm install
  3. Start development server for your quasar project
    • $ quasar dev

Now in this step, you have perfectly Integrated Quasar project with Laravel Application.

Important Note:- When Quasar Application is utilizing API which is built in your Laravel Application according to the following way shown in the below image:

then, you may face the issues of CORS,

This issue can be short out by 2 techniques: There are two methods to resolve this issue

  • These two lines can be added in the configuration file of your Laravel project.

  • You can easily adopt barryvdh /Laravel-cors package that would allow to execute API from one point to another.
 (B) Serve Quasar App :

After the Integration of Quasar Application with Laravel, The next step is to Serve Quasar Application by using Laravel. In according to following points:-

Step-1:- Change directory to quasar project
  • $ cd QuasarProject
Step-2:- Run the command
  • $ quasar build

( With the help of this command you 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

We can take an example:- In -s Quasarproject/dist/spa web

(With the help of this command we can easily link the Quasar Application’s production folder which we want to serve to a newly created directory named web inside public directory.)

 Step-5:- Update home (‘/’) route in web.php file as shown below -

Whenever you access the home(‘/’) rout of laravel application through redirecting you to ‘/web’ rout this rout would Serve Quasar Application.

Furthermore, you have to update .htaccess file  You also need to modify .htaccess file established in link directory (‘public/web’) as we can see in the following image.

Finally you have done.so Now Your Laravel Application would serve would perfectly serve Quasar Application on accessing home(‘/’) route.

Related Posts

API Integration

10 Best API for Real Estate Business Websites

The real estate field is one of the most rapidly growing ones. Tech startups have changed the way consumers used to buy and sell a property. Their influence is obvious, 51% of home buyers in 2019 Read more…

API Integration

How API Trend has changed Web Development in 2019

API design trends are popular in 2019, some API like OpenAPI Structure is famous among developers. OpenAPI allows you to map out and describe the entirety of a REST API, from endpoints to authentication. Not Read more…

API Integration

Let’s understand how Opentok Restful API Works

  The mobile application market has gained an amazing fam in the ongoing years. The explanation for this could be the latest features that are added to your cell phones. Regardless of whether these features Read more…