I'm building web app with flutter web and I'm using firebase hosting to serve the web app.
The web app makes an API post request to the static IP of my aws ec2 instance to get a response
const String api = 'http://7.91.300.2411:8080/predict';
Map<String, String> upload = {'data1': _data1, 'data2': _data2};
var _body = jsonEncode(upload);
final Uri uri = Uri.parse(api);
http.Response response =
await http.post(uri, headers: _headers, body: _body);
When I run the app on development, like on my local machine, it works, I see the logs on my ec2 server saying the endpoint was hit/called, and then it runs successfully.
But when I now deployed this web app to firebase hosting, the endpoint never gets hit/called, is as if the http post request was not made.
I've upgraded my firebase plan to blaze, yet it's still not working. I also enable cors on my ec2 instance.
Something I taught could solve the problem, was to edit the firebase.json file, and add some config to enable firebase hosting allow calls to external apis, but I don't know how to go about it
Actually, Firebase Hosting does not make calls to external APIs. Firebase Hosting "serves both static and dynamic content to a global CDN (content delivery network)". In the case of a Flutter web app, Firebase Hosting serves the files that were generated in the /build/web directory of your project when you built the app for deployment (aka the app release bundle).
The only scenario I can see that could be considered as Firebase Hosting making calls to external APIs is if you pair Firebase Hosting with Cloud Functions or Cloud Run, which, when they are executed, call the external API. Strictly speaking, in this scenario, Firebase Hosting does not call an API but serves dynamic content that was generated via a call to an API.
If I'm not mistaking, by looking at your code, we can conclude that this scenario does not apply to your case. In your case, Firebase Hosting just hosts your Flutter app release bundle.
In your case, you are using the Dart http package in order to call the API from your web page/app. I don't see any reason why Firebase Hosting would prevent that: Your browser has downloaded the web page from Firebase Hosting and then the web page initiates, from your browser, a direct call to an API (without calling Firebase Hosting). So most probably the problem comes from something else.
Related
What is Firebase Hosting for? Examples? I'm not clear on what it does with respect to hosting a website or server or both....
My understanding of hosting is that one would enlist something like Bluehost or GoDaddy to host a webpage, which they would then upload the website files via an FTP. I see it appears Firebase Hosting may serve a similar purpose and you can add your own domain name like this.
I also understand that websites sometimes require a separate server to do things like: processing requests while keeping secret keys hidden, or rendering a unique webpage server-side and sending a static page to the user. I've used Firebase Realtime Database for non-secure data storage, but I would like to be able to use the hosting as well for serving private user-specific content without exposing keys.
I just did a tutorial to create what seemed like a web app that one would query from another webpage, but I wasn't able to deploy and try it out because of the pay-wall.
Can Firebase Hosting be my secondary server that processes private requests to a database or is it only for hosting a user-facing webpage, or both?
I am new to programming and would appreciate hearing if it seems like I am misunderstanding something within my question. Recommended resources for further learning on this subject are greatly appreciated!
Thank you.
Hosting a static web site
Firebase Hosting on its own is a service for hosting static assets. So in your scenario HTML + CSS + Images + JavaScript files that are included in them. None of this content is executed, or in any other way interpreted, on the Firebase servers. You upload (in Firebase terms "deploy") the files to Firebase, which then distributes then to its global CDN edges, and when your site is visited, the content it served from that CDN.
In the Firebase documentation on what can you host this is referred to as:
Host your single-page web apps, marketing websites, and static and dynamic assets
Hosting a static web site with dynamic content
You can use Firebase with many of the other back-end services to add dynamic functionality to your static web site. For example, you can call Realtime Database from your client-side JavaScript code, and display dynamic data in your static web app that way. Firestore would be similar, which you could use in place of Realtime Database. Similarly you can use Firebase to connect to Cloud Storage, for storing of files, for example to allow your users to upload and view images.
And then you'll typically want to secure access to all this dynamic content. At that point, you use Firebase Authentication to allow your users to sign in, and when you'll use Firebase's server-side security rules, which are available for Realtime Database, Cloud Firestore and Cloud Storage. These rules determine what data or files the users can access.
The Firebase documentation covers this in the section on deep integrations with other Firebase products.
Firebase Hosting works out-of-the-box with Firebase services, including Cloud Functions, Authentication, Realtime Database, Cloud Firestore, and Cloud Messaging. You can build powerful microservices and web apps using these complementary Firebase services.
Adding dynamic server-side pieces to web site
You can integrate Firebase Hosting with Google Cloud Functions and Cloud Run to build dynamic web sites. In those scenarios, you host the server-side code on Cloud Run or Cloud Functions, and set Firebase Hosting up to redirect certain URLs to specific end points in your server-side code.
In the Firebase documentation on what can you host this is referred to as:
Pair Firebase Hosting with Cloud Functions to build microservices using the Express.js framework. This pairing allows you to host your microservices and APIs on Firebase.
I have 2 repos one for firebase functions and another for static firebase hosting react site. They both use same firebase project.
myfirebaseproject
--- firebase functions
--- firebase hosting
------index.html
Can I read my firebase-hosting files from firebase-function?
let indexHTML = fs.readFileSync('pathToFirebaseHosting/index.html').toString();
One important thing to realize is that Firebase Hosting and Cloud Functions are completely different products, and there is not a simple local path for Hosting files available in a very temporary and transient Cloud Functions instance. Everything is not bundled up together in one place (that wouldn't scale at all).
Since Hosting files are all public, what Frank says is right - just make an HTTP request for what you need. I suggest using the request-promise module instead, as it gives you a promise-based interface that's easier to work with in Cloud Functions.
Please note that if you want to make an outgoing HTTP request like this, you will have to enable billing on your project. Otherwise, Cloud Functions will not allow the request to happen. Also note that the egress and ingress from both Cloud Functions and Hosting will have additional billing. So if you make this request frequently, expect some costs associated with it.
If you just want some static files available in Cloud Function without having to make an external request, simply copy those files in to your functions folder and deploy them all along with your code. You will be able to read them locally, you won't need to enable billing to try it, and you won't incur egress and ingress charges. It'll also be faster.
While there is a REST API for Firebase Hosting API, it is focused on deploying updates, and does not have a call to access the deployed files.
But since all deployed files are publicly accessible, you can read them from the public internet with a regular HTTP request:
request('https://yourproject.firebaseapp.com/index.html', (err, res, body) => {
if (err) { return console.log(err); }
console.log(body);
});
I have hosted my WEB APP in firebase. It consists of a WEB APP that calls a WCF Service also hosted in firebase.
The problem is that at the time of calling service, firebase returns 404 error.
The app and the service work perfectly in my local IIS, so it's not a code error.
I commented to them that the error that it gives me is that it does not find this page (404) when in fact I would be returning the result of my query.
https://recoveryerpwcf.firebaseapp.com/General.svc/Select?tabla=Compania&codigo=0&columnas=%5BCodigoAgrupado%5D%7C%7C%5BDescripcionAgrupada%5D&filtro=&columnasf=%5BDescripcionAgrupada%5D&top=999&_=1528745507843
Firebase Hosting can serve static assets, and (by connecting it to Cloud Functions) Node.js scripts.
There is no way to host a WCF service in Firebase.
I have three Firebase projects representing Development, Staging and Production environments hosted on Firebase hosting. Each environment utilizes its own deployed Firebase functions like so:
Dev function endpoint: https://us-central1-my-app-dev.cloudfunctions.net/someFunction
Staging function endpoint: https://us-central1-my-app-staging.cloudfunctions.net/someFunction
Production function endpoint: https://us-central1-my-app.cloudfunctions.net/someFunction
I can't figure out how the static, Firebase-hosted client React application should invoke these functions because the URI endpoints of each changes depending on which environment the code is executing from.
Ideally I could set environment-specific configuration for each Firebase Hosting environment; unfortunately the only way to do this in Firebase Hosting is from within Firebase Functions themselves.
How can I retrieve the environment-specific endpoint for each Firebase Function?
You have a couple options here.
First, you could just configure your React app any way you like. It's necessarily not a bad thing for each system component (backend, frontend) to have its own configuration.
Second, since you're using Firebase Hosting to serve your static content, you can also use it to serve your functions API endpoints. This means that both your static content and API endpoints are all served through the same hostname, which means you no longer have to specify the host when making a request. All the requests can be relative to that host. You can achieve this via Hosting rewrite rules.
I am trying to find an alternative for Firebase to create functions that will work with actions-on-google DialogFlow class. I am creating a nodeJS app which will create a web service endpoint which will be configured as the Fulfillment URL in the DialogFlow dashboard. All the business logic to handle the request from API.AI will be at the nodeJS app. This app will then send back response by calling app.ask() and other related methods of API.AI (aka DialogFlow)
Reason: Our deployment cloud is on OneOps and we have dedicated assemblies for nodeJS apps. That is, I need to deploy this node app on our OneOps cloud and not on Firebase cloud.
Is there an alternative over Firebase here?
Absolutely! With Dialogflow you can define any URL (preferable HTTPS) in Dialogflow's console and you're free to use any hosting platform that can speak HTTP:
Also, you should be able to use the Action on Google library to respond to requests on most Node.js environments
Certainly! You can use whatever you want - all that Dialogflow requires is that the webhook be on a public address with a valid HTTPS certificate.
When designing the webhook, you'll need to accept a POST request from Dialogflow that contains JSON as the body, and similarly respond with a JSON body.
Since you're using node.js, you'll likely be using Express. One thing to note if you'll be using the actions-on-google library is that it expects that Express has already populated the req.body with a JSON object - not with the string body. This is typically done with middleware such as body-parser.