Skip to content
Advertisement

How to redirect port for React production

I am trying to setup both Express.js and React.js apps on the same Ubuntu server. This is a VPS which runs Plesk Onyx where we have a lot of virtual hosts that run over port 80.

To run them continuosly I have installed and ran forever, then these apps starts on ports 3000and 5000 (for instance).

I executed commands:

forever start -c "node src/server" ./ -l ./express.log
forever start -c "npm start" ./ -l ./react.log

Neither of the log files saves nothing, but that is not the point. Both are running as in the previous commands line but in those ports.

How do I redirect at least React port to 80 for this only app? Usually with PHP should work .htaccess but I am not sure for Nodejs.

Edit: The form code which sends from the React app through Express (worked great with React.js before building with npm run build:

The React component:

sendEmail(evt) {
    evt.preventDefault();
    (async () => {
        let response = await fetch(
            `${window.location.origin}/contacto`,
            options
        );
        let data = await response.json();

        if (!data.success) {
            this.setState(
                Object.assign(this.state, {
                    error: true,
                    texto: { error: <p>{data.message}</p> },
                    alert: {
                        visible: true,
                        tipo: "alert-danger"
                    }
                })
            );
        } else {
            this.setState(
                Object.assign(this.state, {
                    error: false,
                    texto: { error: <p>{data.message}</p> },
                    alert: {
                        visible: true,
                        tipo: "alert-success"
                    }
                })
            );
            document.getElementById("formulario-contacto").reset();
        }
    })();
}

The Express stuff:

// Static site init
server.use("/", express.static("build"));

server.post("/contacto", (req, res) => {
  try {
    server.mailer.send(
      "email",
      {
        to: process.env.EMAIL_FROM,
        subject: `Contacto ${req.body.asunto}`,
        body: req.body
      },
      err => {
        if (err) {
          res.send({ success: false, message: err });
        } else {
          res.send({ success: true, message: "Mensaje enviado" });
        }
      }
    );
  } catch (err) {
    res.send({ success: false, message: err });
  }
});   

Advertisement

Answer

Looks like you might want to change how you’re going about this. You should consider building your React app into static output that you then serve with your Express.js app/server.

Assuming you are using create-react-app you can run the “build” command to create your static files. Then set your Express.js app to serve it. See here for details on serving static files and here for building static files for your react app.

Alternatively you can also use webpack or parcel to build out your react app if you didn’t use creat-react-app.

For getting express on port 80 you can set your port variable to 80 or directly set it in the app.listen() function app.listen(80)

User contributions licensed under: CC BY-SA
6 People found this is helpful
Advertisement