Static Script file overrides the GET method Server-side Rendering - node.js

Question

Repository- https://github.com/sapinder-pal/Rest-Countries-App-ReactJS-SASS
I'm trying to transform my React app to SSR system. Although it works on localhost but throws an application-error when deployed to Heroku. The build logs show success, but an Application error is thrown on visiting the url.
PLEASE see the EDIT 1 where I've stated the root error.
Application Logs-
2020-09-21T05:23:05.915898+00:00 app[web.1]: npm ERR! rest-countriers#1.0.0 start: `node server/index.js`
2020-09-21T05:23:05.916046+00:00 app[web.1]: npm ERR! Exit status 1
2020-09-21T05:23:05.916211+00:00 app[web.1]: npm ERR!
2020-09-21T05:23:05.916335+00:00 app[web.1]: npm ERR! Failed at the rest-countriers#1.0.0 start script.
2020-09-21T05:23:05.916489+00:00 app[web.1]: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
2020-09-21T05:23:06.005989+00:00 app[web.1]:
2020-09-21T05:23:06.006055+00:00 app[web.1]: npm ERR! A complete log of this run can be found in:
2020-09-21T05:23:06.006056+00:00 app[web.1]: npm ERR! /app/.npm/_logs/2020-09-21T05_23_05_918Z-debug.log
2020-09-21T05:23:06.234287+00:00 heroku[web.1]: Process exited with status 1
2020-09-21T05:23:06.275353+00:00 heroku[web.1]: State changed from starting to crashed
server/index.js-
require('ignore-styles');
require('#babel/register')({
ignore: [/(node_module)/],
presets: ['#babel/preset-env', '#babel/preset-react'],
plugins: ['#babel/transform-runtime']
});
require('./server');
server/server.js-
import express from 'express';
import fs from 'fs';
import path from 'path';
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import {StaticRouter} from 'react-router-dom';
import App from '../src/App';
const PORT = process.env.PORT || 8080;
const app = express();
app.use(express.static(path.resolve('./build')))
app.get('*', (req, res) => {
fs.readFile(path.resolve('./build/index.html'), 'utf-8', (err, data) => {
if (err) {
console.log(err);
return res.status(500).send('Some error happened');
}
const context = {};
const app = ReactDOMServer.renderToString(
<StaticRouter location={req.url} context={context}>
<App />
</StaticRouter>
)
return res.send(
data.replace(
'<div id="root"></div>',
`<div id="root">${app}</div>`
)
);
});
});
app.listen(PORT, () => {
console.log(`App launched on ${PORT}`);
});
EDIT 1-
Looks like I've found the root error but don't quite know the reason-
/**** app.get() WORKS ONLY IF I DON'T SERVER THE 'BUILD' FOLDER. ****/
app.use(express.static(path.resolve('./build')));
/**** This function doesn't log anything if the *build* folder is served.
I got assured when I visited **Network** tab in devtools where I saw that
the *initial preview* for html file is blank, which means the file is not
rendered server-side ****/
app.get('*', (req, res) => {
console.log('got request');
....
}
I have index.html, index.css and index.bundle.js in the build folder.

Answer 1

You need to add heroku-postbuild command in your package.json
Your command would be something similar to
scripts:{
...
"build": ***,
"heroku-postbuild": "npm install && npm run build",
}
this will run and install your dependencies and will run the build command.
Try removing 'return' keyword
res.send(
data.replace(
<div id="root"></div>',
<div id="root">${app}</div>`
)
)
port should be
process.env.PORT || 3000
That's it. It should probably work now.

Answer 2

SOLVED!!!
There were two issues with the code-
The first one being that the app.get() method doesn't run was solved by moving app.use() statement below the former one.
However, I still don't quite understand the reason for this, because I think a middleware would still run before the callback function in the route method. If you know what's happening here, please let me know through comments!
The second issue, which made the start script fail, was because I was using #babel/core as a dev-dependency. So I re-installed it as a dependency only, and that fixed the error.
I'll still appreciate if anyone could explain the first point to me!