I'm having problems with accessing Express endpoints on Firebase hosting when using a Create React App production build.
The only change I made to firebase.json was switching from the default public folder to create-react-app/build.
When I go to example.com/test in browser, using Create React App in production, it just redirects me back to index, but using a separate REST client I'm still able to access that endpoint.
If I switch back to the default public folder in firebase.json and deploy to production, accessing this endpoint from the browser still works as well, but I no longer have Create React App of course.
What is happening here? Any help is appreciated.
UPDATE: It has something to do with service workers. I was able to find a temporary workaround by commenting out:
import registerServiceWorker from './registerServiceWorker';
and
registerServiceWorker();
from src/index.js.
Then I went to Chrome developer tools and "unregistered" the service worker from the Application menu.
Now I'm wondering how to correctly implement service workers.
It may be happen, because when you done firebase init, last question from console was something like - make a single page app (redirect all URL to index.html).
So what you can do, is to tun firebase init again, and select in this option NO.
And make deploy again.
Related
I am trying to tie my react app to firebase,
I understand the general idea behind but the it seems like there are few different binding
options depending on how much you want get into functionality of firebase.
0.0 basically without registering a firebase app in the project to my react app and using any service lets say from authentication or database. Ive been able to use make POST and GET request as well as sign up and in users without regiestering an app from firebase website.
just have to use the end points given by the service you wish to use.
1.0 I guess this is the more proper way which registering a firebase app to my react app
either by using npm or script/cdn. I am new to firebase so i did not know that i had to do this.
2.0 basically the same step as 1.0 but also initializing/configuring firebase app(?) with Firebase CLI which creates things like
A firebase.json configuration file that lists your project configuration.
A .firebaserc file that stores your project aliases.
this is now where i get confused as to how to go about combiniing with my react app.
for example, locally, react app is running on port 3000 but when i use CLI's firebase emulators: start script, what will happen to my react app which is running on 3000.
How do you guys set this up correctly? i guess it depend on how much backend i want to use but what i need firebase for mostly is to use authentication and database...
I’m trying to deploy a basic react app to Azure app services, but I cannot get it to work.
The app itself is the initial app created following npx create react app my-app command. I want to get this one working first before trying to deploy my actual react app.
The Azure App Service is a Linux setup, using node 16.
I’ve added “pm2 serve /home/site/wwwroot --no-daemon” as the startup command. I’ve also added PORT 3000 and WEBSITE_PORT 3000 in app settings.
Lastly I’ve added a web.config file to the react app itself.
Nothing I do seems to work though as it is not loading at all. I just get ‘application error’ if I try to open the app.
The only two errors i can see in the logs are:
“…didn't respond to HTTP pings on port: 3000” and “… did not start within expected time limit”
My deployment is set as continuous via git hub, though as this is building without an issue I think the problem must be something in the Azure App Service settings but I’m lost as to what.
Does anyone have any ideas to fix this?
It could be that there is no access to port 3000 in the app service.
It depends on how you have set it up what needs to be fixed. It could be the network settings on the app service. If your app service is on a VNET then it could be the settings on the VNET that need to be updated.
I am trying to alert users when there is a new version deployed in my react app. Here I am using webpack to bundle our modular application which yields a deployable /dist directory. Once the contents of /dist have been deployed to a server, clients (typically browsers) will hit that server to grab the site and its assets. I am using caching techniques as mentioned in https://webpack.js.org/guides/caching/ and for each deployment, I am getting new content hash id.
I need something similar to the below screenshot where the user gets a notification to refresh the page. Is there any way you guys can help me out in this?
I am new to React and created a simple react app using create-react-app , it builds and runs fine on local. I created a Azure Build and release pipelines and tried deploying using App Services , refereed below Microsoft link to implement the same.
https://devblogs.microsoft.com/premier-developer/deploying-react-apps-to-azure-with-azure-devops/
Build and release pipeline runs successfully however when I click the Azure app services link to access the react app, I receive below message :-(
"This react-naturalone.azurewebsites.net page can’t be found
No web page was found for the web address: https://react-naturalone.azurewebsites.net/
HTTP ERROR 404"
Can someone please suggest what I am missing.
fyi, I am using react-router, hence added the web.config as mentioned in the link above.
Thanks
AOU
I'm thinking that there is a problem with your deployment pipeline. The first step for your here is to go to your Azure portal and open up your app service. From your app service, go to -->Development tools --> App service editor.
Do you see your code inside it? If you don't, you can confirm that the code didn't deploy correctly. If you do, then you have a misconfiguration somewhere in your app that is preventing anybody from seeing it.
Newbie React learner here!
I created a react app from scratch, using webpack and babel). In the application, there are many fetch requests. The API URL has "HTTP" in front, and unfortunately, there isn't an https alternative for that. ( I tried putting an S or removing the / at the end but it didn't work).
The project worked fine locally with no errors. I made some configuration setup in order to host it with firebase, and then built and deployed it. The setup worked also error-free, but when I visited the page I saw that there was no fetched content. When I checked the console there was the mixed content error for all the fetch requests.
Mixed Content: The page at 'https://yu-gi-oh-deck.firebaseapp.com/' was loaded over HTTPS, but requested an insecure resource 'http://52.57.88.137/api/card_data/Burial%20from%20a%20Different%20>Dimension'. This request has been blocked; the content must be served over HTTPS.
To be honest, I have more than one questions, but there are all related to this project and how to move from here. I hope there isn't an issue with that.
Can I "undo" the firebase configuration from my project?
Are there other free options for hosting my app with no errors about https?
(it might be a stupid one). I haven't pushed the changes from the firebase setup to my Github repo. Can I edit my project even after running build and deploy?
Here you can find some of your answer and possible solution: Can sites on Firebase hosting include non-https resources?
Look at this post to stop hosting: How do I remove a hosted site from firebase
This is a post to host your single page app on GitHub: https://itnext.io/so-you-want-to-host-your-single-age-react-app-on-github-pages-a826ab01e48
You can still edit your project, it has nothing to do with Firebase hosting.