I have used firebase hosting to host my app in the root however I would like to serve a separate codebase for my forum under https://myapp.com/forum/
I created two targets: app for my root app in one repository and forum for my other repository. I also created two sites in Firebase.
My question is: is it even possible to have two separate repos and use firebase deploy to have one project under root and other under /forum/
firebase.json (app):
"rewrites": [
{
"source": "!/forum/**",
"destination": "/appIndex.html"
}
]
firebase.json (forum):
"rewrites": [
{
"source": "/forum/**",
"destination": "/forumIndex.html"
}
]
I would like Firebase to show app in the root and forum when I point to mydomain.com/forum/
You can maintain your code in two different repos but once you want to deploy to firebase you'll have to build both and deploy both from the same directory.
Related
`
{
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
`Have an issue where the Firebase deploy link shows "Firebase Hosting Setup Complete." I've tried just about everything on stackoverflow with no success.
I have it set to "build" not "public" in my firebase.json for hosting and it's not doing anything.
I've tried messing with the index.html but then the screen just comes up white/blank.
I've also deleted firebase files completely and started the init over. Still comes back the same.
Has anyone else ran into this lately?
It's hard to tell without any code snippets or firebase config files but I believe if you specify your public location as "build" you do not need to include the rewrites property in the firebase.json file. According to The Docs,
Set up rewrites for any of these purposes:
Show the same content for multiple URLs. Learn how.
Serve a function or access a Cloud Run container from a Hosting URL. Learn how: function or container.
Create a custom domain Dynamic Link. Learn how.
Trying to deploy my React app on Firebase. The problem is that after I deploy the app and connect to the default "app.web" domain I keep getting "Site Not Found" page. I followed the initial steps and bundled the app with parcelJS.
However adding /index.html at the end resolves my issue.
Connecting to the "firebase.com" domain works as expected without the need of adding "index.html" at the end.
My previous project which I now removed worked seamlessly without such issues.
What causes this behavior? Can I do anything to fix it?
Contents of firebase.json
{
"hosting": {
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
The rewrites are correct for a single page app. it maybe an issue related to your browser cache, try another browser or clear your one with Ctrl F5.
If issues persist, you should look at your react app and double-check any router paths and that you do have an existing public folder in the root with your index.html and your react app setup correctly.
As a last resort incase something severe maybe broken, you can create a new project folder and init your Firebase project into it and copy your react src folder over and rebuild your public folder, firebase.json, etc and redeploy with firebase deploy --only hosting
Question
I just set up firebase. However, when I load the link that firebase provided it gives me an 'Error 404'. Now I know that the website is hosted correctly, because when I ran the local host, I then entered the following extension on the end of the url: '/html/index.html' - and it worked.
However, firebase is not finding the correct page to load.
How can I change the page that loads by default, when someone visits my website?
For context
I am pretty sure I know what firebase is doing here. When I first ran the local host, it was running the default index.html that firebase provided. Now that I have deleted that default index.html. It doesn't know where to look to find the page to run.
My index.html is within a folder that is within the public folder. The name of that internal folder is html.
This is the current set up of the file structure and my attempt to fix the problem so far (based on advice of Renaud):
Update
I have now implemented the following, but it is loading #404
As explained in the doc for Hosting configuration, in order to redirect the traffic to your index.html page (or to another html file), you need to add the following to the firebase.json file which is at the root of your project directory:
"hosting": {
"public": "public",
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
},
OR
"hosting": {
"public": "public",
"rewrites": [
{
"source": "**",
"destination": "/mySpecificHomePage.html"
}
]
},
As explained here, "the public attribute specifies which directory to deploy to Firebase Hosting. The default value is a directory named public, but you can specify any directory's path, as long as it exists in your project directory."
Update following your update (screenshot of your Firebase project file structure):
If I am not mistaking you should do as follows:
"hosting": {
"public": "html",
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
Note that rewrites is within hosting!
I am setting up a redirect(rewrite) with my firebase hosting so that I can call an api that is running from google cloud run here.
I have tried changing the rewrite string from "/api/**" (should catch all things to page.com/api/** and send that to the function). deleted the index.html and swapped to "**" to capture ALL paths including index. Nothing has worked so far.
My hosting firebase.json is setup like so, is there something wrong with this?
{
"hosting": {
"public": "dist/public",
"ignore": ["firebase.json", "**.*", "**/node_modules/**"],
"rewrites": [
{
"source": "**",
"run": {
"serviceId": "next-js-base-api",
"region": "us-central1"
}
}
]
}
}
I also tried with normal redirects to another page, this does not work, what determines when the firebase.json settings begin to propagate and work?
Update
I tried running the hosting emulator and with a modified rewrite "source": "/api/**" which had the following results. Navigating to /api returns non crash (doesn't redirect) with output in browser of cannot GET /api navigating to api/wkapi (a sub directory that is caught by the api endpoint) returns an unexpected error in the browser and
Error: Unable to find a matching rewriter for {"source":"/api/**","run":{"serviceId":"next-js-base-api","region":"us-central1"}}
in the console.
Make sure to update to the latest version of your Firebase CLI by running:
npm install -g firebase-tools#latest
This will enable you to rewrite to cloud run instances as you are trying to do.
Actually, I ran this just now and, looking at the logs of the deployed cloud-run helloworld container, found that custom-domain/helloworld is actually mapping onto container-domain/helloworld instead of simply mapping to container-domain/. To fix this, I had to add an additional app.get rule to my original Node.js program:
app.get('/helloworld', (req, res) => {
And then calling custom-domain/helloworld worked.
If all the above answers don't help you, the fix that worked for me was:
Look in the public directory in your project that firebase hosting uses.
Delete the index.html file that firebase created when going through
the firebase init steps.
After deleting the generated index.html file, it was able to run my cloud run containers with rewrites.
In my case, the cause for this was misspelling function in the firebase.json file, i,e:
"rewrites": [
{
"source": "**",
"function": "ngssr" // I had spelled this as "functions" (extra s)
}
]
how to deploy to other firebase hosting sites defined within the same project.
I created multiple firebase hosting "sites".
The command
firebase deploy
however always deploys to the first one.
How can I specify that the static files get deployed to another "site" (and domain).
Thanks
You have to add the other sites as deploy targets. If you have a second site named awesome-site-d3426:
$ firebase target:apply hosting awesome-app awesome-site-d3426
You'll likely have to do the same thing for the primary site.
Then tell Firebase what to deploy to which targets in firebase.json:
{
"hosting": [
{
"target": "awesome-site",
"public": "awesome-site/dist"
},
{
...
}
]
}
You can then deploy all the sites at once(firebase deploy) or a specific site:
$ firebase deploy --only hosting:awesome-site
To deploy to another site created in same firebase project.
Update your firebase.json file as folow
{
"hosting": {
"site":"<site-name>",
"public": ...,
"ignore": [
...
],
"rewrites": [
...
]
}
}