# Proxy does not work with the React build version

**URL:** <https://forum.freecodecamp.org/t/proxy-does-not-work-with-the-react-build-version/494653>\
**Category:** Curriculum Help\
**Tags:** javascript\
**Created:** [January 28, 2022, 8:05pm UTC](https://forum.freecodecamp.org/t/proxy-does-not-work-with-the-react-build-version/494653 "2022-01-28T20:05:46Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![ravinduonline](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ravinduonline/32/247213_2.png) [@ravinduonline](https://forum.freecodecamp.org/u/ravinduonline)\
**Post date:** [January 28, 2022, 8:05pm UTC](https://forum.freecodecamp.org/t/proxy-does-not-work-with-the-react-build-version/494653/1 "2022-01-28T20:05:46Z")

</div>

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

 ![Screenshot 2022-01-29 at 01.23.25](https://global.discourse-cdn.com/freecodecamp/original/3X/9/9/994a72f9e41d3b8a3c18e6100268754775de35b2.png)

**package.json**

```auto
{
  "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 · GitHub](https://github.com/RavinduOnline/ITP-ManagerSide)

---

<div class="post-metadata">

**Author:** ![ravinduonline](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ravinduonline/32/247213_2.png) [@ravinduonline](https://forum.freecodecamp.org/u/ravinduonline)\
**Post date:** [January 28, 2022, 8:07pm UTC](https://forum.freecodecamp.org/t/proxy-does-not-work-with-the-react-build-version/494653/2 "2022-01-28T20:07:15Z")

</div>

@Naomi Can you please help with this?

---

<div class="post-metadata">

**Author:** ![jenovs](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jenovs/32/60963_2.png) [@jenovs](https://forum.freecodecamp.org/u/jenovs)\
**Post date:** [January 28, 2022, 8:56pm UTC](https://forum.freecodecamp.org/t/proxy-does-not-work-with-the-react-build-version/494653/3 "2022-01-28T20:56:11Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![ravinduonline](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ravinduonline/32/247213_2.png) [@ravinduonline](https://forum.freecodecamp.org/u/ravinduonline)\
**Post date:** [January 29, 2022, 6:24am UTC](https://forum.freecodecamp.org/t/proxy-does-not-work-with-the-react-build-version/494653/4 "2022-01-29T06:24:10Z")

</div>

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**

```auto
{
  "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**

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

```

**setupProxy.js**

```auto

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

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

```

---

<div class="post-metadata">

**Author:** ![jenovs](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jenovs/32/60963_2.png) [@jenovs](https://forum.freecodecamp.org/u/jenovs)\
**Post date:** [January 29, 2022, 8:10am UTC](https://forum.freecodecamp.org/t/proxy-does-not-work-with-the-react-build-version/494653/5 "2022-01-29T08:10:31Z")

</div>

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

```auto
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.

---

<div class="post-metadata">

**Author:** ![ravinduonline](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ravinduonline/32/247213_2.png) [@ravinduonline](https://forum.freecodecamp.org/u/ravinduonline)\
**Post date:** [January 29, 2022, 8:34am UTC](https://forum.freecodecamp.org/t/proxy-does-not-work-with-the-react-build-version/494653/6 "2022-01-29T08:34:31Z")

</div>

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

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

                    });
                    
            }

```

---

<div class="post-metadata">

**Author:** ![jenovs](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jenovs/32/60963_2.png) [@jenovs](https://forum.freecodecamp.org/u/jenovs)\
**Post date:** [January 29, 2022, 8:38am UTC](https://forum.freecodecamp.org/t/proxy-does-not-work-with-the-react-build-version/494653/7 "2022-01-29T08:38:19Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ravinduonline](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ravinduonline/32/247213_2.png) [@ravinduonline](https://forum.freecodecamp.org/u/ravinduonline)\
**Post date:** [January 29, 2022, 8:45am UTC](https://forum.freecodecamp.org/t/proxy-does-not-work-with-the-react-build-version/494653/8 "2022-01-29T08:45:38Z")

</div>

like this 😕 i didn’t get it

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

                    });
                    
            }

```

---

<div class="post-metadata">

**Author:** ![jenovs](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jenovs/32/60963_2.png) [@jenovs](https://forum.freecodecamp.org/u/jenovs)\
**Post date:** [January 29, 2022, 8:48am UTC](https://forum.freecodecamp.org/t/proxy-does-not-work-with-the-react-build-version/494653/9 "2022-01-29T08:48:48Z")

</div>

Use backticks (`):

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

```

---

<div class="post-metadata">

**Author:** ![ravinduonline](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ravinduonline/32/247213_2.png) [@ravinduonline](https://forum.freecodecamp.org/u/ravinduonline)\
**Post date:** [January 29, 2022, 8:51am UTC](https://forum.freecodecamp.org/t/proxy-does-not-work-with-the-react-build-version/494653/10 "2022-01-29T08:51:49Z")

</div>

Thank you so much. it works 😍

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/freecodecamp/original/3X/e/1/e1c433102e34b46dfaa3e15d13ab9a514b127078.svg) [@system](https://forum.freecodecamp.org/u/system)\
**Post date:** [July 30, 2022, 8:52pm UTC](https://forum.freecodecamp.org/t/proxy-does-not-work-with-the-react-build-version/494653/11 "2022-07-30T20:52:05Z")

</div>

Closed on July 30, 2022, 8:52pm UTC

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.