Search code examples
firebasevue.jsfirebase-hosting

Firebase Hosting deployment includes dev files

I have a Vuejs/Firebase app that I am deploying through Firebase Hosting. My problem is that in the the deployed version, in the Sources tab of the Chrome Dev tools, I find a folder called guava, which is the name of the app's version, that contains most of my dev files, including the src folder with all vue components and my js files (as shown in the picture below).

enter image description here

I have spent hours debugging this without success. This is what I have tried:

  1. I am using "run npm build" and then "firebase deploy". I made sure in the process that there is not issue with wrong git branch or wrong Dist folder
  2. The dev files are not included in my Dist folder after the build
  3. I find no indication in the build logs that these files would be included
  4. I have cleared the browser cache, tried another browser, but the folder is always there
  5. I have cleared the Dist folder, deployed, then redeployed a new build to clear Firebase Hosting cache
  6. this is my firebase.json file, where I have tried to ignore the files but without success:
{
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "hosting": {
    "public": "dist",
    "target": "web",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**",
      "**/guava/**",
      "**/src/**"
    ],
    "rewrites": [
      {
        "source": "/guava{,/**}",
        "destination": "/404.html"
      }
    ]
  },
  "storage": {
    "rules": "storage.rules"
  },
  "functions": {
    "source": "functions"
  },
  "extensions": {
  }
}

Thanks for any help!

Solution

  • You can disable source maps from being generated when producing production builds by using the productionSourceMap config element in your vue.config.js file:

    // vue.config.js
module.exports = {
  ...
  productionSourceMap: false,
  ...
};