How to deploy a React SSR application to Heroku?

Question

I have simple running react Server Side App .

GitHub Link for the repo, in the local env i have a build script that runs using npm start which starts the client and server builds and then i have a watcher which listen's to changes in file. This set up works really well locally.

"scripts": {
    "start": "npm run dev",
    "dev": "npm-run-all --parallel dev:*",
    "dev:server": "nodemon --watch build --exec \"node build/bundle.js\"",
    "dev:build-server": "webpack --config webpack.server.js --watch",
    "dev:build-client": "webpack --config webpack.client.js --watch"
  },

I tried to deploy these changes as a prod app to heroku here for some odd reason it never works and returns 503 . I have not added any changes to the build scripts in the package.json and tried deploying as is.

I thought it should work as the build log dosent give any errors on heroku but while trying to access the app it shows error and asks me to check app log but i am not using heroku cli and not planning on using it , and

thinking of auto deployment from github.

I am quite new to script/ largely build scripts trying to learn more on them.

How can we make sure this small React SSR git repo deploys and i am able to access the home page .

mousto090 · Accepted Answer · 2020-05-17 03:25:41Z

4

I am not using heroku cli and not planning on using it

You should and I really recommend, as it's the best way to see errors that occurs after the build, why your app crashed and see the full logs. Even though you can see the logs from your heroku dashbord (More -> View logs), this only gives you the tail of the logs.

How can we make sure this small React SSR git repo deploys and i am able to access the home page.

Make sure the server is listening on the right port by using process.env.PORT as heroku expose a dynamic port.

const port = process.env.PORT || 3000
app.listen(port, () => {
    console.log('Listening on Port ' + port);
})

On heroku the NODE_ENV environment variable is set toproduction by default, which means heroku will prune thedevDependencies after the build, but in your case, you still need these dependencies to start your app with webpack.

You can fix this in two ways :

Customize your build process by adding a build script:

From your github repo :

"start": "webpack --config webpack.client.js; webpack --config webpack.server.js; node build/bundle.js"

to

"scripts": {
    "start": "node build/bundle.js",
    "build": "webpack --config webpack.client.js & webpack --config webpack.server.js",
    "build:start": "webpack --config webpack.client.js && webpack --config webpack.server.js && node build/bundle.js",
}

Set the NODE_ENV to any other value to skip pruning your devDependencies

heroku config:set NODE_ENV=development //(Another reason to use the CLI)

Check this link for more details

answered May 17, 2020 at 3:25

mousto090

2,0391 gold badge15 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rahul Singh Over a year ago

thanks a lot , I am still not keen on using the CLI as i am not worried a lot about some of the intricate connections, but i get your point and appreciate the details pointed out. Just for someone worried about setting config they can go to dashboard-classic.heroku.com/apps{your-app-name}/settings and set config vars. I will also appreciate if you could add some of the details of where we get info on these will be the scripts and order heroku looks at . will be a great read for me and some one looking out for a similar answer

mousto090 Over a year ago

My answer is mainly based on the link (devcenter.heroku.com/articles/…) provided in the answer. Here are also some useful links devcenter.heroku.com/articles/… and help.heroku.com/P1AVPANS/…

Collectives™ on Stack Overflow

How to deploy a React SSR application to Heroku?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related