Firebase deploy but not showing my website - firebase

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

Related

Greyed out breakpoints when debugging a firebase-app in VSCode in WSL

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)

"Ref does not have a version" error when trying to install an extension locally using Firebase CLI

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

Firebase hosting test hosting configuration settings

I am looking for a method to test the current provided hosting configuration for Firebase Hosting, the firebase.json file seems to deploy correctly, but there doesn't seem to be a way to see this configuration on the cloud once its deployed:
firebase.json
{
"hosting": {
"public": "dist",
"rewrites": [
{
"source": "/api/v1/**",
"function": "webApp"
},
{
"source": "**",
"destination": "/index.html"
}
],
"headers": [
{
"source": "**/*",
"headers": [
{
"key": "Cache-Control",
"value": "no-cache"
},
{
"key": "Content-Security-Policy",
"value": "frame-ancestors 'self' *://*.hellosign.com"
}
]
}
]
},
"emulators": {
"functions": {
"host": "0.0.0.0",
"port": 5001
},
"firestore": {
"host": "0.0.0.0",
"port": 8080
},
"database": {
"host": "0.0.0.0",
"port": 9000
},
"hosting": {
"host": "0.0.0.0",
"port": 5000
},
"pubsub": {
"host": "0.0.0.0",
"port": 8085
},
"auth": {
"host": "0.0.0.0",
"port": 9099
},
"ui": {
"enabled": true,
"host": "0.0.0.0",
"port": 4000
}
},
"firestore": {
"rules": "firestore.rules"
}
}
The documentation states:
You can check the deployed firebase.json content using the Hosting REST API.
You will need to use that API to check that your release matches your expectations. You won't be able to see this in the console. If console access what you're looking for, then file a feature request with Firebase support.

Firebase functions: shell Error: Port 9001 is not open on localhost

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"
}

Firebase Emulator Firestore not connecting to flutter

I have set up my firebase emulator up an running
On my main programm, at the start of my flutter web app I have the following code:
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
FirebaseFirestore.instance.settings = Settings(
host: '127.0.0.1:8080',
sslEnabled: false,
);
Yet when I try to get the document I get the following error:
Failed to get Document because the client is offline
My firebase.json is the following:
{
"firestore": {
"rules": "firestore.rules",
"indexes": "firestore.indexes.json"
},
"hosting": {
"public": "build/web",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
},
"emulators": {
"firestore": {
"port": 8080
},
"hosting": {
"port": 5000
},
"ui": {
"enabled": true
}
}
}
Turns out everything was set up correctly. The reason I could not communicate with the Firebase Emulator was my Karspersky antivirus. If anyone else has the same issue try to disable your additional antivirus.

Resources