I am trying to deploy my react app on firebase but i get this image shown all the time.
Steps I did
firebase init
Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
What do you want to use as your public directory? - public
Configure as a single-page app (rewrite all urls to /index.html)? (y/N) - No
? Set up automatic builds and deploys with GitHub? (y/N) - No
File public/index.html already exists. Overwrite? (y/N) - No
Then I get `✔ Firebase initialization complete!
firebase deploy
then I get `✔ Deploy complete!
when i check the URL mentioned I see the message as shown in the screen shot Firebase Hosting Setup Complete.
When I also tried changing the path for public to "public": "public/firebase-auth-test",in Firebase.json file
{
"hosting": {
"public": "public/firebase-auth-test",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
}
Definitely I am doing something wrong but unable to figure out.
this is my project structure if that helps
Please provide more details about your react project build.
i did a small extercise project to deploy a vue js application and you need to proper build your frontend project and then call the firebase hosting deploy.
Check the package.json and other relevant files to fix your setup.
Related
Trying to deploy my react app on firebase. The app gets deployed, but when links are clicked, it returns a 404 page.
I already logged into Firebase through the cli. Used firebase init:
? What do you want to use as your public directory? build
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? Set up automatic builds and deploys with GitHub? No
? File build/index.html already exists. Overwrite? No
With npm start the application runs perfectly normal, but once I npm run build into firebase init and firebase deploy, it returns the login page properly, but the other pages are returned as 404 pages.
Firebase.json:
{
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
My solution:
So the problem was that /home got a 404 page. But it didn't when I used firebase serve. What I did was do the steps again and made sure the build files were all valid by running npm start into npm run build. Than I deployed it again and when I got the 404 page, I just refreshed and after that it's been working ever since.
Might have something to do with the deployment needing time to route everything properly, I'm not sure. But refreshing the 404 page did the trick for some reason.
try :
copy code index.html outside "build" folder and paste into index.html inside "build" folder. ( the one inside should be the same as the other one)
if it didn't work :
1 - delete your .firebase folder. and init it again using firebase init
and set the same configuration , then reload the website.
here is .web link: https://al-realtor.web.app
here is my .firebaseapp link: https://al-realtor.firebaseapp.com
The Web showing me Site not found!
But the FirebaseApp showing everything is all Right
I am Using in my code:
React
Tailwind
FontAwesome
React Router
and there is no error on my code. It running on netlify and .firebaseapp but not only .web app
There are usually 3 situations where people are making mistake.
They set up bad public folder when firebase init. This setup is in firebase.json file.
"hosting": {
"public": "dist/public",
...
}
They build project then init and by mistake when init they overwrite index.html file.
They have server side rendering app. Hosting should redirect requests to a firebase function but what they not know is that every home page request is equal to example.com/index.html when hosting has this file it not trigger function and return file. So you need to rename it before deploying.
Might be late to this but for anyone having this problem. The solution is just to wait. Most likely the google servers near you don't have the latest information about your site. You can usually access the site anyway by using USA VPN.
I have finished creating a react app using typescript and below is what I did to deploy the app to firebase
yarn build
firebase init
firebase deploy
Now I have pointed the public folder to my build folder as below
"hosting": {
"public": "build",
"ignore": [
I am using typescript in the react app
Yet, whenever it deploys I always get a blank page.
What am I doing wrong?
OMG! I'm so sorry guys..It was my bad.The deploy is working flawlessly, it was a bug from my end.
I am using react router and I forgot to setup a default route before deploying that's why I was getting a blank page.
I have setup a default route and everything is working well as expected.
Thanks all for your input.
I am new to using Firebase and after I developed a react project, I tried to deploy my application with firebase but it doesn't work. Firebase is already connected to my app for the database.
This is what I did to deploy it:
firebase login
firebase init (I tried all possibilities, I always chose HOSTING
and then as a public directory I tried with public / build / dist )
firebase deploy
but still, it gave me 2 links as following :
and when I click to the Hosting like, this is what it shows (not the app) :
Also, this is what my firebase.json file looks like (when I use build as a public directory)
{
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
}
maybe I do have to do some changes in this file ?
I also tried firebase serve to test it locally, and it shows me the same page (welcome page).
But when I try my app with ng serve, it works.
Could you help me please ? Thank you !
I think you may be opening the wrong url. If localhost says the setup is complete, you shouldn't expect to see your hosted website in localhost, but rather at the link which firebase deploy provided for you.
In your case, that should be https://gouvproject-64316.firebaseapp.com (take a look at Hosting URL in your console or terminal).
Keep in mind that localhost addresses are hosted locally within your device so that means no one else has access to them but you. This is what you do when you setup a server on your pc (i.e. through node.js) . On the contrary, hosted websites are saved in a server remotely by a hosting service provider (in this case done by Firebase through firebase deploy) and are given a public worldwide-unique address for anyone to be able to visit them.
I visited the page url and your website seems to be hosted just fine, by the way! If you need help in anything related, don't hesitate to ask.
Hope this helped, Panos :).
I am trying to deploy my react app to Firebase (using firebase-tools).
The app was generated using this generator (which has deployment instructions in the readme). I followed them, but they didn't flag that Firebase overrides the index html, so they initial step replaced my html in the build file with the Firebase override. I copied my src/index.html back to the build file and re-ran the init, build and deploy calls.
I have an intercom script on the home page - the only part of the page that renders is the intercom icon. The rest of the page is blank.
I have seen this post. Like this user, I had to remove the predeploy script from my firebase.json because it was generating eslint errors.
The facebook create-react-app advice for Firebase hosting is to add an additional script to the firebase.json with:
"headers": [
{"source": "/service-worker.js", "headers": [{"key": "Cache-Control", "value": "no-cache"}]}
],
I also tried this, but it doesn't change anything.
I tried removing, reinstalling npm and then cleaning the cache (in the functions folder). I have noticed that reinstalling node modules does not result in a functions/node_modules/eslint folder. I'm not sure why.
Others have suggested chrome/devtools/application/clear storage/clear site data. I have tried it but nothing changes.
Some posts attribute the problem to firebase-tools - although more recent posts suggest that the error that gave rise to that solution has now been remedied.
Has anyone found a solution for this problem?
In firebase.json - change public from 'build' to 'dist'
"hosting": {
"public": "dist",