When I checked the Heroku build logs, it showed this:
The requested API endpoint was not found. Are you using the right HTTP verb (i.e. GET vs. POST), and did you specify your intended version with the Accept header?
My app runs on React framework for front end, and I use the Firebase realtime database for my backend. The app runs fine on my local server but when I try to deploy on to Heroku I run into this error.
My guess is that you didn't set the environment variables, thus the base url for your request might be invalid. You can set them in Settings tab of your heroku application, under the Config Vars section.
Related
I have an app which I had pushed to heroku a few days ago, where it works fine, but when deploying the app to Netlify, the app deploys but the graphQL connection throws a 404 error. Here are some images.
Here is the code I use in App.js
Is there anyone that knows how I can fix this? Much appreciated
Netlify doesn't run a app server like Heroku, it only runs a static file server. From your code, it appears that you're trying to serve a app that you could connect to and provide yourself with GraphQL access. This is not possible on Netlify, at least not directly.
The only server-like solution that Netlify currently provides in Netlify Functions. However, those are limited to 10 sec by default and provide, one-time data connection - not something that you could keep on using for GraphQL.
So if your requirement is to keep the GraphQL server running (for example like what Gatsby does during gatsby develop), Netlify is not the solution for you. If you wish to send the data one-time and add some server-side processing, you can take a look at Netlify Functions.
How do I get Firebase Auth to work on Heroku Deployment?
Auth works in MERN app's local development without any issues. All private information is stored in an .env file and then called in my react app with process.env.VARIABLE_NAME.
However, when I deploy to Heroku production and add the env files as shown here, I get the error: "Your API key is invalid, please check you have copied it correctly"
This is my deployed Heroku app: https://evening-fortress-01391.herokuapp.com/login
REACT_APP_FIREBASE_API_KEY=XXXXXXXX
REACT_APP_FIREBASE_AUTH_DOMAIN=XXXXXXXX
REACT_APP_FIREBASE_PROJECT_ID=XXXXXXXX
REACT_APP_FIREBASE_STORAGE_BUCKET=XXXXXXXX
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=XXXXXXXX
REACT_APP_FIREBASE_APP_ID=XXXXXXXX
Also, running the command heroku config displays the inputted env variables in the terminal.
Any idea why Auth works locally but not in deployment? Thank you!
Answer because too long for a comment.
Sounds super hard to debug - also your app just shows a login and not the API key error =) To me it sounds like either just like it says, an incorrect API key or a formatting issue.
I would make a test config variable using the same characters as your API key like REACT_APP_FIREBASE_POTATO=p07470-test-example-foooobar and then in your frontend app just console.log("TEST" + process.env.REACT_APP_FIREBASE_POTATO);. Then publish that and check it in production.
This tests are the environment variables working at all and are there some character encoding issues (do you see the exact characters in the console as you should)
I have setup Firebase AppCheck for my Web App and everything seemed to work fine. Now I would like to enable the debug mode when developing my app.
I followed the instructions in the official documentation but I keep getting random errors from the AppCheck module, and these prevent my app from accessing Firebase Storage:
...at Backend FirebaseError: AppCheck: Fetch server returned an HTTP
error status. HTTP status: 429. (appCheck/fetch-status-error).
Following the doc, this is the way I set AppCheck in debug mode - this is ran before everything else:
if(window.location.hostname == "localhost")
self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
Again, when my app is not in debug mode it works just fine.
Note 1: that I am not enforcing AppCheck via the console, and that 100% of the requests are displayed as "Verified"
Note 2: googling for "Firebase error 429" shows many results referring to some quota being exceeded, something hardly possible for my dev environment (we are 2 devs and definitely not putting in any sort of load on the app)
Its a bug with the js library
https://github.com/firebase/firebase-js-sdk/issues/5052
You should be using environment variables to detect debugging mode or not.
Depending on your framework and setup, this could be a command that you set up in your serve/build commands or a local env file that contains a specific debug key.
There is another issue if your reCaptcha is set to use localhost as the documentation states:
Warning: Do not try to enable localhost debugging by adding localhost to reCAPTCHA’s allowed domains. Doing so would allow anyone to run your app from their local machines!
I have create-react-app bootstrapped application which I build and then serve it to the static server using serve-s build. The React app is running on http://locahost:3000.
This app talks to my backend REST API(using java) which is running on http://locahost:8080.
Inside my React application, I have set axios.default.baseURL=http://localhost:8085/api.
Everything is fine on the localhost on my system. The React app talks to http://localhost:8085/api/xyz for CRUD operations and everything works great.
Now I have to deploy the project on AWS EC2 instance. The MySQL and REST API got deployed and rest API there is running on same instance on the port 8085 as http://locahost:8085. I have Apache server configured which sends the hostname(www.myxyzwebsite.com) to the http://locahost:3000 on the server. Everything is fine till now. The home page is visible on the browser.
Now, when the React app tries to communicate to the REST API from the browser, it is sending the request to the http://locahost:8085. Obviously, now the browser looks for some service running on port 8085 on my system and it couldn't find. Ideally, the request should go to the server with my hostname(www.myxyzwebsite.com/api/users/puspen). How to make this REST API call looks like an actual call like www.myxyzwebsite.com/users/pusp?
NOTE: Please note that this is not a server-side-rendered application.
I am writing a SPA using create-react-app and am using an expressjs server as my backend. For development I run my frontend test server on port 3000 and my backend expressjs test server on 3003.
I make many API calls client side using Axios so for development convenience I have defined proxy: "http://localhost:3003" in my package.json
This works fine on my laptop, but when running on my workstation I constantly get the error when accessing my app:
Proxy error: Could not proxy request /sockjs-node/487/wrst1bub/websocket from localhost:3000 to http://localhost:3003/. See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNRESET).
I have no idea where this is coming from and I do not use sockjs in any capacity as far as I know. This is a console error and it does not crash my app but it is very annoying and I would like to get rid of it. Any help is greatly appreciated.
In my case, I was using Firefox and for some reasons, it gives me the same error. I tried to use Chrome and it worked!