No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Setup for Quasar with PHP api for MySQL

    CLI
    2
    9
    1818
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • D
      dirkhd last edited by

      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 1 Reply Last reply Reply Quote 0
      • beets
        beets @dirkhd last edited by

        @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?

        D 1 Reply Last reply Reply Quote 0
        • D
          dirkhd @beets last edited by

          @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?

          beets 1 Reply Last reply Reply Quote 0
          • D
            dirkhd last edited by

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

            1 Reply Last reply Reply Quote 0
            • beets
              beets @dirkhd last edited by

              @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.

              D 1 Reply Last reply Reply Quote 1
              • D
                dirkhd @beets last edited by

                @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 1 Reply Last reply Reply Quote 0
                • beets
                  beets @dirkhd last edited by 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 
                  
                  D 1 Reply Last reply Reply Quote 1
                  • D
                    dirkhd @beets last edited by

                    @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 1 Reply Last reply Reply Quote 0
                    • beets
                      beets @dirkhd last edited by

                      @dirkhd Excellent! Glad that I could help.

                      1 Reply Last reply Reply Quote 0
                      • First post
                        Last post