How to redirect port for React production

react-scripts start'': port
react npm start on specific port
npm start -- --port
start react app on a different port
create react set port
create-react app change host
react port set
could not find an open port at react

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

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)

How to change the server port from 3000?, How do I run a reaction on a different port? Considering you’ve already installed the React Router library, the easiest way to redirect to a new location is by using its Redirect component. When the component is rendered, the existing

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'.

Deployment, npm run build` creates a `build` directory with a production build of your app The last command shown above will serve your static site on the port 5000 redirecting to your index.html page with a custom redirect parameter. First way using the Redirect component. Login.js. import React from 'react'; import { Redirect } from 'react-router-dom'; class Login extends React.Component { onSubmit = () => { if(userFound){ return < Redirect to ="/posts/" /> } } render() { return ( <form> <input placeholder="email" type="email" /> <input placeholder="password" type="password" /> < button onClick ={this. onSubmit }> Login </ button > </form> ) } } export default Login;

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

Option to specify port when running the server? · Issue #1083 , My project is based on create-react-app. npm start by default will run the application on port 3000 and there is no option of specifying a port in  To set the environment variable, we need to open the command line terminal and add a set a new environment variable for ReactJS port. Let’s say we want to change the port to 8000. After stopping the server (with Ctrl+C or Cmd+C), we then type. $ export PORT=8000

Force https in production (deployment) · Issue #1409 · facebook , Create React App doesn't handle the server in production. to support the http -> https rewrite & serving the static files on the https port only. Also, if the server isn't configured to serve over https then it will redirect to an url  Steps to reproduce create a Switch with a catch-all Redirect to the path of another Route: <Switch> <Route path="/settings/profile" exact component={Profile} /> <Redirect to="/settings/profile" /> </Switch> build production app + navigate to page with switch (don't match the Route's path)

React Production Deployment with Netlify, In this tutorial, we will learn how to deploy a React app with a back-end API to So somehow we need to tell the server to redirect all of the requests to index.html . React on port 3000 and Lambda Functions on port 9000 . There are a million ways to run the react-server service in production. This document is broken into multiple sections to describe the elements that go into running your react-server application in production. Per-Environment Settings. It helps to setup your project with per-environment settings that are appropriate for your application.

React Design Patterns and Best Practices: Design, build and deploy , to be used for production, but as you can see, we are still using port 3000. We need to configure nginx and implement a proxy to redirect the traffic from port 80​  The first line we redirect calls coming from /api/* to Express.js. Second line serves the static files. And the third line is for client routing (i.e. React Router), which redirects everything to index.html. If you want to know more configuration options, take a look at the docs. React App. This is how we call the API in our React app

Comments
  • Sorry, I was running the wrong script. It worked pretty much but now I am getting a blank screen when sending a form with this error
  • How are you sending the form, does a route in your express app handle it? If you have code you can share it'll be easier to help.
  • Have you tried setting the url yourself? Them template string might not be passing it correctly from the window object.