CRA embedded in express app breaks express routing - express

Question

I have created an CRA app and have a couple express routes loading the CRA build files, for example:
app.get('/files', async (req, res, next) => {
...
try {
res.format({
html: function() {
const fileLoc = './public/react_ui/build/index.html';
const stream = fs.createReadStream(path.resolve(fileLoc));
stream.pipe(res);
}
});
} catch (e) {
next(e);
res.redirect(SEE_OTHER.http_status, '/login');
}
});
Prior to added the CRA, the express app exposed the /public folder like this:
// access to express App code files
app.use(express.static(__dirname + '/public'));
Now that I have the CRA app embedded, I wanted to expose the build files like this, otherwise the index.html file created by building the CRA does not know where the /static/js/* are:
// access to React App build files
app.use(express.static(__dirname + '/public/react_ui/build'));
However, it breaks the express routing. For instance, when I logout of the app, it is supposed to send me to the endpoint / and this checks if I am logged in or not, if not, then it is supposed to send me to the login page like this:
app.get('/', function(req, res) {
...
isLoggedIn(req, function(status) {
switch (status.status) {
case 200:
res.redirect(303, '/loader');
break;
default:
res.redirect(303, '/login');
}
});
});
However, this is what is breaking. If I remove the command to expose the /build folder above, then the routing works again and I am sent to the login page, but accessing the CRA pages breaks, because the build files are NOT FOUND.
// access to React App build files - if removed, routing works again
app.use(express.static(__dirname + '/public/react_ui/build'));
Does anyone have any suggestions as to why this is happening? I don't know if this is a react app issue, an express issue, or something else. Any insights would be helpful.

Answer 1

You have conflicting routes.
app.js
app.use('/', express.static(__dirname + 'path/to/static/build'));
// Dont use '/' as it used for static route.
app.use('/auth', (req, res) => {
...
isLoggedIn(req, function(status) {
switch (status.status) {
case 200:
res.redirect(303, '/loader');
break;
default:
res.redirect(303, '/login');
}
});
})
Note you can use whatever route for static build. I have given general convention.