CODEWITHSUNDEEP
firebasevue.jsfirebase-hostingquasar-frameworkquasar
JSON K.
JSON K.

Reputation: 131

Deploying Quasar with Firebase Hosting

enter image description here

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

Upvotes: 4

Views: 2335

Answers (3)

Fariborz Korevli
Fariborz Korevli

Reputation: 549

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: Step by step firebase

  3. run firebase deploy

Upvotes: 2

Hsiaoting Hung
Hsiaoting Hung

Reputation: 1

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

Upvotes: -1

Barney0409
Barney0409

Reputation: 21

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.

Upvotes: 2

Related Questions