Why new version of Node and React get me a blank page for a route?









up vote
0
down vote

favorite












I'm still new to Node and React. Thus, I will try my best to describe the problem. I was able to see some route with GET method in old version of React with create-react-app. But I updated React yesterday, now I can't see it anymore. I'm not sure if it's because of webpack(I googled it, but still don't understand what it is).



My React port is 3000, and Node listen to the port 5005, and I used to put proxy object in the package.json in client folder, now new version of React doesn't accept proxy as object anymore so I use a library like the following code under /src in order to make full stack project



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

module.exports = function(app)
app.use(proxy('/api/*', target: 'http://localhost:5005' ));
;


I have a route in Node like this:



module.exports = (app) => 
app.get('/api/signup/thanks_confirmation', (req, res) =>
res.send(`
<div style="text-align: center; margin-top: 50px;">
Thank you!!!! We will get back to you ASAP!!
</div>
`);
);



In the old version of React, when I open the new broswer and typed



localhost:3000/api/signup/thanks_confirmation


It will show the content like the route, but now I only got a blank page. However, if I have



localhost:5005/api/signup/thanks_confirmation


it will work. Does Facebook update the webpack or something? I'm really confused.










share|improve this question























  • What does the network tab in dev tools show when you issue your request?
    – Alex McMillan
    Nov 10 at 11:12










  • share the dose, the usage of proxy is inclear
    – Tal Avissar
    Nov 10 at 11:13










  • @AlexMcMillan When I do localhost:3000/api/signup/thanks_confirmation, the network tab doesn't hit anything
    – Johnny88520
    Nov 10 at 15:52










  • @TalAvissar I think it's not proxy problem because I thought proxy is only for front-end issues http requests? And the code I have work before in old version
    – Johnny88520
    Nov 10 at 15:55














up vote
0
down vote

favorite












I'm still new to Node and React. Thus, I will try my best to describe the problem. I was able to see some route with GET method in old version of React with create-react-app. But I updated React yesterday, now I can't see it anymore. I'm not sure if it's because of webpack(I googled it, but still don't understand what it is).



My React port is 3000, and Node listen to the port 5005, and I used to put proxy object in the package.json in client folder, now new version of React doesn't accept proxy as object anymore so I use a library like the following code under /src in order to make full stack project



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

module.exports = function(app)
app.use(proxy('/api/*', target: 'http://localhost:5005' ));
;


I have a route in Node like this:



module.exports = (app) => 
app.get('/api/signup/thanks_confirmation', (req, res) =>
res.send(`
<div style="text-align: center; margin-top: 50px;">
Thank you!!!! We will get back to you ASAP!!
</div>
`);
);



In the old version of React, when I open the new broswer and typed



localhost:3000/api/signup/thanks_confirmation


It will show the content like the route, but now I only got a blank page. However, if I have



localhost:5005/api/signup/thanks_confirmation


it will work. Does Facebook update the webpack or something? I'm really confused.










share|improve this question























  • What does the network tab in dev tools show when you issue your request?
    – Alex McMillan
    Nov 10 at 11:12










  • share the dose, the usage of proxy is inclear
    – Tal Avissar
    Nov 10 at 11:13










  • @AlexMcMillan When I do localhost:3000/api/signup/thanks_confirmation, the network tab doesn't hit anything
    – Johnny88520
    Nov 10 at 15:52










  • @TalAvissar I think it's not proxy problem because I thought proxy is only for front-end issues http requests? And the code I have work before in old version
    – Johnny88520
    Nov 10 at 15:55












up vote
0
down vote

favorite









up vote
0
down vote

favorite











I'm still new to Node and React. Thus, I will try my best to describe the problem. I was able to see some route with GET method in old version of React with create-react-app. But I updated React yesterday, now I can't see it anymore. I'm not sure if it's because of webpack(I googled it, but still don't understand what it is).



My React port is 3000, and Node listen to the port 5005, and I used to put proxy object in the package.json in client folder, now new version of React doesn't accept proxy as object anymore so I use a library like the following code under /src in order to make full stack project



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

module.exports = function(app)
app.use(proxy('/api/*', target: 'http://localhost:5005' ));
;


I have a route in Node like this:



module.exports = (app) => 
app.get('/api/signup/thanks_confirmation', (req, res) =>
res.send(`
<div style="text-align: center; margin-top: 50px;">
Thank you!!!! We will get back to you ASAP!!
</div>
`);
);



In the old version of React, when I open the new broswer and typed



localhost:3000/api/signup/thanks_confirmation


It will show the content like the route, but now I only got a blank page. However, if I have



localhost:5005/api/signup/thanks_confirmation


it will work. Does Facebook update the webpack or something? I'm really confused.










share|improve this question















I'm still new to Node and React. Thus, I will try my best to describe the problem. I was able to see some route with GET method in old version of React with create-react-app. But I updated React yesterday, now I can't see it anymore. I'm not sure if it's because of webpack(I googled it, but still don't understand what it is).



My React port is 3000, and Node listen to the port 5005, and I used to put proxy object in the package.json in client folder, now new version of React doesn't accept proxy as object anymore so I use a library like the following code under /src in order to make full stack project



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

module.exports = function(app)
app.use(proxy('/api/*', target: 'http://localhost:5005' ));
;


I have a route in Node like this:



module.exports = (app) => 
app.get('/api/signup/thanks_confirmation', (req, res) =>
res.send(`
<div style="text-align: center; margin-top: 50px;">
Thank you!!!! We will get back to you ASAP!!
</div>
`);
);



In the old version of React, when I open the new broswer and typed



localhost:3000/api/signup/thanks_confirmation


It will show the content like the route, but now I only got a blank page. However, if I have



localhost:5005/api/signup/thanks_confirmation


it will work. Does Facebook update the webpack or something? I'm really confused.







node.js reactjs






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 10 at 11:09









halfer

14.2k757106




14.2k757106










asked Nov 10 at 5:55









Johnny88520

477




477











  • What does the network tab in dev tools show when you issue your request?
    – Alex McMillan
    Nov 10 at 11:12










  • share the dose, the usage of proxy is inclear
    – Tal Avissar
    Nov 10 at 11:13










  • @AlexMcMillan When I do localhost:3000/api/signup/thanks_confirmation, the network tab doesn't hit anything
    – Johnny88520
    Nov 10 at 15:52










  • @TalAvissar I think it's not proxy problem because I thought proxy is only for front-end issues http requests? And the code I have work before in old version
    – Johnny88520
    Nov 10 at 15:55
















  • What does the network tab in dev tools show when you issue your request?
    – Alex McMillan
    Nov 10 at 11:12










  • share the dose, the usage of proxy is inclear
    – Tal Avissar
    Nov 10 at 11:13










  • @AlexMcMillan When I do localhost:3000/api/signup/thanks_confirmation, the network tab doesn't hit anything
    – Johnny88520
    Nov 10 at 15:52










  • @TalAvissar I think it's not proxy problem because I thought proxy is only for front-end issues http requests? And the code I have work before in old version
    – Johnny88520
    Nov 10 at 15:55















What does the network tab in dev tools show when you issue your request?
– Alex McMillan
Nov 10 at 11:12




What does the network tab in dev tools show when you issue your request?
– Alex McMillan
Nov 10 at 11:12












share the dose, the usage of proxy is inclear
– Tal Avissar
Nov 10 at 11:13




share the dose, the usage of proxy is inclear
– Tal Avissar
Nov 10 at 11:13












@AlexMcMillan When I do localhost:3000/api/signup/thanks_confirmation, the network tab doesn't hit anything
– Johnny88520
Nov 10 at 15:52




@AlexMcMillan When I do localhost:3000/api/signup/thanks_confirmation, the network tab doesn't hit anything
– Johnny88520
Nov 10 at 15:52












@TalAvissar I think it's not proxy problem because I thought proxy is only for front-end issues http requests? And the code I have work before in old version
– Johnny88520
Nov 10 at 15:55




@TalAvissar I think it's not proxy problem because I thought proxy is only for front-end issues http requests? And the code I have work before in old version
– Johnny88520
Nov 10 at 15:55

















active

oldest

votes











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',
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
);



);













draft saved

draft discarded


















StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53236373%2fwhy-new-version-of-node-and-react-get-me-a-blank-page-for-a-route%23new-answer', 'question_page');

);

Post as a guest















Required, but never shown






























active

oldest

votes













active

oldest

votes









active

oldest

votes






active

oldest

votes















draft saved

draft discarded
















































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.





Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


Please pay close attention to the following guidance:


  • 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.




draft saved


draft discarded














StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53236373%2fwhy-new-version-of-node-and-react-get-me-a-blank-page-for-a-route%23new-answer', 'question_page');

);

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







Popular posts from this blog

Use pre created SQLite database for Android project in kotlin

Darth Vader #20

Ondo