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.
node.js reactjs
edited Nov 10 at 11:09
halfer
14.3k758107
asked Nov 10 at 5:55
Johnny88520
477
add a comment |
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.
node.js reactjs
edited Nov 10 at 11:09
halfer
14.3k758107
asked Nov 10 at 5:55
Johnny88520
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
add a comment |
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.
node.js reactjs
edited Nov 10 at 11:09
halfer
14.3k758107
asked Nov 10 at 5:55
Johnny88520
477
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
node.js reactjs
edited Nov 10 at 11:09
halfer
14.3k758107
asked Nov 10 at 5:55
Johnny88520
477
edited Nov 10 at 11:09
halfer
14.3k758107
asked Nov 10 at 5:55
Johnny88520
477
edited Nov 10 at 11:09
halfer
14.3k758107
edited Nov 10 at 11:09
halfer
14.3k758107
edited Nov 10 at 11:09
halfer
14.3k758107
14.3k758107
asked Nov 10 at 5:55
Johnny88520
477
asked Nov 10 at 5:55
Johnny88520
477
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
add a comment |
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
add a comment |
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
});
}
});
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%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
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.
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%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
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
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