Post request from react app stalls after deploying to Heroku - node.js

Question

I've made this app using the MERN stack and am facing problems while deploying to Heroku. I have a userContext.js file which handles authentication of users. It has a function which makes a post request to the server which in development is on localhost:80. This has been working fine in development and the request is successful. After deploying the same request stalls and fails. I don't understand how to get a response from the request. Any help is really appreciated. Thanks, Hatim
server.js
const express = require("express"),
http = require("http"),
app = express(),
server = http.createServer(app),
bodyParser = require("body-parser"),
mongoose = require("mongoose"),
passport = require("passport"),
cors = require("cors");
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cors());
app.use((req, res, next) => {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Methods", "DELETE, PUT, GET, POST");
res.header(
"Access-Control-Allow-Headers",
"Origin, X-Requested-With, Content-Type, Accept"
);
next();
});
//IMPORT MODELS
require("./models/products");
require("./models/user");
//MONGOOSE CONNECT
mongoose.Promise = global.Promise;
mongoose
.connect(
process.env.MONGODB_URI || `mongodb://localhost:27017/technicalKwt`,
{
useNewUrlParser: true,
useUnifiedTopology: true,
useFindAndModify: false
}
)
.then(() => console.log("MONGODB Connected"))
.catch(err => {
console.log(err);
});
//SET FOR PRODUCTION
if (process.env.NODE_ENV === "production") {
app.use(express.static("client/build"));
const path = require("path");
app.get("*", (req, res) => {
res.sendFile(path.resolve(__dirname, "client", "build", "index.html"));
});
}
// Passport middleware
app.use(passport.initialize());
// Passport config
require("./config/passport")(passport);
require("./api/products")(app);
require("./api/transaction")(app);
require("./api/users")(app);
require("./api/genPDF")(app);
const port = process.env.PORT || 80;
server.listen(port, () => {
console.log(`Listening on port ${port}`);
});
users.js
app.post("/login", (req, res) => {
console.log(req.body);
const email = req.body.email;
const password = req.body.password;
User.findOne({ email }).then(user => {
if (!user) {
return res.status(401).json({ message: "Invalid Credentials" });
}
// Check password
bcrypt.compare(password, user.password).then(isMatch => {
if (isMatch) {
// User matched
// Create JWT Payload
const payload = {
id: user.id,
name: user.name
};
// Sign token
jwt.sign(
payload,
keys.secretOrKey,
{
expiresIn: 31556926 // 1 year in seconds
},
(err, token) => {
res.json({
success: true,
token: "Bearer " + token,
payload
});
}
);
} else {
return res.status(401).json({ message: "Invalid Credentials" });
}
});
});
});
loginUser function in userContext.js
function loginUser(dispatch, login, password, history, setIsLoading, setError) {
setIsLoading(true);
if (!!login && !!password) {
axios
.post('http://localhost:80/login', {
email: login,
password,
})
.then(res => {
localStorage.setItem('id_token', res.data.payload.id);
localStorage.setItem('name', res.data.payload.name);
setIsLoading(false);
dispatch({ type: 'LOGIN_SUCCESS' });
history.push('/app/products');
})
.catch(err => {
setIsLoading(false);
dispatch({ type: 'LOGIN_FAILURE' });
});
} else {
dispatch({ type: 'LOGIN_FAILURE' });
setIsLoading(false);
}
}

Answer 1

I'm making some assumptions about your app here.
On Heroku I believe you cannot use './' anymore. In your server.js try using the built-in '__dirname':
require(__dirname + "/models/users")
Second issue: Your userContext.js is presumably on the client-side now, as in a person views this on their browser. The path to your routes is no longer localhost:80 it's your heroku domain (something.com) so your axios post request needs the new url. Try this:
axios
.post('http://' + document.location.hostname + '/login', {
email: login,
password,
})