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
Related
I started a Quasar V2 app using the quasar CLI with vite config and ssr build. I can't seem to return the firebase functions handler from dist/ssr/index.js as suggested in the docs.
I've tried this with the webpack Quasar V2 config and it works fine.
I ran firebase init then installed firebase-functions and firebase-admin in the root dir.
I changed the source of functions to dist/ssr where I built my ssr app. I also edited hosting to send requests to the function "handler".
firebase.json
"functions": {
"source": "dist/ssr",
"ignore": [
"node_modules",
".git",
"firebase-debug.log",
"firebase-debug.*.log"
]
},
"hosting": {
"public": "dist/ssr",
"rewrites": [
{
"source": "**",
"function": "handler"
}
],
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"]
},
I then returned the handler function, following the instructions from the quasar docs
server.js
import * as functions from "firebase-functions";
export const listen = ssrListen(async ({ app, port, ssrHandler }) => {
if (process.env.DEV) {
await isReady();
return app.listen(port, () => {
if (process.env.PROD) {
console.log("Server listening at port " + port);
}
});
} else {
return {
handler: functions.https.onRequest(ssrHandler),
};
}
});
I then ran "npm install" on both the root directory and the dist/ssr directory to make sure everything is fine.
then when I ran "firebase serve" I get back this result in localhost:5000 "Function us-central1-handler does not exist, valid functions are:" Whats going on :(
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 am building a static website with HTML, CSS & JS and hosted on firebase hosting and connected a custom domain. The only serverside function I need is to send mail from the contact form. For this, I am trying to use Firebase cloud function. I have initialized functions on the same project and trying to use firebase hosting rewrites to rewrite the request to mydomain.com/contact to the contact function. But when I try to access the mydomain.com/contact in the browser it shows the below 403 Forbidden error message.
Error: Forbidden
Your client does not have permission to get URL /contact/contact from this server.
firebase.json
{
"hosting": {
"public": "build",
"rewrites": [{
"source": "/contact",
"function": "contact"
}],
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
},
"functions": {
"predeploy": [
"npm --prefix \"$RESOURCE_DIR\" run lint",
"npm --prefix \"$RESOURCE_DIR\" run build"
]
}
}
The cloud function (not implemented the actual logic)
import * as functions from 'firebase-functions';
exports.contact = functions.https.onRequest((request, response) => {
response.send("<h1>Contact<h1>");
});
I am using Firebase spark plan.
This works for me:
"rewrites": [
{
"source": "**",
"function": "myApp"
}
]
And in the express function,
import * as functions from 'firebase-functions';
import express from 'express';
const app = express();
app.get('/contact', (req, res) => {
res.send("<h1>Contact<h1>");
};
export const myApp = functions.https.onRequest(app);
I had the same issue this week. I had a rewrite from /user to a function called user and I was getting the response Your client does not have permission to get URL /user/user from this server.
I just deleted the functions from the firebase console then deployed them again and now they work. There must be some occasional bug with deploying functions like this and/or using hosting rewrites where the rewrite path gets appended to the function url path on the server.
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.
I am using the Polymer starter kit as a reference for routing in a single page app. If I run the app on Cloud9 (the dev environment I am using) everything works as expected.
I run polymer build using the polymer-cli and then firebase deploy. The same app that runs with no issues on the Cloud9 instance produces multiple errors on Firebase Hosting.
Uncaught NotSupportedError: Failed to execute 'registerElement' on 'Document': Registration failed for type 'my-view1'. A type with that name is already registered.
The links are navigating as expected, but the console ends up loaded with errors like the one above. I'm guessing it has to do with the redirect to index.html in firebase.json.
firebase.json:
{
"database": {
"rules": "database.rules.json"
},
"hosting": {
"public": "build/bundled",
"rewrites": [
{
"source": "**/!{*.*}",
"destination": "/index.html"
}
]
}
}
polymer.json:
{
"entrypoint": "index.html",
"shell": "src/my-app.html",
"fragments": [
"src/my-app.html",
"src/my-view1.html",
"src/my-view2.html",
"src/my-view3.html"
],
"sources": [
"src/**/*",
"images/**/*",
"bower.json"
],
"includeDependencies": [
"manifest.json",
"bower_components/webcomponentsjs/webcomponents-lite.min.js"
]
}
EDIT: Here is the routing section of the starter kit
<script>
Polymer({
is: 'my-app',
properties: {
page: {
type: String,
reflectToAttribute: true,
observer: '_pageChanged'
}
},
observers: [
'_routePageChanged(routeData.page)'
],
_routePageChanged: function(page) {
this.page = page || 'view1';
},
_pageChanged: function(page) {
// Load page import on demand. Show 404 page if fails
var resolvedPageUrl = this.resolveUrl('my-' + page + '.html');
this.importHref(resolvedPageUrl, null, this._showPage404, true);
},
_showPage404: function() {
this.page = 'view404';
}
});
</script>
There is an importHref call in there, is there a better way to handle the routing here?
Any tips, tricks, or words of wisdom are greatly appreciated.
Did you use importHref? Your my-view1 has been registered multiple times. Check again to ensure that my-view1 is not being registered more than once somewhere in your code.