skip to Main Content

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 });
  }
});   

3

Answers


  1. Assuming you are using CRA from the facebook.
    You can create an .env file at the root folder of the project
    and specify in it PORT=80

    Login or Signup to reply.
  2. I’m not sure if I completely understand the question, but since you’re using express, you will have an app.listen(3000) call somewhere in your index.js.

    You can change that to 3000 or 80 depending on the value of process.env.NODE_ENV which will be set to either ‘production’, ‘development’ or ‘none’.

    Login or Signup to reply.
  3. 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)

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search