reactjsnginxnginx-configvultr

How can I point the react api service point to hit my domain rather than localhost:8000


I have deployed my react app in Vultr server and installed nginx in server and configured the below settings by running below command.

$ sudo nano /etc/nginx/sites-available/default

server {

    listen 80;
    server_name somedomain-test.com www.somedomain-test.com;
    root /var/www/somedomain-test.com/build;
    index index.html;
}

I did ran npm run build and copied the build folder into the following destination folder /var/www/automateandmore.com/build

Then ran below commands:

$ sudo nginx -t
$ sudo systemctl restart nginx

I able to see the front end. Now I have started the server.js from the folder location src/ but still I can see it is calling localhost:8000/service/listofblogs: How do i fix the issue, could someone please advise ?

This is my package.json settings

{
  "name": "myblogs",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    .....
     
  },
  "proxy": "http://localhost:8000",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
    ....
  }
}

.env file

DANGEROUSLY_DISABLE_HOST_CHECK=true
REACT_APP_URL=http://somedomain-test.com

Solution

  • If I read the docs correctly, you have it backwards. See Proxying API Requests in Development

    To tell the development server to proxy any unknown requests to your API server in development, add a proxy field to your package.json, for example:

    "proxy": "http://localhost:4000",
    

    But you say "rather than localhost:8000", but that is the url your proxy is giving the app.

    Change it to the url you want to hit.