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...
Related
I made a Dashboard using plotly Dash for my office and this Dashboard should go alongside a Digital report I made using React and plotlyjs.
Here is the structure of the website:
I used this Hackers and Slackers guide to run the dash app on flask server. I also integrated React and Flask successfully and was able to fetch data from flask to react and display it.
Now the issue I am facing is I am unable to access the dashapp at localhost:3000/dashapp. I was able to access the app at localhost:5000/dashapp. How can I make this accessible at localhost:3000/dashapp along with other react pages?
If you have two different applications, they cannot run on the same port. So one should run in 3000, and other in 5000.
However, you can have some apache configuration for redirecting the requests from browser to two different apps using one port. So, based on the configuration, if you do localhost:80/dashapp, this will point to localhost:5000/dashapp. And if you do localhost:80/reactapp, this will point to localhost:80/reactapp.
Refer to this for configuring the apache: https://geekflare.com/multiple-domains-on-one-server-with-apache-nginx/
For Example, i am using react-native-firebase library.
I want to grow my app install and i create a campaign.
The question is how can i know my app is installed by clicking ads or my app is downloaded directly on play store.
Simply i want to know where was my app downloaded from. I do implement firebase analytics configuration.
It seems like you could follow the advice given in this question: https://stackoverflow.com/a/47893179/4147687
Essentially, if all you want is simply a way to track how your app was installed, you can simply pass utm parameters along with your URL.
For example:
https://link-to-my-app.com/?utm_source=business_card&utm_medium=email&utm_campaign=sign_up_offer
Google Play has it's own URL builder to make this step easier here. If you are not using any specific ad network just set it as "Custom".
Firebase will automatically scrape the source, campaign and medium parameters there and present them to you in the first_open conversion event. Documentation for how this works is here.
The easiest way to do this is by using this npm package
https://www.npmjs.com/package/react-native-install-referrer
You should invoke the API only once during the first execution after install.
You can do that using AsyncStorage to check if its freshly installed or not and then you can logEvent based on that UTM url and track the users
After creating the event you can segregate users by creating Audiences in the firebase console.
I'm looking for a simple solution to deploy small React app with full React router support (no # urls). I've been using firebase so far, but I need to send an email from form, and used PHP for that.
Is there a service like firebase but with PHP support? Or can I somehow connect PHP file from other hosting (now I receive an error trying do so)?
You can use google cloud functions which allows to connect with the firebase.
For an example
-> ReactApp Form for UI
-> Firebase stores data based on users input through React App.
-> Google cloud function which gets called when there is an event in firebase database for an example (Create, update and delete). You can write logic in function which sends an email through send grid. You can write function in Nodejs and golang.
Example (https://cloud.google.com/functions/docs/tutorials/sendgrid)
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.
I currently have a Single Page Application using( React+Redux+React-Router) hosted on firebase hosting. I want to implement server side rendering, for which I am aware I need to run a node/express server on something like Heroku, but I'm unclear how to do this. I have seen many starter boilerplates i.e Este that incorporate server-side-rendering but I want to add this capability to an existing Project. Somehow, The static content hosted on firebase should have access to my server but again unclear how to implement it so i can get al the benefits involved with SSR.
Since you are already using Firebase you can utilize Firebase functions.
Just setup a new function which intercepts your http request and then you just fetch all the stuff you need and render to a string with react routers render to string method.
There is a good tutorial covering all the bits and pieces of this here
https://m.youtube.com/watch?v=82tZAPMHfT4