React and Nodejs - reactjs

Question

I've issue in connecting react and express nodejs. On production they are fine together but on dev they are not connected. I've read a lot of articles and none of them worked with me. I'm deploying on heroku. And on production how can I replace local host end points with heroku url.
const express = require("express");
const path = require("path");
const app = express();
const publicPath = path.join(__dirname, "", "../build");
app.use(express.static(publicPath));
app.get("*", (req, res) => {
res.sendFile(path.join(publicPath, "index.html"));
});
const port = process.env.PORT || 3000;
app.listen(port, () => {
console.log("Server is up on port " + port);
});
for package.json/
"scripts": {
"start": "node server/server.js",
"dev": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}

Answer 1

Assuming your reactjs and node applications are deployed seperately, you can follow these steps:
For backend dotenv package is very popular, and easy to setup.
1-) add .env file to the root folder with your environment variables like this:
MONGO_URL=mongodb://localhost:27017/
Please note that there should be no empty space.
2-) In your main file, import dotenv as soon as possible before reading any variables.
require("dotenv").config();
3-) Now you can accesss your variables like this:
const dbUrl = process.env.MONGO_URL;
4-) put your .env file to the .gitignore file
5-) Specify the version of node.js by adding an engines section in package.json that will be used to run your application on Heroku.
For example:
"engines": {
"node": "10.1"
}
6-) After you deploy your node application to the heroku, add your variables using PROD values as described here in heroku docs.
If you created your reactjs app using create-react-app you can follow these steps:
1-) Add .env file to the root folder. Your variable names must start with REACT_APP_...
REACT_APP_API_URL=http://localhost:3001/api
2-) Access your variables like this in your code:
process.env.REACT_APP_API_URL
3-) put your .env file to the .gitignore file
4-) After you deploy your reactjs app to the heroku, set prod variables in Config Variables section, as we did for node app.