React and Nodejs

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"
      }

is your frontend separate from your backend?

warmachine
– warmachine

2020-03-11 12:34:14 +00:00
Commented Mar 11, 2020 at 12:34 — warmachine
– warmachine, Commented Mar 11, 2020 at 12:34
Did you check my answer?

SuleymanSah
– SuleymanSah

2020-03-13 11:29:31 +00:00
Commented Mar 13, 2020 at 11:29 — SuleymanSah
– SuleymanSah, Commented Mar 13, 2020 at 11:29

SuleymanSah · Accepted Answer · 2020-03-13 11:29:13Z

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.

edited Mar 13, 2020 at 11:29

answered Mar 11, 2020 at 12:55

SuleymanSah

18k6 gold badges38 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mahmoud Nafea Over a year ago

Thanks for your efforts for explaining I understand all this. However, my issue is simpler my app now is just presentable it's portfolio so no api so far. my question how can I run front end and back end together on dev and prod? sure there should be change in package.json

SuleymanSah Over a year ago

@MahmoudNafea use react environment variables, in your dev .env file put dev values, and for prod use prod values

Collectives™ on Stack Overflow

React and Nodejs

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related