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)
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 am trying to build a static React App which displays api documentation. For backend I am using swagger (hosted separately in a lambda) which generates the JSON data model. With new endpoints created, I have a lambda which will give me the details of the endpoint, like headers, requests and response. The data comes in format of JSON which is dropped in a s3 bucket. Could my react app deployed in the same bucket, consume that json and render the newly added api documentation details? I need help on the same without a node backend?
Here is an example of what I am trying to build
A react app with cooking receipies is deployed statically hosted in s3.
The receipies for this app is in JSON model, which is common for any up comming receipies
This app is in AWS s3 bucket.
A new recepie needs to be added to my app. But my app is already built and hosted.
Can I build my app in such a way that if I drop any new JSON files, it would consume that file and render/refresh its frontend, without a server in S3?
Given that your app is statically hosted in S3, you will have to write client-side JS code to check for the new recipes.
You can call your Lambda from the client-side to get the endpoint and send a request to get all the recipes. If the folder path in S3 is known, you can do this check without needing the Lambda.
This way, your app will refresh the frontend without a server when you add a new JSON file.
After some through research I found that, you could drop all your JSON files in Public folder in React App. The files in this folder will not be altered. So you could access them in your react component with react useEffect Hook. Here is the reference article I took this implementation from.
How to add Static JSON files in React App post deployment
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 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