Wednesday, 23 September 2020

Server-side rendering React on Heroku

Repository- https://github.com/sapinder-pal/Rest-Countries-App-ReactJS-SASS

I just tried to transform my React app to SSR system. Although it works perfectly on localhost but it throws an application-error when deployed to Heroku. The logs in my local terminal show that the build completes successfully-

remote: -----> Build succeeded!
remote: -----> Discovering process types
remote:        Procfile declares types     -> (none)
remote:        Default types for buildpack -> web
remote:
remote: -----> Compressing...
remote:        Done: 27.2M
remote: -----> Launching...
remote:        Released v22
remote:        https://rest-countries-api-app.herokuapp.com/ deployed to Heroku
remote:
remote: Verifying deploy... done.
To https://git.heroku.com/rest-countries-api-app.git
   b7f401a..1bba107  master -> master

While the Application logs on Heroku show that the process stops at start script-

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}`);
});

I don't know if there's anything else to configure for Heroku. Please help me!

EDIT 1-

For Vijay's answer, I still get the application error on visiting the url. But the logs are a bit different now-

2020-09-22T07:06:08.064459+00:00 app[web.1]: npm ERR! A complete log of this run can be found in:
2020-09-22T07:06:08.064655+00:00 app[web.1]: npm ERR!     /app/.npm/_logs/2020-09-22T07_06_08_018Z-debug.log
2020-09-22T07:06:08.332124+00:00 heroku[web.1]: Process exited with status 1
2020-09-22T07:06:08.374455+00:00 heroku[web.1]: State changed from starting to crashed
2020-09-22T07:06:09.276159+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=rest-countries-api-app.herokuapp.com request_id=e6ef6348-80ee-4aeb-9a98-1cc58583649f fwd="42.109.209.24" dyno= connect= service= status=503 bytes= protocol=https
2020-09-22T07:06:10.915136+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=rest-countries-api-app.herokuapp.com request_id=3cd6c993-c880-466f-b7db-8d8a4d6e44f2 fwd="42.109.209.24" dyno= connect= service= status=503 bytes= protocol=https
2020-09-22T07:06:25.125577+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=rest-countries-api-app.herokuapp.com request_id=e161a92e-68d2-47c3-a5eb-51b3b2ba527a fwd="42.109.209.24" dyno= connect= service= status=503 bytes= protocol=https
2020-09-22T07:06:25.734394+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=rest-countries-api-app.herokuapp.com request_id=8d12a74c-8c03-4706-beec-94862fe46560 fwd="42.109.209.24" dyno= connect= service= status=503 bytes= protocol=https
2020-09-22T07:06:34.415330+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=rest-countries-api-app.herokuapp.com request_id=92c89c5d-158e-4503-932d-38c9e83f65b8 fwd="42.109.209.24" dyno= connect= service= status=503 bytes= protocol=https
2020-09-22T07:06:35.055856+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=rest-countries-api-app.herokuapp.com request_id=f17bb24c-628b-4423-8398-2100ad1d8099 fwd="42.109.209.24" dyno= connect= service= status=503 bytes= protocol=https
2020-09-22T07:14:06.178856+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=HEAD path="/" host=rest-countries-api-app.herokuapp.com request_id=f8a6ce7f-e695-4d9a-b1fa-a9b318d06c34 fwd="217.182.175.162" dyno= connect= service= status=503 bytes= protocol=https


from Server-side rendering React on Heroku

No comments:

Post a Comment