I'm having this view on my webpage. It says, it was successfully deployed but it's not showing my SPA.
config:
"hosting": {
"public": "dist/spa-mat",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
Im using default router.js setup
{
path: '/',
component: () => import('layouts/default'),
children: [
{ path: '', component: () => import('pages/index') }
]
}
Steps taken:
(firebase already installed an im already logged in)
1. quasar build - to build quasar app for prod
2. firebase init
- `dist/spa-mat` as directory
3. firebase deploy
Any Quasar dev who has an idea how to deploy in Firebase hosting? I think I did everything right but my SPA is not showing.
Follow the official docs for Deployment of SPA in Quasar. There's a guide there how to deploy in Heroko, Now, etc.
If you're doing it right, give it several minutes to an hour.
Related
I come from vue 2 and when I installed firebase to vue 2 i just typed "npm install firebase" and firebase did the magic in the background and created all the files needed e.g. for hosting, security rules etc. But with Vue 3, when I try to install firebase by typing "npm install firebase", no fire is created.
Do I do something wrong or does a working work around for this problem exist?
Thanks
Chris
I created the files now manually. It depends on the setup you need. Since I use hosting and the firebase database I created the following files:
*** (in the root folder) .firebaserc (you can find your project id in your project settings in your firebase project)**
{
"projects": {
"default": "your-project-id"
}
}
*** (in the root folder) firebase.json**
{
"firestore": {
"rules": "firestore.rules",
"indexes": "firestore.indexes.json"
},
"hosting": {
"trailingSlash": false,
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
Please be aware that the second source code describes the following:
the file for the firestore rules is: firestore.rules
the file for the indexes is: firestore.indexes.json
there are no trailing slashed in the URL
the public folder is (not public): dist
this config is for a single page application
I have 2 subdomains configurated on firebase, myapp1.mydomain.cl and myapp2.mydomain.cl.
My default site url provided by Firebase are mydomain-1100.web.app
Im trying to deploy myapp1 into a subdomain with the following command
firebase target:apply hosting myapp1 myapp1.mydomain-1100
firebase deploy --only hosting:myapp1
When i do that, cli throw me the next error Error: HTTP Error: 404, Requested entity was not found.
This is my firebase.json
{
"hosting": {
"target": "myapp1",
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
What i'm doing wrong? i search for hours and i dont found a solution for my case,
i really appreciate constructive answers.
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
If you build first, "firebase init" will overwrite your index.html.
Firebase init
Run quasar build
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.
It is because Firebase is overwriting your index.html with its own index.html, to fix that:
run quasar build -m spa to generate the correct index.html
run firebase init and when it asks you to overwrite index.html select 'No' like this:
run firebase deploy
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
I have an Angular web application called "my-app".
I created a project on Google Firebase and called it "my-app" as well.
I deployed the Angular application to Firebase project "my-app". As a result, a site "my-app-*****" appeared. My app was accessible on "my-app-*****.web.app" address.
Then I created the second site in Hosting of the same project. I called it "my-app-dev". It got an address but was empty because nothing was deployed yet.
I followed instructions from google: https://firebase.google.com/docs/hosting/multisites
And even one question on StackOverflow: Firebase hosting deploy to other site
I added targets and modified firebase.json. In the result, they looked like that:
firebase.json file content:
"hosting": [
{
"target": "prod",
"public": "www",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
},
{
"target": "dev",
"public": "www",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
]
}
.firebaserc file content:
{
"projects": {
"default": "my-app-*****"
},
"targets": {
"my-app-*****": {
"hosting": {
"dev": [
"my-app-dev"
],
"prod": [
"my-app-*****"
]
}
}
}
}
But I faced an error when I executed command firebase deploy --only hosting:dev
However, when I executed command firebase deploy --only hosting:prod, everything was deployed without errors.
As a result, I am able to deploy my project to "my-app-*****" site, but I could not deploy my project to "my-app-dev" site. I want both sites to use same built files, that is why "public" was pointing to the same directory "www". Both sites located in the same Hosting of "my-app" project on Google Firebase.
Can someone please help me and explain what have I done wrong?
I have my firebase cloud functions created with region: asia-northeast1, I am trying to trigger one of the functions using the firebase.json file.
"hosting": [
{
"target": "ksite",
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{ "source": "**", "function": "ssr" }
]
}
]
Unfortunately this triggers the function with region of us-central1 https://us-central1-site.cloudfunctions.net/ssr/ instead of asia-northeast1 something like this https://asia-northeast1-site.cloudfunctions.net/ssr/
How and why is this happening?
Here is my function:
// For Universal Rendering
export const ssr = functions.region('asia-northeast1').https.onRequest((request, response) => {
require(`${process.cwd()}/dist/ksite-webpack/server`).app(request, response);
});
Firebase Hosting currently only supports the proxy of URLs to functions deployed to us-central1, as mentioned in the documentation:
Important: Firebase Hosting supports Cloud Functions in us-central1 only.
And also here in the docs:
Important: If you are using HTTP functions to serve dynamic content for Firebase Hosting, you must use us-central1.