I have a ReactJS app I built that works locally , I followed the instructions on the Firebase site
https://medium.com/#devesu/host-a-react-based-website-free-of-cost-with-firebase-hosting-and-connect-with-your-own-domain-53146731807f
and everything went to plan ,inthat there were no errors however when I follow the link provided
https://hydrometric-54ec0.web.app
or
https://hydrometric-54ec0.firebaseapp.com/
I get a default Firebase page and not my app, I think my firebase.json is missing something here it is below
{
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
If you are deploying any React project in Firebase. look for the below steps.
Once the react build is done through npm run build
Do firebase init
Select Hosting
Then CLI will ask for public directory- Write build and hit enter.
rewrite all urls to /index.html- Type Yes
File build/index.html already exists. Overwrite?- Type No or else it will overwrite your index file with firebase default index.
Before firebase deploy do the following things.
Replace this code in firebase.json
{
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
Then inside your react package.json
do blank path for homepage
"homepage": ""
Now yor are good to go for firebase deploy
Related
when I try to deploy my react app to firebase, the url leads to a blank page (although the favicon is up).
After googling the problem the best post I could find suggested I make sure that the firebase.json file is pointing to my build folder, but it is.
And it is still not working.
And I do not know what to try next.
Any ideas?
My firebase.json for context:
{
"hosting": {
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
I found this on another post, but I waited to try it because it far from the ranked answer.
Worked for me tho:
https://stackoverflow.com/a/68506094/20063520
I have created a react app, it's working fine locally. To deploy it in firebase I used firebase init and followed the steps then npm run build and firebase deploy. Now I'm getting this error on the deployed app's home page.
Page Not Found
This file does not exist and there was no index.html found in the current directory or 404.html in the root directory. Why am I seeing this?
You may have deployed the wrong directory for your application. Check your firebase.json and make sure the public directory is pointing to a directory that contains an index.html file.
You can also add a 404.html in the root of your site to replace this page with a custom error page.
Here is the firebase.json file's code.
{
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
My build folder path is in the root and looks like this:
I have faced same problem but now it is working for me.
{
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [{
"source": "**",
"destination": "/index.html"
}]
}
}
Order of Cmd to be executed:
firebase init
execute npm run build
firebase deploy
I've built a nextjs app, with npm run build && npm run export and deployed to firebase using firebase deploy command. Prior to that, I've used firebase init in my project folder with just using the default options eg. not a single page application.
After I go and visit my project in firebase provided url however, I see the home page which is index.html, but whenever I use any other slug it throws a 404. Why this is happening ? I`ve included my firebase.json file, in case it might help.
firebase.json
"hosting": {
"public": "out",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
}
For everybody that wants to deploy a statically exported Next.js app to Firebase hosting:
You would have to add "cleanUrls": true to the hosting configuration in firebase.json like so:
"hosting": {
"public": "build",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"cleanUrls": true,
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
},
Without the "cleanUrls" configuration, the user would have to navigate to
https://example.com/login.html so that Next.js routes to the login page for example. With the parameter, a web request to https://example.com/login would work.
With the rules you have Firebase Hosting serves the exact file that the user requested.
To rewrite other/all URLs to your index.html, you'll need to add a rewrite rule to your firebase.json. A typical rewrite rule for single-page applications may look like this:
"hosting": {
// ...
// Serves index.html for requests to files or directories that do not exist
"rewrites": [ {
"source": "**",
"destination": "/index.html"
} ]
}
If anyone is still looking for this, this is what fixed it for me:
I used dynamicLinks as stated in the firebase hosting docs for the rewrites like so in my firebase.json file:
{
"hosting": {
"public": "out",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"cleanUrls": true,
"rewrites": [
{
"source": "/**",
"dynamicLinks": true
}
]
}
}
This should allow dynamicLinks to start at ("https://CUSTOM_DOMAIN/{dynamicLink}").
I have hosted my react project on firebase, I have used same command and instruction, which is mention in this URL, https://www.robinwieruch.de/firebase-deploy-react-js/ but when i run the URL, it is giving me blank screen, even my firebase.json file is same as mentioned
{
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
still i am getting blank screen, can anyone please help me how to resolve this issue ?
I've deployed my angular app to firebase. I can see the sign in page fine but I get the following error when I reload the page:
This file does not exist and there was no index.html found in the current directory or 404.html in the root directory.
Why am I seeing this?
You may have deployed the wrong directory for your application. Check your firebase.json and make sure the public directory is pointing to a directory that contains an index.html file.
You can also add a 404.html in the root of your site to replace this page with a custom error page.
So as the error suggests I checked my firebase.json file and it displays this:
{
"firebase": "******",
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
Here you can see that my public folder is my dist folder. This dist folder is actually where I place all of my files (css,js,html and the index.html) when gulp builds it all. The folder structure looks like this:
dist
css
images
js
templates
index.html
So the destination folder above does have an index.html page - so why am I getting this error? Angular should be stepping in here and handling all routing but that doesn't seem to be the case.
EDIT
I fixed the problem - this problem is caused by Firebase (indeed all servers I think) believing that each Angular state is a folder which should contain its own index.html file - obviously this isn't the case.
What needs to happen is for it to only refer to our index.html in the root of the folder. To do that you need to modify your firebase.json file to the following:
{
"firebase": "app-name",
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [{
"source": "/public/**",
"destination": "/public.html"
},
{
"source": "**",
"destination": "/index.html"
}]
}
The important parts here are the rewrites and the source objects. Refer to the firebase.json explanation page for more info on this: firebase.json
2018 and had the samed problem. Katana24 gave a good answer but since then, firebase updated a bit. Here is the Katana24 answer updated :
firebase.json:
{
"functions": {
"predeploy": [
"npm --prefix \"%RESOURCE_DIR%\" run lint"
],
"source": "functions"
},
"hosting": {
"public": "dist/YOURAPPNAME",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [{
"source": "/public/**",
"destination": "/public.html"
},
{
"source": "**",
"destination": "/index.html"
}
],
"storage": {
"rules": "storage.rules"
}
}
}
If you use firebase-tools you can hit y (yes) at the question:
Configure as a single-page app (rewrite all urls to /index.html)?
in `firebase.json`, `hosting` section add the `rewrites`
"rewrites": [ {
"source": "**",
"destination": "/index.html"
} ],