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"],
},
};
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 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.
Now I created a file by node server like
const functions = require("firebase-functions")
const express = require("express")
/* Express */
const app = express()
app.get("/test", (request, response) => {
response.send("Hello from Express on Firebase!")
})
const api1 = functions.https.onRequest(app)
module.exports = {
api1
}
firebase.json
{
"hosting": {
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
},
"functions": {
"predeploy": [
"npm --prefix \"$RESOURCE_DIR\" run lint"
]
}
}
and I have deployed it to firebase hosting and try tried access it on firebase hosting the index.html show up to me but when I require the /test it's return as 404.html page ! what's I'm missing ?
after updated firebase.json and added rewrites to
{
"hosting":
{
"public": "public",
"rewrites": [
{
"source": "/test",
"function": "app"
}
]
}
}
the message is different now
The answer
I must to structured my project files to
-project (folder)
---functions (folder)(contains on all nodejs files)
---public (filder)
You need to include a rewrites section to your firebase.json file. That tells the Firebase servers how to route any requests that come in... and right now, you aren't telling it anything.
"hosting": {
"rewrites": [
{
"source": "**",
"function": "api1"
}
]
}
This answer isn't actually an answer to your question, but it demonstrates the proper way to set up rewrites with cloud function express apps.
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}`
});
My domain seems to redirect to the index.html and all the sub-links just fine.
Problem is it won't redirect to the api rule "source": "/api/**"
I've checked the API manually using the whole firebase url (no custom domain) and it works.
How can I get both domain.com/somelink and domain.com/api/somelink to work in union?
Here's the configuration.
firebase.json
{
"database": {
"rules": "database.rules.json"
},
"hosting": {
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "/api/**",
"function": "api"
},
{
"source": "**",
"destination": "/index.html"
}
]
},
"storage": {
"rules": "storage.rules"
}
}
As noted here https://stackoverflow.com/questions/44959652/firebase-hosting-with-dynamic-cloud-functions-rewrites/45224176#45224176
Create a main app which hosts all other top-level functions.
const funtions = require('firebase-functions');
const express = require('express');
const app = express();
app.get('/users/:userId/:userData/json', (req, res) => {
// Do App stuff here
}
// A couple more app.get in the same format
// Create "main" function to host all other top-level functions
const main = express();
main.use('/api', app);
exports.main = functions.https.onRequest(main);
firebase.json
{
"source": "/api/**", // "**" ensures we include paths such as "/api/users/:userId"
"function": "main"
}
Use the main hook.
const hooks = express();
main.use('/hooks/, hooks);