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.
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
We're using Firebase Hosting. We have a Next.js app, called "knowledge", deployed on Google Cloud Run in the same GCP project. We followed the instructions in the Firebase documentation. Our firebase.json is as follows:
{
"firestore": {
"rules": "firestore.rules",
"indexes": "firestore.indexes.json"
},
"hosting": {
"public": "build",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"rewrites": [
{
"source": "/knowledge{,/**}",
"run": {
"serviceId": "knowledge",
"region": "us-central1"
}
},
{
"source": "**",
"destination": "/index.html"
}
]
}
}
We want every request to "/knowledge{,/**}" for server-side rendering through our Next.js app on Cloud Run. When we open any of these pages, it loaded, but it does not load any of the static file, showing many errors like the following in the console:
Uncaught SyntaxError: Unexpected token '<' (at webpack-df4cf1c8d23aa877.js:1:1)
framework-81da43a8dcd978d9.js:1
Our next.config.js is as follows:
module.exports = {
async rewrite() {
return [
{
source: "/knowledge",
destination: "/",
},
];
},
images: {
domains: ["firebasestorage.googleapis.com"],
},
};
Static files will be under /_next/, so add '/path*'.
module.exports = {
async rewrite() {
return [
{
source: "/knowledge",
destination: "/",
},
{
source: "/knowledge/:path*",
destination: "/:path*",
},
];
},
images: {
domains: ["firebasestorage.googleapis.com"],
},
};
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"
}
My next.js app works fine when using the firebase emulator with the below configuration but the same doesn't work when deployed to firebase.
Error from firebase functions log
Error: Failed to load /500
at loadComponents (/workspace/node_modules/next/dist/next-server/server/load-components.js:1:1554)
at processTicksAndRejections (internal/process/task_queues.js:97:5)
at async Server.findPageComponents (/workspace/node_modules/next/dist/next-server/server/next-server.js:76:257)
at async Server.renderErrorToHTML (/workspace/node_modules/next/dist/next-server/server/next-server.js:138:198)
at async Server.renderToHTML (/workspace/node_modules/next/dist/next-server/server/next-server.js:137:1629)
at async Server.render (/workspace/node_modules/next/dist/next-server/server/next-server.js:74:255)
at async Object.fn (/workspace/node_modules/next/dist/next-server/server/next-server.js:58:672)
at async Router.execute (/workspace/node_modules/next/dist/next-server/server/router.js:25:67)
at async Server.run (/workspace/node_modules/next/dist/next-server/server/next-server.js:68:1042)
at async Server.handleRequest (/workspace/node_modules/next/dist/next-server/server/next-server.js:32:504)
Error: Failed to load /
at loadComponents (/workspace/node_modules/next/dist/next-server/server/load-components.js:1:1554)
at processTicksAndRejections (internal/process/task_queues.js:97:5)
at async Server.findPageComponents (/workspace/node_modules/next/dist/next-server/server/next-server.js:76:257)
at async Server.renderToHTML (/workspace/node_modules/next/dist/next-server/server/next-server.js:137:542)
at async Server.render (/workspace/node_modules/next/dist/next-server/server/next-server.js:74:255)
at async Object.fn (/workspace/node_modules/next/dist/next-server/server/next-server.js:58:672)
firebase.json
{
"firestore": {
"rules": "firestore.rules",
"indexes": "firestore.indexes.json"
},
"functions": {
"predeploy": [
"npm --prefix \"$RESOURCE_DIR\" run lint",
"npm --prefix \"$RESOURCE_DIR\" run build"
]
},
"hosting": {
"public": "public",
"cleanUrls": true,
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"rewrites": [
{
"source": "**",
"function": "ssrServer"
}
]
},
"emulators": {
"auth": {
"port": 9099
},
"functions": {
"port": 5001
},
"firestore": {
"port": 8080
},
"ui": {
"enabled": true
},
"hosting": {
"port": 5008,
"host": "0.0.0.0",
"public": "public"
}
}
}
firebase function
import * as functions from 'firebase-functions';
import next from 'next';
const firebaseFunction = functions;
const server = next({
dev: false,
dir: __dirname + '/public',
conf: {
distDir: '.next',
experimental: {
reactRoot: false,
turboMode: false,
},
future: {},
},
});
const nextjsHandle = server.getRequestHandler();
exports.ssrServer = firebaseFunction.https.onRequest(async (req, res) => {
return server.prepare().then(() => nextjsHandle(req, res));
});
What am I missing?
The errors are indicating that the components have not loaded. Before you deploy to firebase, ensure you run each command respectively
npm run dev
npm run build
Are you running Next 10.2? It could be related to this issue.
I'm using deploy targets on Firebase and everything is working fine except my Cloud functions.
The process.env.FIREBASE_CONFIG env variable doesn't have the right values. The properties "databaseURL" and "storageBucket" are not the one I've configured the target to use
When I use admin.database() it doesn't use the right RTDB I've created and that I want to use
functions.storage.object().onFinalize() doesn't "watch" the right bucket
My .firebaserc file
{
"projects": {
"default": "hatch-rpg",
"dev": "hatch-rpg"
},
"targets": {
"hatch-rpg": {
"hosting": {
"shadra": [
"shadra"
]
},
"database": {
"shadra": [
"hatch-shadra-dev"
]
},
"storage": {
"shadra": [
"hatch-shadra-dev"
]
}
}
}
}
My firebase.json file
{
"firestore": {
"rules": "firestore.rules",
"indexes": "firestore.indexes.json"
},
"database": [
{ "target": "shadra", "rules": "database.rules.json" }
],
"functions": {
"predeploy": [
"npm --prefix \"$RESOURCE_DIR\" run lint",
"npm --prefix \"$RESOURCE_DIR\" run build"
],
"source": "functions"
},
"hosting": [
{
"target": "shadra",
"public": "dist/shadra",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
],
"storage": [
{ "target": "shadra", "rules": "storage.rules" }
]
}
I'm initializing Firebase like this
admin.initializeApp(functions.config().firebase);
What am I missing ?
Thanks a lot
EDIT:
I have tried to override FIREBASE_CONFIG by doing firebase functions:config:set firebase.databaseURL="hatch-shadra-dev.firebaseio.com" firebase.storageBucket="hatch-shadra-dev" but it didn't worked because Invalid config name firebase.databaseURL, cannot use upper case. then tried without uppercase and got Cannot set to reserved namespace firebase
How can I override this FIREBASE_CONFIG ? or should I just not use it initialize manually firebase ?
Ok, here's what I did to fix this issue.
Maybe there's a better option or I'm just mis-using Firebase here.
Anyway, heres' the solution:
First, add some config to the project
firebase functions:config:set target.database="hatch-shadra-dev.firebaseio.com" target.bucket="hatch-shadra-dev"
Then use it in the Cloud function with admin.initializeApp()
import * as functions from 'firebase-functions';
import * as admin from 'firebase-admin';
const config = functions.config();
admin.initializeApp({
...config.firebase,
storageBucket: config.target.bucket,
databaseURL: `https://${config.target.database}`
});