Deploying Quasar with Firebase Hosting

Question

I'm having trouble deploying my quasar project to Firebase. It says the deployment was successful, but after two hours, this is what shows up on the webpage.

firebase.json

"hosting": {
   "public": "dist/spa",
   "ignore": [
     "firebase.json",
     "**/.*",
     "**/node_modules/**"
   ],
   "rewrites": [
     {
       "source": "**",
       "destination": "/index.html"
     }
   ]

routes.js

const routes = [
  {
    path: '/',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      { path: '', component: () => import('pages/PageUsers.vue') },
      { path: '/chat/:otherUserId', component: () => import('pages/PageChat.vue') },
      { path: '/auth', component: () => import('pages/AuthPage.vue') }

    ]
  },

  // Always leave this as last one,
  // but you can also remove it
  {
    path: '*',
    component: () => import('pages/Error404.vue')
  }
]

export default routes

I first ran quasar build, then firebase init, then firebase deploy yet nothing is showing up on the site yet. Any ideas to why this is happening?

Update: Now the same page is showing on http://localhost:8080/ instead of my project as well

Answer 1

If you build first, "firebase init" will overwrite your index.html.

1. Firebase init
2. Run quasar build
3. Firebase deploy

Did you try in this order?

I also had the same problem but, after I changed the order, then it worked as usual.

Answer 2

It is because Firebase is overwriting your index.html with its own index.html, to fix that:

1. run quasar build -m spa to generate the correct index.html

2. run firebase init and when it asks you to overwrite index.html select 'No' like this:

3. run firebase deploy

Answer 3

I ran into the same issue while setting up Quasar project with Firebase hosting. One thing I noticed was there was a new index.html generated during firebase init inside the public folder. After deleting public/index.html, the original index page displays properly.

Solution:

• Check if there is an index.html file generated in public folder
• Delete the file