CRA 2.0 How to setup proxy in React?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
In CRA 2.0 proxy property on the package.json does not work. After some research, I came across an article suggesting to use http-proxy-middleware. I created an setupProxy.js in the src of my client folder(React side). That contains the following code
const proxy = require("http-proxy-middleware");
module.exports = function(app) {
console.log("Setup proxy is ever called");
app.use(proxy("/api/auth/google", { target: "http://localhost:5000/" }));
};
What am I supposed to do after this. Where should I import the setupProxy.js file. From where it is gonna receive app.
reactjs http-proxy-middleware
add a comment |
In CRA 2.0 proxy property on the package.json does not work. After some research, I came across an article suggesting to use http-proxy-middleware. I created an setupProxy.js in the src of my client folder(React side). That contains the following code
const proxy = require("http-proxy-middleware");
module.exports = function(app) {
console.log("Setup proxy is ever called");
app.use(proxy("/api/auth/google", { target: "http://localhost:5000/" }));
};
What am I supposed to do after this. Where should I import the setupProxy.js file. From where it is gonna receive app.
reactjs http-proxy-middleware
add a comment |
In CRA 2.0 proxy property on the package.json does not work. After some research, I came across an article suggesting to use http-proxy-middleware. I created an setupProxy.js in the src of my client folder(React side). That contains the following code
const proxy = require("http-proxy-middleware");
module.exports = function(app) {
console.log("Setup proxy is ever called");
app.use(proxy("/api/auth/google", { target: "http://localhost:5000/" }));
};
What am I supposed to do after this. Where should I import the setupProxy.js file. From where it is gonna receive app.
reactjs http-proxy-middleware
In CRA 2.0 proxy property on the package.json does not work. After some research, I came across an article suggesting to use http-proxy-middleware. I created an setupProxy.js in the src of my client folder(React side). That contains the following code
const proxy = require("http-proxy-middleware");
module.exports = function(app) {
console.log("Setup proxy is ever called");
app.use(proxy("/api/auth/google", { target: "http://localhost:5000/" }));
};
What am I supposed to do after this. Where should I import the setupProxy.js file. From where it is gonna receive app.
reactjs http-proxy-middleware
reactjs http-proxy-middleware
asked Nov 24 '18 at 6:51
Unity HourUnity Hour
15411
15411
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
The proxy value in package.json does still work in CRA 2, but it now only accepts a string, more complicated proxy options have to be put in src/setupProxy.js as you are doing. But be careful, if you leave the proxy property in package.json CRA will use that and ignore your setupProxy.js file.
You don't need to import setupProxy.js anywhere, CRA will find it as long as it's in src.
Don't worry about where app comes from, that variable will be provided at runtime.
Your example will work, I've tried it (as long as you remove the old proxy string from package.json). But the console.log will not be logged to the terminal (I'm not sure why).
Further reading, the PR where this change was introduced: https://github.com/facebook/create-react-app/pull/5073
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53455879%2fcra-2-0-how-to-setup-proxy-in-react%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
The proxy value in package.json does still work in CRA 2, but it now only accepts a string, more complicated proxy options have to be put in src/setupProxy.js as you are doing. But be careful, if you leave the proxy property in package.json CRA will use that and ignore your setupProxy.js file.
You don't need to import setupProxy.js anywhere, CRA will find it as long as it's in src.
Don't worry about where app comes from, that variable will be provided at runtime.
Your example will work, I've tried it (as long as you remove the old proxy string from package.json). But the console.log will not be logged to the terminal (I'm not sure why).
Further reading, the PR where this change was introduced: https://github.com/facebook/create-react-app/pull/5073
add a comment |
The proxy value in package.json does still work in CRA 2, but it now only accepts a string, more complicated proxy options have to be put in src/setupProxy.js as you are doing. But be careful, if you leave the proxy property in package.json CRA will use that and ignore your setupProxy.js file.
You don't need to import setupProxy.js anywhere, CRA will find it as long as it's in src.
Don't worry about where app comes from, that variable will be provided at runtime.
Your example will work, I've tried it (as long as you remove the old proxy string from package.json). But the console.log will not be logged to the terminal (I'm not sure why).
Further reading, the PR where this change was introduced: https://github.com/facebook/create-react-app/pull/5073
add a comment |
The proxy value in package.json does still work in CRA 2, but it now only accepts a string, more complicated proxy options have to be put in src/setupProxy.js as you are doing. But be careful, if you leave the proxy property in package.json CRA will use that and ignore your setupProxy.js file.
You don't need to import setupProxy.js anywhere, CRA will find it as long as it's in src.
Don't worry about where app comes from, that variable will be provided at runtime.
Your example will work, I've tried it (as long as you remove the old proxy string from package.json). But the console.log will not be logged to the terminal (I'm not sure why).
Further reading, the PR where this change was introduced: https://github.com/facebook/create-react-app/pull/5073
The proxy value in package.json does still work in CRA 2, but it now only accepts a string, more complicated proxy options have to be put in src/setupProxy.js as you are doing. But be careful, if you leave the proxy property in package.json CRA will use that and ignore your setupProxy.js file.
You don't need to import setupProxy.js anywhere, CRA will find it as long as it's in src.
Don't worry about where app comes from, that variable will be provided at runtime.
Your example will work, I've tried it (as long as you remove the old proxy string from package.json). But the console.log will not be logged to the terminal (I'm not sure why).
Further reading, the PR where this change was introduced: https://github.com/facebook/create-react-app/pull/5073
answered Nov 28 '18 at 5:38
jay_aye_see_kayjay_aye_see_kay
11519
11519
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53455879%2fcra-2-0-how-to-setup-proxy-in-react%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown