Firebase Hosting 400 Bad Request

Question

Im trying to get firebase hosting setup for my project. I've deployed to https://budyeez-app.web.app/

Im using the vue.js framework to build my app so there is an index.html file in my public folder. All the vue content is loaded into that file to be rendered. Everything works fine on localhost but when I try to host the site on Firebase none of the vue content will load. If I write content directly into the index.html file it will load which explains why the page title works. Any ideas on how to fix this?

Explorer

web_app/firebase.json

{
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "functions": {
    "predeploy": [
      "npm --prefix \"$RESOURCE_DIR\" run lint"
    ]
  },
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  },
  "storage": {
    "rules": "storage.rules"
  }
}

web_app/public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>Budyeez</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
    <script src="https://kit.fontawesome.com/3797ae5e09.js" crossorigin="anonymous"></script>
  </head>
  <body>
    <h3>This is a test</h3>
    <noscript>
      <strong>We're sorry but web_app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

We will need to know exactly what your public folder looks like, how exactly you are making the request, and what you expect a given URL to do after you complete a deployment from that folder. — Doug Stevenson
My public folder contains the index.html folder. I'm building a vue.js application so all the content is loaded into the index.html by vue. None of the vue content is being loaded to the page but if I write in content directly in the index.html file it is rendered on the page. When I npm run serve everything works fine. This issue is specifically when trying to use firebase hosting. — Raine Petersen
Please edit the question to contain all your observations (don't just add a comment). We need to see enough information, including all relevant code, to be able to reproduce the issue exactly as you see it. Please read: stackoverflow.com/help/minimal-reproducible-example — Doug Stevenson

samthecodingman samthecodingman · Accepted Answer · 2020-01-02T06:02:38

Update your firebase.json to the following (edit out my comments):

{
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "functions": {
    "predeploy": [
      "npm --prefix \"$RESOURCE_DIR\" run lint"
    ]
  },
  "hosting": {
    "public": "dist", // <-- CHANGED: hosting deploy directory to Vue's build directory
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "predeploy": [
      "npm run build" // <-- CHANGED: Before deploying, automatically build Vue project
    ]
  },
  "storage": {
    "rules": "storage.rules"
  }
}

Firebase Hosting 400 Bad Request

1 Answers