How to deploy a SSR React App in Azure App Services? - reactjs

Question

I setup a simple application using razzle and React. It works perfectly on my local machine, even production build. When I try to deploy the app to Azure I encounter error 500. I checked the logs and the app is indeed started, but the server is is never reached ('/' route).
I tried this web.config file and tested it with a simple Express app and it works great, but it doesn't work for me.
This is my server.js
const server = express();
server
.disable('x-powered-by')
.use(express.static(process.env.RAZZLE_PUBLIC_DIR))
.get('/*', (req, res) => {
console.log("This should trigger")
And this is index.js
import http from 'http';
let app = require('./server').default;
const server = http.createServer(app);
let currentApp = app;
server.listen(process.env.PORT || 3000, error => {
if (error) {
console.log(error);
}
console.log('🚀 started in port ', process.env.PORT || 3000);
});
This code compiles into a single server.js file (which I already point in my web.config file)
I check the logs and this line appears in the logs
console.log('🚀 started in port ', process.env.PORT || 3000);
But not this one
console.log("This should trigger")
Neither any content or response from the server.
Hope you could help. This is driving me nuts.

Answer 1

I tried to follow the README of GitHub repo jaredpalmer/razzle to build and run the simple project my-app, then discovered the command npm run build will compile the value of the code process.env.PORT || 3000 of src/index.js into build/server.js as the figure below.
Note: if I set PORT environment port with value 5000 via command set PORT=5000 on Windows or export PORT=5000 on Linux, the port "3000" above in build/server.js will be instead of "5000", not process.env.PORT code.
However, to run a Node.js app on Azure WebApp, you have to use process.env.PORT to read the port from environment variable PORT, then to upload all files within build and the web.config file onto Azure to make the app using the value of PORT environment variable set by WebApp to work.
So to fix this issue, you need to manually replace "3000" with process.env.PORT via search "3000" or the value of PORT environment, as the figure below, then to do the deployment.