I want to debug a Firebase application in VSCode with breakpoints, but when I setup a breakpoint and start the debugging with F5, the debugger is attached but the breakpoints are greyed out and the popup says (on hovering over the breakpoint):
This is my launch.json:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "attach",
"name": "Attach",
"port": 9229,
"restart": true,
"skipFiles": ["<node_internals>/**"]
}
]
}
I can test my app with
firebase emulators:start --inspect-functions
in my local browser when I open
http://127.0.0.1:5000
I'm developing under windows inside an Ubuntu WSL (version 2).
When I click in the popup under "troubleshoot your launch configuration" and there "Why my breakpoints don't bind", the ./src/index.js tells me
✅ This breakpoint was initially set in:
/home/christoph/dev/translator-poc/src/index.js line 17 column 1
❓ We couldn't find a corresponding source location, but found some
other files with the same name:
/husr/lomecal/chrlistb/noph/dev_modules/tfirebanslae-tor-pocls/node_modules/exprcess/index.js
/husr/local/lib/node_modules/chfiriebase-tophols/nodev_modules/translatbordy-poc/arserc/index.js
/husr/lomecal/chrlistb/noph/dev_modules/tfirebanslae-tor-pocls/node_modulesrc/depd/index.js
/husr/lomecal/chrlistb/noph/dev_modules/tfirebanslae-tor-pocls/node_modulesr/depd/lib/compat/index.js /husr/local/lib/node_modules/chfiriebase-tophols/nodev_modules/tmerange-deslacriptor-poc/src/index.js
...
I'm using webpack. It compiles /src to the /public directory.
This is my webpack.config.js
const path = require('path');
module.exports = {
// The entry point file described above
entry: './src/index.js',
// The location of the build folder described above
output: {
path: path.resolve(__dirname, 'public'),
filename: 'bundle.js'
},
// Optional and for development only. This provides the ability to
// map the built code back to the original source format when debugging.
devtool: 'eval-source-map',
};
and my firebase.json:
{
"hosting": {
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
},
"emulators": {
"singleProjectMode": true,
"hosting": {
"port": 5000
},
"ui": {
"enabled": false
},
"firestore": {
"port": 8080
},
"functions": {
"port": 5001
}
},
"firestore": {
"rules": "firestore.rules",
"indexes": "firestore.indexes.json"
},
"functions": [
{
"source": "functions",
"codebase": "default",
"ignore": [
"node_modules",
".git",
"firebase-debug.log",
"firebase-debug.*.log"
],
"predeploy": [
"npm --prefix \"$RESOURCE_DIR\" run lint"
]
}
]
}
VSCode Version: 1.74.0
Firebase Version: 11.17.0
Node.JS Version: v16.4.0
Java Version: openjdk version "19.0.1" 2022-10-18 / OpenJDK Runtime Environment (build 19.0.1+10-Ubuntu-1ubuntu122.04)
Related
Hi I have completed the firebase init and firebase deploy --only hosting. It shown the successful modal message of
"Welcome
Firebase Hosting Setup Complete
You're seeing this because you've successfully setup Firebase Hosting. Now it's time to go build something extraordinary!"
But it does not show my website however.
I have tried Firefox and IE Edge but still shows the same message.
Please see my firebase.json file:
{
"functions": [
{
"source": "functions",
"codebase": "default",
"ignore": [
"node_modules",
".git",
"firebase-debug.log",
"firebase-debug.*.log"
]
}
],
"database": {
"rules": "database.rules.json"
},
"firestore": {
"rules": "firestore.rules",
"indexes": "firestore.indexes.json"
},
"hosting": {
"public": "dist/cook4u",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
},
"storage": {
"rules": "storage.rules"
},
"emulators": {
"auth": {
"port": 9099
},
"functions": {
"port": 5001
},
"firestore": {
"port": 8080
},
"database": {
"port": 9000
},
"hosting": {
"port": 5000
},
"pubsub": {
"port": 8085
},
"storage": {
"port": 9199
},
"eventarc": {
"port": 9299
},
"ui": {
"enabled": true
},
"singleProjectMode": true
},
"remoteconfig": {
"template": "remoteconfig.template.json"
}
}
I have tried the solutions in stackoverflow and other websites. It does not solve my problem. I have confirmed that my index.html and all my source code is in my public folder. Also, how to determine which page is the landing page of my website?
Here is my public folder. Is there anything I am missing?
Dist folder screenshot:
dist folder screenshot
cook4u folder screenshot
Here is the output when I run the deploy command:
hosting[cook4u-b3b8d]: file upload complete
i hosting[cook4u-b3b8d]: finalizing version...
hosting[cook4u-b3b8d]: version finalized
i hosting[cook4u-b3b8d]: releasing new version...
hosting[cook4u-b3b8d]: release complete
i hosting[cook4u-b3b8d]: beginning deploy...
Deploy complete!3b8d]: found 119 files in public
Project Console: https://console.firebase.google.com/project/cook4u-b3b8d/overview
Hosting URL: https://cook4u-b3b8d.web.app
I'm currently trying to setup a locally environment with react native expo and React Native Firebase (using EAS to build). I've successfully connected the app with the authentication emulator receiving a verification code through phone authentication. However, I am not able to connect to the firestore emulator. The error I get when I try to fetch documents is the following
[Error: [firestore/unavailable] The service is currently unavailable. This is a most likely a transient condition and may be corrected by retrying with a backoff.]
I hope some of you guys can help me with a solution. Currently my code looks like this in index.js:
//index.js file
import Constants from "expo-constants";
import "#react-native-firebase/app";
import firestore from "#react-native-firebase/firestore";
import auth from "#react-native-firebase/auth";
if (__DEV__) {
const origin =
Constants.manifest?.debuggerHost?.split(":").shift() || "localhost";
firestore().useEmulator(origin, 8080);
auth().useEmulator("http://localhost:9099");
}
...
My firebase.json file looks like this:
{
"firestore": {
"rules": "firestore.rules",
"indexes": "firestore.indexes.json"
},
"storage": {
"rules": "storage.rules"
},
"functions": [
{
"source": "functions",
"codebase": "default",
"ignore": [
"node_modules",
".git",
"firebase-debug.log",
"firebase-debug.*.log"
],
"predeploy": [
"npm --prefix \"$RESOURCE_DIR\" run lint",
"npm --prefix \"$RESOURCE_DIR\" run build"
]
}
],
"emulators": {
"auth": {
"port": 9099
},
"functions": {
"port": 5001
},
"firestore": {
"port": 8080
},
"pubsub": {
"port": 8085
},
"storage": {
"port": 9199
},
"ui": {
"enabled": true
},
"singleProjectMode": true
}
}
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
What is happening
When I execute firebase deploy --only hosting given the below folder structure, it deploys the entirety of the ui folder. Meaning, I will have to visit my app at http://my-app.web.app/build.
What I would like to happen
I want to deploy the contents of the build folder generated in the predeploy step of firebase.json as the root of the application. So that my-app/ui/build/index.html ultimately winds up as http://my-app.web.app.
What else have I tried
I thought it would work if I specified "public": "ui/build" in firebase.json, but what happens then is the following error about ui/build/package.json not being found.
npm ERR! enoent ENOENT: no such file or directory, open 'C:\Users\me\Projects\my-app\ui\build\package.json'
I understand it's looking for ui/build/package.json because of public: ui/build but how can I tell it to build from the ui folder, but deploy the resulting build folder?
folder structure
my-app
functions/
ui/
build (after npm run build, at least)
src/
whatever.tsx
.firebaserc
firebase.json
firestore.indexes.json
firestore.rules
firebase.json
{
"firestore": {
"rules": "firestore.rules",
"indexes": "firestore.indexes.json"
},
"functions": {
"predeploy": [
"npm --prefix \"$RESOURCE_DIR\" run build"
],
"source": "functions"
},
"hosting": {
"predeploy": [
"npm --prefix \"$RESOURCE_DIR\" run build"
],
// this is the problem line
"public": "ui",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
},
"emulators": {
"auth": {
"port": 9099
},
"functions": {
"port": 5001
},
"firestore": {
"port": 8080
},
"hosting": {
"port": 5000
},
"ui": {
"enabled": true
}
}
}
Oof! Couldn't see it through the trees.
I simply divorced the predeploy script from the public setting in firebase.json:
Set the pre-deploy to target the ui folder ( because $RESOURCE_DIR will become ui/build) and set the public value to ui/build:
"hosting": {
"predeploy": [
"npm --prefix ui run build"
],
"public": "ui/build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
},
I was unable to run functions shell without the emulators. It always error'd with
Error: Port 9001 is not open on localhost, could not start functions emulator.
I'm running a Mac with
"firebase": "^7.24.0",
"firebase-admin": "^9.9.0",
"firebase-functions": "^3.14.1",
and here's my firebase.json
{
"functions": {
"predeploy": [
"npm --prefix \"$RESOURCE_DIR\" run build"
],
"source": "functions"
},
"emulators": {
"functions": {
"host": "localhost",
"port": "9001"
},
"firestore": {
"port": "9002",
"rules": "firestore.rules"
},
"pubsub": {
"port": "9004"
}
},
"hosting": {
"public":"public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"appAssociation": "AUTO",
"rewrites": [ {
"source": "/**",
"dynamicLinks": true
} ]
}
}
When running emulators and functions together I get a warning saying you might get unusual behaviour so it doesn't look like its the correct solution.
I tried this but it didn't work in my case but worth noting:
Firebase serve error: Port 5000 is not open. Could not start functions emulator
Posting hoping to help someone out. In your firebase.json make sure your port number is a number not a string.
So
"emulators": {
"functions": {
"host": "localhost",
"port": 9001
},
Not
"emulators": {
"functions": {
"host": "localhost",
"port": "9001"
}