title: Best setup/workflow for testing and deploying an application using Google Firebase Hosting and Functions
body: <p>I built a small web application (www.suntax.de) with vuejs and hosted on Google Firebase. I use the Firebase Hosting, Database and Functions. I use Functions to do some calculation on the backend.</p>
  
  <p>Everything is running now, but I had some trouble getting there and some things I would like to improve regarding my workflow.
  Thus, I would like to explain you what I did and where I struggle now.</p>
  
  <p>First I set up the vuejs applicationd deployed it to firebase. I added my custom domain and everything was doing fine.
  Later I implemented the cloud function and want to make a call from my vuejs app.
  After <code>firebase deploy</code>, I can call this function in the browser and it just works fine:
  <code>https://us-central1-suntax-6d0ea.cloudfunctions.net/calcEEGcompensation?year=2013&amp;month=1&amp;size=10</code></p>
  
  <p>Now I thought, that I just call the URL of the function from my vuejs app. But then I got the following error message:
  <code>[Error] Origin * is not allowed by Access-Control-Allow-Origin.</code></p>
  
  <p>I was then reading that I had to add a <code>rewrite</code>section in the <code>firebase.json</code>:</p>
  
  <p>Now my firebase.json looks like this:</p>
  
  <pre><code>{
    "database": {
      "rules": "database.rules.json"
    },
    "hosting": {
      "public": "public",
      "ignore": [
        "firebase.json",
        "**/.*",
        "**/node_modules/**"
      ],
      // Add the following rewrites section *within* "hosting"
     "rewrites": [ {
        "source": "/calcEEGcompensation", "function": "calcEEGcompensation"
      } ]
    }
  }
  </code></pre>
  
  <p>Now I was able to call my firebase function with the following URL:
  <code>
  https://www.suntax.de/calcEEGcompensation?year=2013&amp;month=1&amp;size=10
  </code></p>
  
  <p>After integrating the above URL in my vuejs application, the application is running fine after deployment to firebase server.</p>
  
  <p>As I want to keep improving the application, I would like to test everything locally before deploying.</p>
  
  <p>I know that I can run firebase hosting and functions locally by:
  <code>firebase serve --only functions,hosting</code></p>
  
  <p>However, now my application has the hard coded call to my function <code>https://www.suntax.de/calcEEGcompensation?year=2013&amp;month=1&amp;size=10</code> and this again leads to the error <code>[Error] Origin * is not allowed by Access-Control-Allow-Origin.</code></p>
  
  <p>But also changing the URL to the local function 
  <code>http://localhost:5001/suntax-6d0ea/us-central1/calcEEGcompensation?year=2013&amp;month=1&amp;size=10</code>
  leads to the error message 
  <code>[Error] Origin * is not allowed by Access-Control-Allow-Origin.</code></p>
  
  <p>Some further reading brought me to the solution with <code>cors</code>. So I changed my function to:</p>
  
  <pre><code>const functions = require('firebase-functions');
  const cors = require('cors')({origin: true});
  
  exports.calcEEGcompensation = functions.https.onRequest((req, res) =&gt; {
      cors(req, res, () =&gt; {
          const yearOfCommissioning = req.query.year;
          const monthOfCommissioning = req.query.month;
          const pvsystemsize = req.query.size;
  
          ...
  
          res.send("hello");
      });
  });
  </code></pre>
  
  <p>This helped and everything works now:
  - The deployed application is still running fine.
  - I can run the application locally while calling the local function as well as the deployed function. I just have to change the URL of the function.</p>
  
  <p>But this is now my question:
  Can I solve this issue in a better way? If I test the vuejs application and the function locally, I have to change the function URL before deployment. And then I have to change it back while testing locally.
  I was not able to test my application and function locally without <code>cors</code>.</p>
  
  <p>My ideal solution would be to have a setup, that can be fully tested locally and which can be easily deployed with <code>firebase deploy</code> without any changes of URLs. Is this possible?</p>
  
  <p>Thanks and best regards,
  Christoph</p>