How to deploy React Frontend + Node Backend on a production server?

Question

This is the first time that I'm working on the topic React Frontend with Node Backend. I have now a litte problem and I've invested a lot of time locking for a solution but with no success.

I have developed a contact form with react.js and antd as design and input validation component in the frontend. For the backend part I use node express , cors and axios for executing web requests. As package manager I use yarn .

This contact form is located in a public GitHub repo: https://github.com/philippbck/react-nodemailer

Down below your can find my package.json with all used dependencies:

 {
  "name": "react-nodemailer",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "antd": "^3.19.1",
    "axios": "^0.19.0",
    "body-parser": "^1.19.0",
    "cors": "^2.8.5",
    "espress": "^0.0.0",
    "nodemailer": "^6.2.1",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "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"
    ]
  }
}

This contact form works perfectly local on my computer, but now I want to deploy this to my production cloud server with CentOS7 and Apache Webserver. But my problem is how? With my understanding I create a production build for the react frontend part with yarn run build and put all files from the build folder inside the htdocs folder on my server. And for the backend file app.js located in the root directory of my project I've created a root folder on my server called /apps . And I started the node service manually with node app on the server.

When I open my website with the contact form and I click on the submit button, the following error occurs:

xhr.js:166 OPTIONS http://localhost:5000/send net::ERR_CONNECTION_REFUSED

My question is how I can deploy my contact form on a production server to make it woking? I don't want to use a serverless solutions for this case. Thank you very much!

UPDATE:

After changing the axios POST url from "localhost" to my production url "philipp-buck.de" now the the following error occurs:

OPTIONS https://philipp-buck.de:5000/send net::ERR_CONNECTION_TIMED_OUT

Answer 1

Contactform.js has backend URL to hardcoded to . localhot:5000 [ https://github.com/philippbck/react-nodemailer/blob/master/src/contactform.js#L45]

Your production frontend needs to point to production backend.

Answer 2

You should depoy on Production by pm2

Are you enable cors at Back-end or use proxy at Front-end ?

Answer 3

you should response your html

   // in the beginning of app
    app.use(express.static('public'));

   // ...your code

    // serves frontend application
    app.get('/*', (req, res) => {
        res.sendFile(path.resolve('public/index.html'), { root: __dirname }, err => {
            if (err) {
                res.status(500).send(err);
            }
        });
    });