Mixing
React routing interferes with Express endpoints
0
I created a proxy to Express server, it used to work before, now it makes a request to server when I try to go on another route. For example, I have /posts server endpoint and /posts route.
Here is my server file:
const express = require("express");
const cors = require("cors");
const bodyParser = require("body-parser");
const dotenv = require("dotenv");
const passport = require("passport");
const morgan = require("morgan");
const path = require('path');
dotenv.config({ silent: true });
const app = express();
// database connection
require('./config/database');
// bodyparser, cors setup
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
app.use(cors());
// passport setup
app.use(passport.initialize());
require("./config/passport.js")(passport);
app.use(morgan("dev"));
// static
app.use('/uploads', express.static(__dirname + '/static/uploads'))
// routes
app.use("/api/posts", require('./routes/posts'));
app.use("/api/comments", require('./routes/comments'));
app.use("/api/auth", require('./routes/user'));
app.use((err, req, res, next) => {
res.status(err.code || 500).send({ error: err.message || 'Internal server error happened' })
})
const PORT = 5000 || process.env.PORT;
app.listen(PORT, () => {
console.log(`App running on port ${PORT}`);
});I tried with adding static file but doesn't work. Probably I would need it in production.
Here is the package.json proxy setup:
"proxy": "http://localhost:5000/api/"
javascript reactjs proxy react-router router
asked Jan 1 at 19:22
merkomerko
394412
add a comment |
0
I created a proxy to Express server, it used to work before, now it makes a request to server when I try to go on another route. For example, I have /posts server endpoint and /posts route.
Here is my server file:
const express = require("express");
const cors = require("cors");
const bodyParser = require("body-parser");
const dotenv = require("dotenv");
const passport = require("passport");
const morgan = require("morgan");
const path = require('path');
dotenv.config({ silent: true });
const app = express();
// database connection
require('./config/database');
// bodyparser, cors setup
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
app.use(cors());
// passport setup
app.use(passport.initialize());
require("./config/passport.js")(passport);
app.use(morgan("dev"));
// static
app.use('/uploads', express.static(__dirname + '/static/uploads'))
// routes
app.use("/api/posts", require('./routes/posts'));
app.use("/api/comments", require('./routes/comments'));
app.use("/api/auth", require('./routes/user'));
app.use((err, req, res, next) => {
res.status(err.code || 500).send({ error: err.message || 'Internal server error happened' })
})
const PORT = 5000 || process.env.PORT;
app.listen(PORT, () => {
console.log(`App running on port ${PORT}`);
});I tried with adding static file but doesn't work. Probably I would need it in production.
Here is the package.json proxy setup:
"proxy": "http://localhost:5000/api/"
javascript reactjs proxy react-router router
asked Jan 1 at 19:22
merkomerko
394412
Is react app created with create-react-app or with your own webpack configuration?
– JS Engine
Jan 2 at 4:04
Create-react-app, I also tried to recreate it, deleted all setup files, node modules and the rest
– merko
Jan 2 at 6:30
add a comment |
0
0
0
I created a proxy to Express server, it used to work before, now it makes a request to server when I try to go on another route. For example, I have /posts server endpoint and /posts route.
Here is my server file:
const express = require("express");
const cors = require("cors");
const bodyParser = require("body-parser");
const dotenv = require("dotenv");
const passport = require("passport");
const morgan = require("morgan");
const path = require('path');
dotenv.config({ silent: true });
const app = express();
// database connection
require('./config/database');
// bodyparser, cors setup
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
app.use(cors());
// passport setup
app.use(passport.initialize());
require("./config/passport.js")(passport);
app.use(morgan("dev"));
// static
app.use('/uploads', express.static(__dirname + '/static/uploads'))
// routes
app.use("/api/posts", require('./routes/posts'));
app.use("/api/comments", require('./routes/comments'));
app.use("/api/auth", require('./routes/user'));
app.use((err, req, res, next) => {
res.status(err.code || 500).send({ error: err.message || 'Internal server error happened' })
})
const PORT = 5000 || process.env.PORT;
app.listen(PORT, () => {
console.log(`App running on port ${PORT}`);
});I tried with adding static file but doesn't work. Probably I would need it in production.
Here is the package.json proxy setup:
"proxy": "http://localhost:5000/api/"
javascript reactjs proxy react-router router
asked Jan 1 at 19:22
merkomerko
394412
I created a proxy to Express server, it used to work before, now it makes a request to server when I try to go on another route. For example, I have /posts server endpoint and /posts route.
Here is my server file:
const express = require("express");
const cors = require("cors");
const bodyParser = require("body-parser");
const dotenv = require("dotenv");
const passport = require("passport");
const morgan = require("morgan");
const path = require('path');
dotenv.config({ silent: true });
const app = express();
// database connection
require('./config/database');
// bodyparser, cors setup
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
app.use(cors());
// passport setup
app.use(passport.initialize());
require("./config/passport.js")(passport);
app.use(morgan("dev"));
// static
app.use('/uploads', express.static(__dirname + '/static/uploads'))
// routes
app.use("/api/posts", require('./routes/posts'));
app.use("/api/comments", require('./routes/comments'));
app.use("/api/auth", require('./routes/user'));
app.use((err, req, res, next) => {
res.status(err.code || 500).send({ error: err.message || 'Internal server error happened' })
})
const PORT = 5000 || process.env.PORT;
app.listen(PORT, () => {
console.log(`App running on port ${PORT}`);
});I tried with adding static file but doesn't work. Probably I would need it in production.
Here is the package.json proxy setup:
"proxy": "http://localhost:5000/api/"
const express = require("express");
const cors = require("cors");
const bodyParser = require("body-parser");
const dotenv = require("dotenv");
const passport = require("passport");
const morgan = require("morgan");
const path = require('path');
dotenv.config({ silent: true });
const app = express();
// database connection
require('./config/database');
// bodyparser, cors setup
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
app.use(cors());
// passport setup
app.use(passport.initialize());
require("./config/passport.js")(passport);
app.use(morgan("dev"));
// static
app.use('/uploads', express.static(__dirname + '/static/uploads'))
// routes
app.use("/api/posts", require('./routes/posts'));
app.use("/api/comments", require('./routes/comments'));
app.use("/api/auth", require('./routes/user'));
app.use((err, req, res, next) => {
res.status(err.code || 500).send({ error: err.message || 'Internal server error happened' })
})
const PORT = 5000 || process.env.PORT;
app.listen(PORT, () => {
console.log(`App running on port ${PORT}`);
});const express = require("express");
const cors = require("cors");
const bodyParser = require("body-parser");
const dotenv = require("dotenv");
const passport = require("passport");
const morgan = require("morgan");
const path = require('path');
dotenv.config({ silent: true });
const app = express();
// database connection
require('./config/database');
// bodyparser, cors setup
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
app.use(cors());
// passport setup
app.use(passport.initialize());
require("./config/passport.js")(passport);
app.use(morgan("dev"));
// static
app.use('/uploads', express.static(__dirname + '/static/uploads'))
// routes
app.use("/api/posts", require('./routes/posts'));
app.use("/api/comments", require('./routes/comments'));
app.use("/api/auth", require('./routes/user'));
app.use((err, req, res, next) => {
res.status(err.code || 500).send({ error: err.message || 'Internal server error happened' })
})
const PORT = 5000 || process.env.PORT;
app.listen(PORT, () => {
console.log(`App running on port ${PORT}`);
});javascript reactjs proxy react-router router
javascript reactjs proxy react-router router
asked Jan 1 at 19:22
merkomerko
394412
asked Jan 1 at 19:22
merkomerko
394412
asked Jan 1 at 19:22
merkomerko
394412
asked Jan 1 at 19:22
merkomerko
394412
asked Jan 1 at 19:22
merkomerko
394412
394412
Is react app created with create-react-app or with your own webpack configuration?
– JS Engine
Jan 2 at 4:04
Create-react-app, I also tried to recreate it, deleted all setup files, node modules and the rest
– merko
Jan 2 at 6:30
add a comment |
Is react app created with create-react-app or with your own webpack configuration?
– JS Engine
Jan 2 at 4:04
Create-react-app, I also tried to recreate it, deleted all setup files, node modules and the rest
– merko
Jan 2 at 6:30
Is react app created with create-react-app or with your own webpack configuration?
– JS Engine
Jan 2 at 4:04
Is react app created with create-react-app or with your own webpack configuration?
– JS Engine
Jan 2 at 4:04
Create-react-app, I also tried to recreate it, deleted all setup files, node modules and the rest
– merko
Jan 2 at 6:30
Create-react-app, I also tried to recreate it, deleted all setup files, node modules and the rest
– merko
Jan 2 at 6:30
add a comment |
0
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',
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
});
}
});
draft saved
draft discarded
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%2f53998279%2freact-routing-interferes-with-express-endpoints%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
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.
draft saved
draft discarded
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%2f53998279%2freact-routing-interferes-with-express-endpoints%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
Is react app created with create-react-app or with your own webpack configuration?
– JS Engine
Jan 2 at 4:04
Create-react-app, I also tried to recreate it, deleted all setup files, node modules and the rest
– merko
Jan 2 at 6:30