Problem hosting React + Node.js app on heroku - node.js

Question

When I work on my project locally (without problem), I do npm start which works on port 3000, also i have to open another terminal and do node server/server.js which works on port 4000. Then I will be able to work with my browser to connect my both frontend and backend. Now I am trying to host this project on heroku but no luck. here are my error:
2020-08-26T11:54:23.905587+00:00 heroku[router]: at=error code=H13 desc="Connection closed without response" method=GET path="/" host=whatever.herokuapp.com request_id="whatever" fwd="96.20.56.73" dyno=web.1 connect=1ms service=159ms status=503 bytes=0 protocol=https
and package.json:
{
"name": "library",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:4000",
"dependencies": {
"#material-ui/core": "^4.9.9",
"#material-ui/icons": "^4.9.1",
"#material-ui/lab": "^4.0.0-alpha.48",
"#material/react-snackbar": "^0.15.0",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.4.0",
"#testing-library/user-event": "^7.2.1",
"chai": "^4.2.0",
"clsx": "^1.1.0",
"cookie-parser": "^1.4.4",
"dotenv": "^8.2.0",
"google-maps-react": "^2.0.2",
"hookrouter": "^1.2.3",
"i18next": "^19.4.1",
"i18next-browser-languagedetector": "^4.0.2",
"i18next-xhr-backend": "^3.2.2",
"immer": "^5.3.6",
"mongo-seeding": "^3.4.1",
"mongodb": "^3.5.3",
"multer": "^1.4.2",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-facebook-login": "^4.1.1",
"react-google-login": "^5.1.1",
"react-hook-google-maps": "0.0.3",
"react-i18next": "^11.3.4",
"react-redux": "^7.1.3",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.0",
"redux": "^4.0.5",
"redux-immer": "^1.0.4",
"sha1": "^1.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "mocha --exit",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"eslint": "^6.8.0",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-react": "^7.19.0",
"eslint-plugin-react-hooks": "^3.0.0",
"eslint-plugin-react-redux": "^3.0.3",
"mocha": "^7.2.0",
"supertest": "^4.0.2"
}
}```
is it cause of the proxy? or i have a wrong start script? or something else?

Answer 1

The way I deploy on heroku is:
to the backend package.json scripts I add
"heroku-postbuild": "cd client && npm install && npm install --only=dev --no-shrinkwrap && npm run build"
add the following to my server.js
if (process.env.NODE_ENV === "production") {
app.use(express.static(path.join(__dirname, "client/build")));
app.get("*", (request, response) => {
response.sendFile(path.join(__dirname, "client/build", "index.html"));
});
}
After these I just git push heroku master and it gets deployed w/o any issues.

Answer 2

I was using create-react-app + JSX, so i had to open two terminals one for npm start (on port 3000 for react server) and one for node server.js (for backend on port 4000) and these two are connect through the proxy that i had on my package.json. when i have finished with development, all i had to do was:
remove the proxy from package.json.
npm run build, which makes a copy of all my code into the build folder.
app.use("/", express.static("build"));
in my server.js file to make the build folder accessible to app.
app.all("/*", (req, res) => { res.sendFile(__dirname + "/build/index.html"); }); at the end of the server.js to catch all.
hope this saves some of your time.