Proxy does not work with the React build version

[ravinduonline]

I have looked through similar topics and have so far been unable to resolve my deployment issue. Proxy works with ‘npm start’ but does not work with the React build version

npm start version

package.json

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "axios": "^0.21.3",
    "file-saver": "^2.0.5",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-file-base64": "^1.0.3",
    "react-router-dom": "^5.3.0",
    "react-scripts": "^4.0.3",
    "react-to-print": "^2.13.0",
    "react-toastify": "^8.0.3",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "proxy": "https://m8-backend-test.herokuapp.com"
}

Github - GitHub - RavinduOnline/ITP-ManagerSide

[ravinduonline]

@nhcarrigan Can you please help with this?

[jenovs]

Proxy is for development (at least haven’t heard of using it in production).
In production you need to call that heroku URL.
Use environment variables to select correct url.

[ravinduonline]

I used Proxy Middleware but does not work
@jenovs Can you explain step by step if you can?
This is my first react app so it’s hard for me to fix this

package.json

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "axios": "^0.21.3",
    "file-saver": "^2.0.5",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-file-base64": "^1.0.3",
    "react-router-dom": "^5.3.0",
    "react-scripts": "^4.0.3",
    "react-to-print": "^2.13.0",
    "react-toastify": "^8.0.3",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "env-cmd -f .env react-scripts start",
    "build": "env-cmd -f .env react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

.env

proxy=https://m8-backend-test.herokuapp.com

setupProxy.js

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: process.env.proxy,
      changeOrigin: true,
    })
  );
};

[jenovs]

That’s not what I meant.
You should modify your React code to append API URL in prod. Something like this:

const rootUrl = process.env.NODE_ENV === "production" ? "https://heroku.url/my/api" : ""
axios.get(`${rootUrl}/customer/getone/${id}`).then((res) =>{

Also it’s best practice to abstract data fetching, so you can change it without going into every file.

[ravinduonline]

@jenovs If you can, give a sample solution to this. I’m a little hard to understand

class CostingManage extends Component {

componentDidMount(){
              this.retrievePosts();
            }

            retrievePosts(){
              axios.get("/costing")
                    .then(res =>{
                      if(res.data.success){
                        this.setState({
                          posts:res.data.existingPosts
                        });
                        console.log(this.state.posts);
                      }

                    });
                    
            }

[jenovs]

Check my previous post - you need to prepend url you’re calling with your heroku url.

[ravinduonline]

like this i didn’t get it

retrievePosts(){
              const rootUrl = process.env.NODE_ENV === "production" ? "https://m8-backend-test.herokuapp.com" : ""
              axios.get('${rootUrl}/costing')
                    .then(res =>{
                      if(res.data.success){
                        this.setState({
                          posts:res.data.existingPosts
                        });
                        console.log(this.state.posts);
                      }

                    });
                    
            }

[jenovs]

Use backticks (`):

 axios.get('${rootUrl}/costing')
           ^                  ^

[ravinduonline]

Thank you so much. it works