I created a simple dynamic firebase hosting with function, everything works fine when deployed but not when the page is served locally.
This is the log of firebase serve
i functions: Preparing to emulate functions.
i hosting: Serving hosting files from: public
✔ hosting: Local server: http://localhost:5004
✔ functions: serveLandingPage: http://localhost:5001/zonaskripsi18/us-central1/serveLandingPage
As we see, there is no error logs in console nor in firebase-debug.log but when I open http://localhost:5004 it shows An internal error occurred while connecting to Cloud Function "serveLandingPage"
This is the 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": "/**",
"function": "serveLandingPage"
}
]
}
}
This is the screenshot:
Firebase has been having issues with its local server lately, just deploy it and then run it to test it
If your functions project is typescript then you have compile the typescript to javascript file before serving the localhost.
cd functions
tsc
Related
I installed stripe/firestore-stripe-payments extension using Firebase Console (https://firebase.google.com/products/extensions/stripe-firestore-stripe-payments) and it works fine.
However, I wanted to install the extension locally so I can have a full testing environment using Firebase Local Emulator Suite.
The issue is that whenever I try to run firebase ext:install stripe/firestore-stripe-payments using both firebase-tools 11.8.1 and 11.14.1, it shows the following error:
I tried looking online but it seems that this error is not common.
Here's my firebase.json:
{
"database": {
"rules": "database.rules.json"
},
"functions": {
"ignore": [
"node_modules",
".git",
"firebase-debug.log",
"firebase-debug.*.log"
],
"predeploy": [
"npm --prefix \"$RESOURCE_DIR\" run lint",
"npm --prefix \"$RESOURCE_DIR\" run build"
],
"source": "functions"
},
"emulators": {
"auth": {
"port": 9099
},
"functions": {
"port": 5001
},
"database": {
"port": 9000
},
"ui": {
"enabled": true
},
"firestore": {
"port": 8080
},
"storage": {
"port": 9199
},
"hosting": {
"port": 5000
},
"pubsub": {
"port": 8085
},
"eventarc": {
"port": 9299
}
},
"remoteconfig": {
"template": "remoteconfig.template.json"
},
"firestore": {
"rules": "firestore.rules",
"indexes": "firestore.indexes.json"
},
"storage": {
"rules": "storage.rules"
},
"hosting": {
"public": "./web/build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
Thank you in advance
The v11 version of firebase-tools works quite differently to previous major versions.
To run locally, you will need to make a few additions.
1). Add an extensions object to your firebase.json and use a relative path to point to the route of the stripe extension (basically where the extension.yaml lives).
"extensions": {
firestore-stripe-payments: "../path-to-extension-yaml"
}
2). Next you will require a new folder to host your extension configuration.
Add a new folder called "extensions" in the same directory as your firebase.json.
Create new files for local config (this must match the extension you are attempting to emulate).
For example:
firestore-stripe-payments.env.local for main configuration
firestore-stripe-payments.secret.local for secrets
LOCATION=us-central-1
PRODUCTS_COLLECTION =products
etc...
3). Finally, run firebase emulators:start -P ${project_id}, it is recommended to use the prefix demo-, as in demo-project` to avoid emulating any production services.
For more guidelines with Stripe, the official repository has an example or extensions tests https://github.com/stripe/stripe-firebase-extensions/tree/next/firestore-stripe-payments/_emulator
I fixed the error by specifying the exact version, according to this GitHub comment.
The latest version can be found as version in extension.yaml in the official repository, which "source code" link in Firebase's extension page can refer to it, in my case:
https://github.com/stripe/stripe-firebase-extensions/blob/master/firestore-stripe-payments/extension.yaml
So, I used this command and it worked!
firebase ext:install stripe/firestore-stripe-payments#0.3.1
It took care of the firebase.json and extensions/firestore-stripe-payments.env automatically.
If you already installed the extension via console.firebase.google.com, use the following command to import the configuration:
firebase ext:export --project=XXXX
Then, override any attribute in extensions/firestore-stripe-payments.env.local as #darren-ackers mentioned.
There's a pending PR that covers most of these steps in addition to webhook configuration, here's the relevant file (README):
https://github.com/stripe/stripe-firebase-extensions/pull/436/files
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
The issue:
I have a web project hosted on Firebase that deploys fine. I want to add a new site to the same project. Firebase fails to deploy went target is set.
Step to reproduce
Update Firebase CLI to 9.16.0
Create new site on Firebase hosting console. Name: autoscrib-testv2
Run firebase target:apply hosting test autoscrib-testv2
.firebaserc gets updated to:
{
"projects": {
"default": "autoscrib"
},
"targets": {
"autoscrib": {
"hosting": {
"test": [
"autoscrib-testv2"
]
}
}
}
}
Update firebase.json to
{
"database": {
"rules": "database.rules.json"
},
"hosting": {
"target":"test",
"public": "dist",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
],
"headers": [
{
"source": "/sw.js",
"headers": [
{
"key": "Cache-Control",
"value": "no-cache"
}
]
}
]
},
"storage": {
"rules": "storage.rules"
}
}
** Deploy Emulator works fine **
Run firebase emulators:start --only hosting:test
website deploys on localhost:5000
Error Message
Run firebase deploy --only hosting:test
Process stops while uploading files and show:
Task 38b07412931a6e5cf159943f5f46b65148978924d7f49bab13392fafd8b168d8 failed: retries exhausted after 6 attempts, with error: The "path" argument must be of type string. Received undefined
** Website deploys OK if no target is created **
Problem was solved by running firebase init. Issue was generated by cli update.
I´m trying to deploy my code to two different Firebase-projects, one for development and one for production.
The my-app-dev project was already included and working, so I added the my-app (for production) with firebase use --add and selected the my-app.
This is how my Firebase-config looks now:
.firebaserc
{
"targets": {
"my-app-dev": {
"hosting": {
"app": [
"my-app-dev"
]
}
}
},
"projects": {
"default": "my-app-dev",
"prod": "my-app"
}
}
firebase.json
{
"hosting": [
{
"target": "app",
"public": "dist/app",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
],
"functions": {
"predeploy": [
"npm --prefix \"$RESOURCE_DIR\" run lint",
"npm --prefix \"$RESOURCE_DIR\" run build"
]
}
}
As long as I deploy to my default project, everything works fine, but when I try to firebase deploy -P prod it shows the following error:
Deploy target app not configured for project my-app. Configure with:
firebase target:apply hosting app <resources...>
I tried to find some more information about this command, but still don´t know what to put for resources. Overall I feel like the .firebaserc has a very confusing structure.
I had the same problem but in a different fashion.
The project I have is an Angular 11 project, which has 4 different environments - the same behaviour of deploying to the default project (env) was fine but as soon as I tried to deploy to a different environment (firebase project), it failed with the same error:
Deploy target ___ not configured for project ___. Configure with:
I resolved this by adding to my .firebasesrc > targets:
{
"projects": {
"default": "default-project"
},
"targets": {
"default-project": {
"hosting": {
"frontend": [
"default-project"
]
}
},
"staging-project": { // Added this entry.
"hosting": {
"frontend": [
"staging-project"
]
}
}
}
}
According to this comment in GitHub it cannot be done without a "hacky" method like swapping the firebase.json programmatically during deploying.
Right now the Firebase CLI is built to treat projects as anonymous
environments that are functionally identical. This is important to be
able to deploy the same assets to multiple projects without having to
alter the code (including in firebase.json).
To achieve what you want, you'll need to set up a dev and prod folder,
each with their own firebase.json and each with a target only for that
specific project. Deploying different assets to different projects is
not supported now and is unlikely to be supported in the future
(however, we may allow configuring the location of firebase.json via a
flag at some point).
Fairly new to Firebase (and love it), but have scoured the web and cannot find a similar issue with a valid solution.
I am using 2 firebase.json files, 1 for my client and 1 for my server (both express apps). They both deploy a function each to a single firebase project.
Note: They are both express apps (client side is ssr react app, server side is node js api).
The problem I am having is that for the life of me, I cannot seem to redirect the /api path to my server firebase function.
This is my client-side firebase.json:
{
"hosting": {
"public": "dist",
"rewrites": [
{
"source": "/api{,/**}",
"function": "server"
},
{
"source": "**",
"function": "client"
}
],
"ignore": ["firebase.json", "**/.*", "node_modules/**"]
},
"functions": {
"source": ".",
"predeploy": ["npm --prefix \"$RESOURCE_DIR\" run lint", "npm --prefix \"$RESOURCE_DIR\" run build"]
}
}
And this is my server (api) firebase.json:
{
"hosting": {
"public": "lib",
"rewrites": [
{
"source": "**",
"function": "server"
}
],
"ignore": ["firebase.json", "**/.*", "node_modules/**"]
},
"functions": {
"source": ".",
"predeploy": ["npm --prefix \"$RESOURCE_DIR\" run lint", "npm --prefix \"$RESOURCE_DIR\" run build"]
}
}
Whatever I do, when I navigate to www.mydomain.com/api it is only rendering the client side app not the API! Yet I have both the client & server functions showing in my Firebase functions dashboard.
So a couple of questions:
1) Why is this happening, is there something wrong with my firebase config?
2) Is it ok to use 2 firebase.json files for 1 project or preference to separate these into multiple projects? If so, why?
Thanks