Setup for Quasar with PHP api for MySQL

dirkhd

Hey guys,

I have developed a Quasar SPA. I run the application on an Apache webserver and my PHP api is adressed via Axios for getting data from MySQL.
This all works fine on the actual webserver.

But I have no clue how I can integrate Quasar, PHP and MySQL for my local development. So far I run “quasar build spa” and transfer the output on the webserver (hosted at my provider).

But how can I integrate all this when running “quasar dev”? Normally, I would use XAMPP for a local environment for PHP and MySQL.

Thx a lot in advance!
Dirk

beets

@dirkhd Are you looking to setup a copy of the PHP api and MySQL locally, or do you just want to use the live API with local quasar dev?

dirkhd

@beets Good question First, I thought of what you have described firstly. But in fact your second thought (so using the local quasar dev and contacting the live API) would also be an idea (especially if the first one is quite complicated to install).

For the second I could just replace the URLs in my Ajax api calls by the remote server and manage the CORS probs, right?

dirkhd

Ah okay, but I would have to adapt the API URLs in a lot of VUE files …

beets

@dirkhd said in Setup for Quasar with PHP api for MySQL:

For the second I could just replace the URLs in my Ajax api calls by the remote server and manage the CORS probs, right?

Is your site at example.com and api at example.com/api ? If so, then luckily webpack server has an api proxy built in. This will remove the cors problem without having to set up a cors-stripping proxy on your server.

https://quasar.dev/quasar-cli/api-proxying
https://webpack.js.org/configuration/dev-server/#devserverproxy

If your api endpoint is api.example.com instead, I would probably just do something like this in quasar.conf.js:

build: {
  env: {
    API: ctx.dev
      ? '/api'
      : 'https://api.example.com'
  }
}

And use process.env.API in your axios calls, and use the same devServer proxy in the first method. Note, I’ve never had to use the proxy feature, but it should work in your case.

dirkhd

@beets Mhmm, okay, first of all thank you for this hint - I was not aware that there is an implemented functionality exactly adressing my issue.

Now I tried some combinations but so far it was not successful.

My Axios calls go to:

 this.$axios
        .post("../db/api.php", {
...

So it is a relative path and no own subdomain.

beets

@dirkhd So is it that your web app is at example.com/app and your api is at example.com/db ? If so, then maybe this will still work?

devServer: {
  proxy: {
    '/db': {
      target: 'http://example.com',
      changeOrigin: true,
    }
  }
}

I would probably prefer to use absolute urls instead of relative, since the automatic <base> tag quasar puts modifies the base url for ajax, I believe.

Is your site deployed on several domains where that would be unfeasible? If not, I would recommend you use the build -> env variable in quasar.conf.js, and then in your axios boot file (I assume you have one, if not we can make one easily) add

axios.defaults.baseURL = process.env.API

Edit: and change all your calls to :

 this.$axios
        .post("api.php", { // or db/api.php depending on what you set process.env.API to

dirkhd

@beets So, contacting the remote server now works

Despite using

this.$axios
        .post("../db/api.php", {
...

for the proxy I had to use following:

devServer: {
      https: false,
      port: 8080,
      open: true, // opens browser window automatically,
      proxy: {
        // proxy all requests starting with /api to jsonplaceholder
        '/db/api.php': {
          target: 'https://subdomain.example.com/api.php',
          changeOrigin: true
...

Thx again so much

beets

@dirkhd Excellent! Glad that I could help.

No More Posting New Topics!

Setup for Quasar with PHP api for MySQL