We currently have a Ionic v1 project that calls an API implemented as a Google App Engine application. This Ionic app runs with Ionic serve, PhoneGap, and when deployed to Android/iOS.
We are now trying to deploy to the web using Firebase hosting.
The initial HTML/JS code all runs correctly until we reach an $http.get call to the Google App Engine. What happens then is that the request reaches the GAE server and is processed correctly there with a response being sent back. But in the client code, the response.data property is the contents of the Firebase application’s index.html rather than the response that was supplied from GAE.
We don’t know why this is happening, or how to fix it, but here are some relevant facts:
When we run the app on a device using PhoneGap or via the Google Playstore, the URL by which we access GAE is the same URL if we were accessing GAE from a browser. But, when we run the app via “ionic serve” we must use a proxy to work around a CORS issue. What we do is to specify a simplified URL in the Ionic code, and then provide a mapping of that simplified URL to the GAE’s actual URL in a file called “ionic.project” which looks something like this:
{
"name": "proxy-example",
"app_id": "",
"proxies": [
{
"path": "/api",
"proxyUrl": "http://cors.api.com/api"
}
]
}
When we attempt to deploy the app via either “firebase deploy” or “firebase serve” we must use the proxy version of the URL in our $http.get call. Otherwise the call does not reach the GAE server at all. It is not clear how Firebase knows to use “ionic.project” for the proxy mapping.
We are not using “Angularfire”, only the standard AngularJS library that is packaged with Ionic 1.x
Thanks for any help you can offer.
Related
I'm investigating a way of deploying an Angular or React web application on Google Cloud using GCS, Load Balancer, and CDN.
I've set up the LB and the GCS using the urlRewrite, but since the LB does not allow full URL rewrite only pathPrefixRewrite, I cannot redirect all the requests to /index.html
I want to achieve the same functionality as firebase hosting where you can specify the rewrite rules
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
Another option will be to set the 404 page as index.html, but that will result in a 404 status code return by the server, which I don't like.
Is this possible with Load Balancer, because they are not supporting a full rewrite?
Google added rewrite engine in 2020 (see https://serverfault.com/questions/927143/how-to-manage-url-rewrites-with-a-gcp-load-balancer/1045214) and it is only capable pathPrefixRewrite (stripping fixed prefix).
For SPA you need variable suffix rewrite to index.html so you use Nginx or Firebase.
Or mentioned error handler in bucket's HTTP server (with a downside of HTTP code 404 for your virtual URLs):
gsutil web set -m index.html -e index.html gs://web-stage/
Full instructions to set SPA app is here: Google cloud load balancer create backend service for Firebase Hosting to serve microservices & frontend SPA from the same domain via load balancer?
Discussion of LB rewrite engine limitations:
How can I implement a .htaccess configuration in Firebase Hosting?
Google Cloud Load balancer URL Rewrite not working
https://www.reddit.com/r/googlecloud/comments/8zgg20/static_website_url_rewrite/
HTTP Error 404.3 - Not Found
The page you are requesting cannot be served because of the extension configuration. If the page is a script, add a handler. If the file should be downloaded, add a MIME map.
I got this error when accessing react frontend. the app is hosted on the azure app service. so anyone knows how to fix this? is it need to be done in react side?
TLDR: React app interfaces properly with Flask API on PythonAnywhere when hosted locally but not when a static build is hosted on Netlify. Perhaps the proxy information is missing from the build?
EDIT 1:
Here are the errors in the browser console:
I've created a Flask API that pulls machine learning models from Amazon S3 and returns predictions on data input from POST requests. I've put this API on PythonAnywhere.
I've also created a React frontend which allows me to input data, submit it, and then receive the prediction. When I host this app locally, it behaves appropriately (i.e. connecting to the Flask app on PythonAnywhere, loading the models properly, and returning the predictions).
I've tried deploying a static build of the React app on Netlify. It behaves as expected, except for anything that requires interacting with the Flask App. I have a button for testing that simply calls the Flask app in a GET request, and even this is throwing a 404 error.
I checked the error and server logs on PythonAnywhere and see nothing. The only thing I can thik of is that my proxy which lists the domain of the PythonAnywhere app in my package.json file is for some reason unincluded in the build, but I don't know why this would be the case.
Has anyone else run into a similar issue or know how I can check to see if the proxy information is included in the static build? Thanks in advance!
Thanks to #Glenn for the help.
Solution:
I realized (embarrassingly late) that the requests were not going to the right address, as can be seen in the browser console error above. I was using a proxy during development, so the netlify app was calling itself rather than the pythonanywhere API. I simply went into my react code and edited the paths to pythonanywhere. E.g.
onClick={ async () => {
const response = await fetch("/get", {...}}
became
onClick={ async () => {
const response = await fetch("https://username.pythonanywhere.com/get", {...}}
As #Glenn mentioned, there may have been a CORS issue as well, so in my flask application I utilized flask_cors. I can't say for sure that this was necessary given that I didn't test removing it after the fetch addresses had changed, but I suspect that it is necessary.
Hopefully this can help someone else
I have recently developed an React app in which I made HTTP request to external API using Axios library. Then I used gh-pages to deploy it. But it doesn't even show up (it's a blank page). I know GitHub only hosts static pages. The React app is running perfectly fine on localhost.
When I host React App on Localhost using npm start and request data using HTTP GET request using Axios Library. I receive a JSON format data from the API. And I use this data to show on front end of the React App.
But when I host the react app on git hub pages and request for data using the same way. It does not send HTTP requests to the API. And hence webpage is static in nature
have you tried to change http:// to https://?
because browsers nowadays don't let http requests to happen
EDIT I posted an issue on this and it should be fixed in release 1.9.16 of Google AppEngine SDK.
https://code.google.com/p/googleappengine/issues/detail?id=11414
I am developing a service using Google Cloud Endpoints.
Both the REST and the RPC API works great when I deploy it on App Engine. However the strange thing is, when I test the service locally (localhost), the REST calls works fine, but I am having trouble with calls using RPC.
My method signature in the backend is:
#ApiMethod(name = "user.updateprofile", httpMethod = HttpMethod.POST)
public UserProfileDto updateProfile(#Named("sessionToken") String sessionToken, UserProfileDto profile) throws UnauthorizedException { return profile; }
For simplicity I am just returning the UserProfileDto directly.
I have tried to execute the following request locally:
POST http://localhost:4567/_ah/api/rpc?prettyPrint=false
Content-Type: application/json-rpc
Accept: application/json-rpc
{
"method": "mobilebackend.user.updateprofile",
"id": "gtl_1",
"jsonrpc": "2.0",
"params": {
"sessionToken": "12345",
"resource": {
"username": "foo",
"userPrivate": true
}
},
"apiVersion": "v1"
}
When I set a breakpoint in the updateProfile method, I see that the sessionToken is correctly 12345 however the username field is null and the userPrivate field is false even though I specified it as true. The instance of UserProfileDto (profile) is not null.
The problem is that it fails to inject the values into the fields of the DTO when using RPC calls localhost. When I test it on the deployed version it works fine, and when I use REST calls it works both on localhost and when deployed on App Engine.
When I change the url in the above request to target the deployed version of my application on app engine it works just fine. https://<app-name>.appspot.com/_ah/api/rpc?prettyPrint=false
I start the service on localhost using:
mvn appengine:devserver
Do I miss some configuration in order to call the Cloud Endpoints RPC methods localhost? Or is it not supported?
I should notice that I have also tried with the auto-generated iOS client library which is using RPC and it also fails with the same error as the service fails to inject the values into the fields of the DTO object.
I have tested release 1.9.17 of Google AppEngine SDK and can confirm that using objects in RPC POST requests now works fine.