I have an app that uses a React/Redux client (generated by create-react-app) and it communicates with a Node/Express api. When I run this during development, it works perfectly.
I just deployed to Heroku for the first time however, and only the client side of my app is working. I get error messages in the console that the api routes return a 404.
Any ideas on how to solve this? I think it must be something simple like adding a script to package.json.
UPDATE: SOLVED: The issue was a freaking Procfile. Make sure to include a Procfile and write web: node server inside.
Related
I created a react App which talks to a node back-end. Everything works fine in development mode. The connection between the front-end and back-end is made through websocket.
Most interesting thing is, that after doing yarn build to create the production build of the app, all the pages work fine. The only thing is that, the page that integrates connection with the back-end is returning error when I inspected it in the browser. I am using Apache Server to run the build version of the app on localhost.
I am using Apache server since python server throws errors on page refresh.
Below is the screenshot. As you can see, node server command, return the expected response from the backend app. The structure of the app is also shown; revealing the relationship between the front-end (smartschool and smartresult) and back-end (smartapi). Only the smartresult makes the request to back-end. How do I resolve this connection problem? Any help will be appreciated. Thank you.
I'm looking to access the Heroku port on the client side.
My app is a monorepo that deploys a node.js server, which serves React code for the client side.
The node.js server can access process.env.PORT just fine, however, I cannot access it within my react code.
I tried a few workarounds:
Write an .env file (with the port) during runtime and read from that. Works locally, but not on production (Heroku) since Heroku won't let you use fs.writeFileSync
Write to an existing empty .env file. This seems more plausible, but I can't get it to work
I tried looking at the solution from here: How to access $PORT environment variable in React App on Heroku but my setup is different. I don't know what configure(...) is. All I want is to access process.env.PORT on the client side.
Is there any simple way of doing this?
on your client-side file
change all http://localhost:port/ to
https://yourAppName-app.herokuapp.com/
It will run properly when you deploy on Heroku.
change it back if you want to work locally.
I have a NodeJS backend running at http://localhost:4050, and I had configured my react application to make API calls to there. For deploying on heroku, I had to change the PORT variable in the backend to be process.env.PORT. As a result when I put the react app's build folder in the backend's server folder, the react application was still searching for localhost:4050 when I deployed to heroku and naturally failed to make calls, because heroku ran the application on an arbitrarily different port. But apparently adding the very same http://localhost:4050 as "proxy":"http://localhost:4050" in the package.json file worked. I'm really curious as to how doing that got it to work.
proxy field in package.json is used to proxy all requests from frontend domain to backend. For example, you have:
Backend (REST API): localhost:5000/api/user/:id
Frontend (React.JS app): localhost:3000/user
If you call axios.get('/api/user/123'), the browser will send this request to localhost:3000/api/user/123, but then react dev server will peoxy it to localhost:5000/api/user/123
Please note that this is only for development environment. If you want to deploy your React.JS, there's a better way: https://blog.heroku.com/deploying-react-with-zero-configuration
Hi Im running my frontend (create-react-app) and backend server (express.js) on different ports but on the same host.
For example: frontend is on 127.0.0.1:3000 and backend on 127.0.0.1:3003.
in my package.json:
{...
"proxy": "http://localhost:3003",
...}
Everything worked fine till I didn't migrate my app to remote server.
My app started to refresh unexpectedly when I'm trying to send http request (axios) to server (probably due to bad proxy settings).
So I have frontend app running on 35.125.320:10:3000 and server is running on 35.125.320:10:3003. My http requests was unexpectedly cancelled. (I checked the network ). So I changed my proxy settings to
{...
"proxy": "35.125.320:10:3003",
...}
but anyway my app is still refreshing when Im trying to make http req. on server. I think the problem is that I can't reach my express backend server. So proxy is forwarding my requests badly.
UPDATE
scenario:(Im doing two post requests)
1) first request still passed (app is not refreshed)
2) same request passed (but sometimes app is refreshed)
3) second is still cancelled by browser.
QUESTION
How can my frontend communicate with backend server via proxy when they are running on different ports but on the same server and domain ??
Thanks for the answer.
Solution:
The problem was that I used proxy in production that is only suitable for development.
I added this line in my express.js server :
app.use(express.static(`${process.cwd()}/build`));
app.use(express.static(`${process.cwd()}/public`));
I make a build and serve js,css files from my build folder. And also I needed serve static files (images, folders, etc...) from my public folder.
This problem can also cause cancelling http request by browser on production. Means, requests weren't able to reach server.
To make your app publicly available, you will want to make a production build. You mentioned in a comment that you "run npm build and then serve this build as static file in express.js". This is a great way to make your react app publicly available. As it says in the create-react-app documentation:
npm start or yarn start
Runs the app in development mode.
When running yarn start or npm start, you are also given a notification that says "Note that the development build is not optimized." The best option will be to run yarn build or npm build and find a way to serve those static files as you are doing.
So I'm building my first single page app with react, and it's going well so far.
I'm using create-react-app to build and run the app I'm building, and now I arrived to the part which I need to interact with a Server side.
so when I tried to find the way to build an express with socket.io server, I couldn't find how to do it so the create-react-app will build it to.
so my questions is this -
How can I create a server side and compile it throug the create-react-app?
or on the other hand, how can I integrate socket.io and react app on create-react-app?
thanks,
Eilon