I have created an express app which is working pretty fine but when I'm trying to host the web app using firebase cloud functions the url rewrites rules in firebase.json seems to be not working properly.
code snippet from index.js file under functions folder
exports.app = functions.https.onRequest(app);
here is the snippet from firebase.json file
"rewrites": [
{
"source": "/**{,/**}",
"function": "app"
}
I have also tried
"rewrites": [
{
"source": "**",
"function": "app"
}
but none of the is working.
I want all my webapp's url request from "http://url/someroute" to get routed to "http://url.com/app/someroute"
Right now for now all of this to work I have to change my hyperlinks from "/someroute" to "/app/someroute"
"rewrites": [
{
"source": "**",
"function": "app"
}
this works perfectly fine..Just check if you have also selected firebase hosting along with functions or do firebase init hosting and then firebase init functions seperately and then delete index.html from the public directory.
The problem is that you trying to redirect to a function, not a route, so if you want to actually change the route, you have to use destination instead of function, as follows:
"rewrites": [
{
"source": "**",
"destination": "/app/**"
}
Or something similar to that, here is a community post that explain that in a little more detail and also the rewrite documentation that might be able to help you further
Related
I am struggling to understand how firebase.json redirect rules work.
Here I define the hosting to my website, which works perfectly pointing to dist/project-name directory.
"hosting": [
{
"target": "project-name",
"public": "dist/project-name",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
...
...
However, things start to get confusing when I try to implement redirect rules. Let's say I want requests to non-existing files and directories be redirected to my hosting public target. I would assume that this is the proper way to define it:
"rewrites": [
{
"source": "**",
"destination": "dist/project-name"
}
]
But making requests to random endpoints like localhost:5000/abcdef, localhost:5000/testing are not being redirected so the request fails. What should the source be then?
Now, let's say that instead of redirecting to my public target directory, I want to redirect to a firebase function with Express.
"rewrites": [
{
"source": "**",
"destination": "app"
}
]
Well, that does not work either in the emulator localhost:5000. Even though I can see functions work (Express app) in the emulator localhost:5001
I am thinking because the /functions directory is not part of the dist folder. But then why redirecting to dist/project-name does not work either? Any ideas? Thank you!
Alright, I had to try a few things and read the documentation to understand what I was doing.
Docs:
https://firebase.google.com/docs/hosting/functions#use_a_web_framework
https://firebase.google.com/docs/hosting/full-config#rewrites
First, I was thinking that by doing "destination": "dist/project-name" in the rewrites, the url was always going to redirect to the hosting site. So no matter what path I go to (i.e. /abc) it was going to show me the index.html file. Well, that is not the case. The rewrite is not even happening and I could see that in the logs http://localhost:4002/logs. I think that is because of the priority order.
Second, my Express.js app is deployed as a function in firebase. Rewrites to Cloud Functions should be "function": "app" not "destination": "app".
Last but not least, my Cloud Function with Express.js was deployed to us-east1 like this exports.app = functions.region("us-central1").https.onRequest(app);. However, here we can see that Firebase Hosting only accepts us-central1 for Cloud Functions at the moment.
I'm using Getx for navigation which internally uses Navigator 2.0. I'm unable to load a specific URL when I Host in Firebase Hosting.
It seems to be working fine locally.
I'm using Url Path Strategy to remove the #
Check if you correctly rewrite all requests to /index.html
https://firebase.google.com/docs/hosting/full-config
firebase.json:
{
"hosting": {
"public": "www",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
},
...
Deploy again afterwards.
Function URL (app(us-central1)): https://us-central1-yisus-portfolio.cloudfunctions.net/app
Functions deploy had errors with the following functions:
app(us-central1)
To try redeploying those functions, run:
firebase deploy --only "functions:app"
To continue deploying other features (such as database), run:
firebase deploy --except functions
Error: Functions did not deploy properly.
Is a server create on express that sends the HTML JS and CSS, but uses server-side rendering, when I deploy another app that ends to execute before, it works.
The documentation says that the function can't execute more than the 60s, and in the logs of the functions says that takes 13000 (millisecond I guess), but I am not sure if is that or if it is a mistake that I did.
BUT
When I run firebase --serve --only functions, hosting
IT WORK, but when I deploy not
{
"hosting": {
"public": "public",
"rewrites": [ {
"source": "**",
"function": "app"
} ],
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
}
firebase.json
const functions = require("firebase-functions");
const { app } = require("./lib/server")
exports.app = functions.https.onRequest(app);
function index
The Google Cloud Status Dashboard has this banner at the top right now:
Cloud Functions deployment failures in us-central1 and europe-west1
So I assume that is also the cause of the error message you are seeing. I recommend checking the status page for updates.
I have created a Node.js application and trying to deploy in the Firebase for hosting. Before deploying, I am making sure that it will work properly using the command firebase serve --only hosting,function. This command creates the server and I am able to access the Home page of the application using the URL (localhost:5000) provided by Firebase but for some reason, my Angularjs HTTP request is unable to find the Node.js controller due to which I am getting the 404 URL not found error in the brwoser.
As soon as the index.html is accessed using the localhost:5000 I am trying to populate various dropdown options in my frontend. These options are present within the Node.js controller file populator.js. Hence I am making an HTTP request from angularjs to my node.js controller but I get the 404 URL not found error. I am guessing there is some issue with folder structure or the firebase.json file due to which the code is unable to find my Node.js controller.
My firebase.json file:
{
"hosting": {
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"function": "app"
}
]
}
}
My index.js file:
const functions = require("firebase-functions");
const express = require('express');
const app = express();
//call function to popultae the fields
app.get('/populateFields', function(req,res){
populateFields.BusinessStep(function(data){
res.send(data);
});
});
exports.app = functions.https.onRequest(app);
Here is my folder structure
Firebase Hosting (root)
|--functions
|---index.js
|---package.json
|
--public
|---index.html
|
--firebase.json
--.firebaserc
I tried running the command firebase serve --only hosting,function in both the root directory and within the functions folder but none worked and still getting the error The requested URL was not found on this server.
I found many post related to this issue but could not find there solution after trying the methods mentioned there hence posting this question.
I was running the command wrongly so I was getting that issue the actual command is
firebase serve --only functions,hosting
If anyone is facing the issue then run the command correctly.
"I was running the command wrongly so I was getting that issue the actual command is
firebase serve --only functions,hosting"
I guess that the error was for specifying function instead of functions
So i have been going back and forth on this topic, and not very clear on it. I am currently working on a app where i am trying to set my path as localhost:8000/app
Right now if i hit localhost:8000, it renders the page but on localhost:8000/app its says the url is not recognized
As far as my code set up, i have the routes directory as follow
routes
app
index.js
I have my router middleware in config.json file set to
"router": {
"module": {
"arguments": [{ "directory": "path:./routes" }]
}
}
Are you using a template library ?
Because it may look for a file with the right extension.
Example:
If you're using jade, it will look for .jade file
Okay figured out where the fault was under my config.json i need to add '/' after './routes'
"router": {
"module": {
"arguments": [{ "directory": "path:./routes/" }]
}
}
Hence it was not recognizing the route structure