CODEWITHSUNDEEP
reactjscorscreate-react-apppackage.json
Marius B
Marius B

Reputation: 788

How to move a proxy value from package.json to setupProxy.js in CRA v2?

Since recently released CRA (Create React App) v2 it's now possible to move proxy settings from package.json to setupProxy.js. My question is a simple one: how should my setupProxy.js look like if I simply want to always use http://127.0.0.1:5000? I need this because if everything works correctly (no luck so far) I can replace it with variable from .env files for dev/prod environments. But so far I only get either a or b:

a) CORS errors

b) my app's index.html is returned as a result of http request

Here's an example of one of the versions of setupProxy.js I tried:

const proxy = require('http-proxy-middleware');

module.exports = function(app) {
  app.use('/', proxy({target: 'http://127.0.0.1:5000', changeOrigin: true}));
  app.use('/*', proxy({target: 'http://127.0.0.1:5000', changeOrigin: true}));
  app.use(proxy({'/', target: 'http://127.0.0.1:5000', changeOrigin: true}));
  app.use(proxy({'/*', target: 'http://127.0.0.1:5000', changeOrigin: true}));
};

I tried various versions of app.use line, I just posted several examples here.

I usually tried with one app.use line at a time, but also with multiple lines.

I restarted react app everytime I changed the file.

I also tried using process.env.REACT_APP_BACKEND_BASEURL instead of 'http://127.0.0.1:5000' which is my final goal.

Upvotes: 1

Views: 1657

Answers (2)

Marius B
Marius B

Reputation: 788

If I remember correctly using setupProxy.js is only good for local development, but I also needed for it to work on the live/deployed server, too, so I ended up not using setupProxy.js at all - I saved different backend URLs as REACT_APP_BACKEND_BASEURL variable in different .env files (loclahost url in .env.development file and remote url in .env.production file) and replaced all the occurrences in the frontend JavaScript code to use process.env.REACT_APP_BACKEND_BASEURL.

Upvotes: 1

Kang
Kang

Reputation: 1

so try

app.use(proxy('/**', { target:'http://127.0.0.1:5000', changeOrigin: true }))

Upvotes: 0

Related Questions