i have a problem related to deploying my react-app into firebase hosting , my react app is created with create-react-app, the build folder is ready and and i have successfully deployed my app to firebase , but nothing shows up , here is my firebase.json file
firebase.json
here is the error in the browser :
enter image description here
the app was working just fine in my computer localhost
anybody knows how to fix this?
Make sure you remove any comments without brackets, jsx works fine with them in production mode but not in build mode.
Related
enter image description here
I want to host my app on firebase.
I followed these steps.
npm run build and it created build folder
firebase init, select hosting,
What do you want to use as your public directory? build
Configure as a single-page app (rewrite all URLs to /index.html)?
Yes
File build/index.html already exists. Overwrite? No
and then finally firebase deploy
after some time I see files uploaded successfully and in the firebase hosting dashboard it shows files uploaded something like 727. but the app looks something like a welcome message "Welcome Firebase Hosting Setup Complete. You're seeing this because you've successfully set up Firebase Hosting. Now it's time to go build something extraordinary!"
however, if I create a react app using create-react-app, and follow the same steps, it's working fine at the same URL and host. it displays the app at once without a problem.
my firebase.json
Firsty once you deploy it try viewing it on incognito mode as sometimes due to the cache it renders the same page
now still if you have errors follow this steps given in the link I followed this and got mine online
https://www.youtube.com/watch?v=IDHfvpsYShs&t=337s
So I have a reactjs app publish in github pages, is this one https://bernardoolisan.github.io/PyOcr/
The problem is that the app fetch data, but when I deploy it on github pages it give this error:
And it was working:(
And now my page doesn't work too, it was working but right now is blank i dont know why
I guess you are deploying the react project the wrong way to hosting providers such as github or netlify . First you must build your react project and then only push the files inside the build folder to hosting provider . Github pages can only serve static html css js files so it can only serve the build folder of your react project .
Note
To build a react app you can run npm run build and a build folder will be generated . Then you can push the files inside of the build folder to github repository and enable github pages for it .
I was having a similar issue, and I too though gh-pages can't fetch data. But what I did was I added cors to my server. I allowed cross-origin requests. Now it retrieves data from my server on heroku.
I created an ReactJS APP. I want to deploy this app in hosted server. So i made the changes as
In package.json add "home": 'https://ww.domain.com/ReactApp"
Installed react-snapshot plugin. Added "&& react-snapshot" in build line in package.json. Replace React-Dom to react-snapshot in index.js.
Build the project and copy the files and folders inside build and paste inside server inetpub/wwwroot/reactApp folder.
Run the application favicon displayed in tab. Blank white screen. No error in console.
Anybody please suggest what mistake am i doing and please suggest quick solution.
Thanks
You can try the following steps to fix your question:
1.Please check your Webpack’s publicpath setting. There is the publicPath setting in your Webpack configuration to tell an app what its root path is. please make sure it is set correctly, it will base links like above from that URL.
2.If you’re using create-react-app, you won’t have to deal with Webpack configs. The way how create-react-app has it’s webpack configuration set up, this will replace the publicPath with the correct base URL for your app. Now your app it’s base URL, run npm run build again and copy the app to your web space to find your app up and running.
I have created a site using CRA, If I run build it all works fine on Github-pages, but when I attempt to run the site through my Netlify account it shows up a blank page. It's connecting to the site as the html is showing with my React page. but there is no content. The Repo in Github has a client folder in which is my build folder. I have tried everything to get this working, am I missing something simple?
This is my Package.json file:
My Netlify settings point to the correct directory:
There is also a 404 error showing when the page loads:
I changed the homepage of my package.json file to "." and then on netlify changed the settings to not see npm warnings as errors which I think was blocking the site compiling. This was done by adding CI=false on the build command on netlify.
Everything is now working
I have created a simple react app and built the app using npm run build command and uploaded it to host. it works but whole application directory is visible in web browser console. So how do i fix it to not to show web directory on web console. Once the application kept growing and sensible data will visible. So is there any method to avoid that.
Here's the on cPanel File Manager
and js directory has minified js like this,
But once it loads on web browser it shows App.js content,
Any suggestions.
After running "npm run build" , publish your "build" folder. Not your "public" folder.