We Keep Coding

How can I get my MERN app to refresh correctly on heroku?

I deployed my MERN app to heroku. It loads, and I can navigate between pages by clicking on the nav bar. But, if I refresh a page, it just comes up blank. There are no error messages on the screen or in the console. If I go back to a previous page that worked before, it also comes up blank. At this point, I don't know what to look for.

My problem stemmed from incorrectly defining the root react route in my server.js file. I got the home page to render and refresh, but then the app would not load any other pages. Here is the server.js file at that point:
const express = require("express");
const mongoose = require("mongoose");
const routes = require("./routes");
const app = express();
// set the port for mongo connection to 3001 in development mode
const PORT = process.env.PORT || 3001;
// Configure body parsing for AJAX requests
app.use(express.urlencoded({ extended: true }));
app.use(express.json());
// Serve up static assets
if (process.env.NODE_ENV === "production") {
app.use(express.static("client/build"));
app.get("*", function (req, res) {
res.sendFile(path.join(__dirname, "./client/build/index.html"));
});
}
app.use(routes);
mongoose.connect(
process.env.MONGODB_URI || "mongodb://localhost/portfolio_db",
{
useCreateIndex: true,
useNewUrlParser: true,
useUnifiedTopology: true,
useFindAndModify: false,
}
);
// Start the API server on port 3001
app.listen(PORT, () =>
console.log(`🌎 ==> API Server now listening on PORT ${PORT}!`)
);
This sort of fixed my problem, but the app still wasn't routing properly, so I posted this: new issue
Basically, there where 3 problems:
'path' wasn't required at the top of the file, so the path to index.html wasn't defined (had to look at heroku logs to see this error).
The default react route (app.get('*'....)) should not be in the if statement, and
The default react route statement needed to be below the 'app.use(routes)' statement.
I also deleted a statement defining the default react route in /routes/index.js. Now the app deploys and routes correctly.

I was also getting same error "cannot get /page" whenever I did refresh or window.location() So after 3 days of trials and deploys I found this solution. Add this in your server.js file before deploying.
if(process.env.NODE_ENV === "production") {
app.use(express.static("client/build"));
app.get("/*", function(req, res) {
res.sendFile(path.join(__dirname, "./client/build/index.html"));
}); }
You can add this code snippet before app.listen. Remember the path says ./client/build/index.html which references to your build file in the production build in remote heroku master.
cannot get /page happens because the server is not able to find the route which was created using react-router or anything else in frontend so we need to direct the app to index.html in production build so that it starts the whole frontend process again and identifies the route...

how to use serve static file with express and react?

I have a project made with create-react-app and i would like to use it within express ( as i need some back end functionnality).
basically, my server render a blank page when i run it....
here is the code of my server:
const express = require('express');
const path = require('path');
const app = express();
// Serve the static files from the React app
app.use(express.static(path.join(__dirname, 'public')));
// An api endpoint that returns a short list of items
app.get('/api/getList', (req,res) => {
var list = ["item1", "item2", "item3"];
res.json(list);
console.log('Sent list of items');
});
// Handles any requests that don't match the ones above
app.get('*', (req,res) =>{
res.sendFile(path.join(__dirname , 'public', 'index.html'));
});
const port = process.env.PORT || 5000;
app.listen(port);
console.log('App is listening on port ' + port);
if i enter the endpoint http://localhost:5000/api/getList, i can see the result, but when i want to display my react app for the other end point, the page is blank.
The react app use different Route and i also added a proxy in the package.json.
my server source file is at the root of the react app like the image.
Does someone has an idea why the react app doesnt show?
Thanks

You have two lines that are kind of doing the same thing:
// Serve the static files from the React app
app.use(express.static(path.join(__dirname, 'public')));
Will serve your index.html file to http://localhost:5000/index.html
According to the Express documentation https://expressjs.com/en/starter/static-files.html
And then it seems like you have the second route:
app.get('*', is formatted incorrectly.
It would need to be app.get('/*'.
If you aren't directing the user to multiple routes then it might be better to just use the root, app.get('/', rather than trying to catch all routes.

Excluding routes from authentication express site

I'm creating an app using node, express, and have a passport authorization middleware implemented for all routes-. I am following a highly modular approach to build my app. I try to exclude specific APIs from authentication when I include them above the authorization middleware. But when I include app.use('/', require('./api/search/index')); above the authorization middleware, APIs beneath stop working.
Criticism and suggestion are all welcome for this approach and what can I do to resolve this problem.
I don't want to include route middleware in each route like this
route.get('/example', auth.middleware(), function (req, res) {
})
Below is my app approach with single authorization middleware for all routes
var express = require('express');
var bodyParser = require('body-parser');
var app = express();
var auth = require("./auth.js")();
app.use(auth.initialize());
//Excluding the search API from Authentication,
app.use('/', require('./api/search/index'));
//Middleware for all APIs and require Auth headers for authrization access
app.use(auth.authenticate(), function (req, res, next) {
if (req.headers.authorization && req.user) {
var parted = req.headers.authorization.split(' ');
if (parted.length === 2) {
console.log(req.user);
next();
} else {
return res.status(403).send({
success: false,
msg: 'Unauthorized.'
});
}
} else {
return res.status(503).send({
success: false,
msg: 'Bad Request'
});
}
});
//Join routers
app.use('/', require('./api/users/index'));
app.use('/', require('./api/product/index'))
app.use('/', require('./api/company/index'))

There are a million ways you can do this. What you can do is this:
app.use('/', require('./api/search/index'));
app.use('/', auth.authenticate(), require('./api/users/index'));
app.use('/', auth.authenticate(), require('./api/product/index'))
app.use('/', auth.authenticate(), require('./api/company/index'))
This way, the auth.authenticate() middleware will be applied to every child route you are requiring. And you leave the index without anything. This gives you a more granular control of where you apply the auth middleware, without having to apply it to every single route. You can take this to another level and group several routes inside a /admin/ and apply the middleware only once. Your imagination is the limit.

You can block your routes together using express.Router. For instance, you could have a route called "/api/secure" and then create a router for that route and group all secure routes there. and then have another for unsecured routes'
Express Router Docs

Angular JS and Node routing/wiring - data only showing after a page refresh

I'm using Node and Anugular, and I have created a RESTful api from my application, and created an angular resource to use this. I'm confused as to how the Angular ui-router directive reconciles with the Node Routing system on the server.
At the moment I have set up my routes/states in ui-router like this:
$stateProvier
.state('admin', {
url:'/admin',
templateUrl:'views/admin.html',
controller: 'adminController'
});
And this loads into the ui-view on my homepage, when I navigate to this url from a link on the loaded page.
HOWEVER, when I manually type in localhost/admin I get the route from Node, rather than the state render through angular.
Now I'd like to Angular to handle all the navigation on my app, and my resource to get the information, even if the address is typed manually into the navigation bar.
I've created a route in Node is for index, which contains my index.html page from angular, which effectively contains the whole app angular code, including all the routing.
My question is, how can I get angular redirect if I manually type the url into the address bar, and still have the data from the $resource.
I'm directing my resource to '/admin' - could this be the problem?
Does this mean that I need to add the contents of /routes/appointments' into the base node file (server.js), and then remove the route? If so then how do i direct my resource to the correct REST api?
app structure
public
-angular app
-app.js //for angular
routes
index.js
appointments.js
models
views
- index.ejs
server.js //node server file
here is my code exerpts
server.js
//standard routing code
var routes = require('./routes/index');
var appointments = require('./routes/appointments');
var app = express();
//configuring Express
app.set('port', process.env.PORT || 3000);
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.set('views', __dirname + '/views');
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');
app.use('/', routes);
app.use('/', appointments);
routes/index.js
var express = require('express');
var router = express.Router();
// ./routes/index.js
router.get('/', function(req, res) {
res.render('index', { title: 'Homepage' });
});
module.exports = router;
routes/appointments.js - this is the basis of my RESTFUL api
var express = require('express');
var router = express.Router();
var mongoose = require('mongoose');
var Todo = require('../models/Appointments.js');
/* GET /todos listing. */
router.get('/admin', function(req, res, next) {
Todo.find(function (err, todos) {
if (err) return next(err);
res.json(todos);
});
});
module.exports = router;

One way to do this is via the Accept header. If the request only accepts JSON then let the request go through to your API. If the request accepts HTML then always serve up your index page. Then once the index page loads angular's router will take care of the rest.
// Angular config - default Accept header for all ajax requests
$httpProvider.defaults.headers.common = {
'Accept': 'application/json'
};
// Middleware in Node to "intercept" non JSON requests
// Place this after express.static middleware but before your route definitions.
app.use(function(req, res, next) {
// keep in mind this applies to all requests, so 404s will need to be handled by your angular app since any url will serve up the index page
if(req.header('Accept') !== 'application/json') {
console.log('serving the index page');
req.url = '/'; // force the url to serve the index route.
}
next();
});
One more thing to note about this approach is that obviously you won't be able to see/debug your JSON data by hitting the URL directly anymore. There are several useful tools like Advanced REST Client or POSTman which actually give you better control and more options for things like that. Just make sure you set the Accept header in one of those tools and you'll be able to see the JSON response.

The actual URL is localhost#!/admin, try that. Angular hides the hashbang #!
Angular's URL routing is an "illusion" in that way. It only works on the client-side and only when your Angular app is loaded, which is on the main / route.
A solution could be to conditionally redirect from localhost/admin to localhost#!/admin, i.e. redirecting to your Angular app and passing it the #!/admin path. The condition could be a check for whether or not JSON was requested.
router.get('/admin', function(req, res, next) {
if(req.header('Accept') !== 'application/json')
return res.redirect('/#!/admin');
Todo.find(function (err, todos) {
if (err) return next(err);
res.json(todos);
});
});
You'll also need to configure Angular such that when it requests '/admin' json data from the server, it should only accept json (by setting the request header), which is how the the server will distinguish it from the regular '/admin' request. For that, if you're using $http.get you would do $http.get('/admin', {'Accept':'application/json'})

Using Route of express node.js but express.Router getting as undefined

My code of router from default routes/index
/* GET home page. */
exports.index = function(req, res){
res.render('user', { title: 'Abcd' });
};
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res) {
res.render('index', { title: 'Express' });
});
router.get('/helloworld', function(req, res) {
res.render('helloworld', { title: 'Hello, World!' })
});
module.exports = router;
getting error as can not call method get of undefined.I am new in node js please anyone help me.

Try upgrading to Express 4.x. You are probably running a 3.x flavor.

Router is a middleware of express which is registered implicitly with the express object the first time post() or get() is used. You can but don't have to add this explicitly calling use(), which allows you to register various middleware with express and so allows configuring processing and behavior in consideration of precedence.
Correct initialization and usage might look like this:
EDIT: Changed the example to be a "complete" http server.
app.js
var http = require('http');
var express = require('express');
// Requiring express exports a function that creates the application. Call it!
var app = express();
// Set port to listen to
app.set('port', process.env.PORT || 3000);
// Set view engine
app.set('view engine', 'jade');
// Tell express to use the router middleware
// Can be omitted if precedence doesn't matter
// (e.g. for loading static resources)
app.use(app.router);
// Add callback handler for home (/) route
app.get('/', function(req, res) {
res.render('index', { title: 'Express' });
});
// Create http server by passing "app" to it:
http.createServer(app).listen(app.get('port'), function() {
console.log('Express server listening on port ' + app.get('port'));
});
Now, if you place a minimal view into the default folder for views...
views/index.jade
doctype 5
html
head
meta(charset='utf-8')
title #{title}
meta(name='viewport', content='width=device-width, initial-scale=1.0')
body
div
h1 Gotcha! Title is "#{title}"
... and start your server from the console with...
$ node app.js
...you should have your first node/express/jade powered app up and running!