<p><a href="http://datak.biz/blog/detail/16/" target="_blank">In previous article</a>, we've explained options to deploy static web page (react is also static). For extended application which requires backend processing like when we need to treat confidential information, the app is no longer static. In this case we need to deploy backend server as well as front end and deployment is also a bit more complicated. In this article we will explain how to deploy react + node to heroku starting with just react.</p><p><br></p><h3>Case 1 : Front End React Only</h3><p>Assuming we've installed heroku CLI in local laptop. You can check installation by</p><pre>heroku --version</pre><p>First let's log in to heroku. This commenda automatically open browser to log in through browser.</p><pre>heroku login</pre><p>Heroku's project is kind of similar to github, heroku has specific git command. Then create a heroku project. This project name will be a domain name putting before ".herokuapp.com". After --buildpack, giving react buildpack from github to treat this deployment as static react web page</p><pre>heroku create &lt;your project name&gt; --buildpack https://github.com/mars/create-react-app-buildpack.git</pre><p>assuming you've already used git (or github) for react project, type;</p><pre>git push heroku master(or your branch)</pre><p>That's it and the buildpack we've specified above will deploy at heroku. The buildpack automate 'npm run build' too. In case build error you might need to manually do</p><pre>npm run build git add . git coomit -m 'xxx' git push heroku master</pre><p> Once deployment is done, you can open the app by</p><pre>heroku open</pre><p>Now if you check connecting repo</p><pre>git remote -v</pre><p>you will see 2 connections, one is for github and another is heroku, FYI. We can push to both repo by selecting</p><pre>git push origin master # for a github git push heroku master # for a heroku</pre><p><br></p><h3>Case 2 : Front End React + Back End Node</h3><p>Assuming we've already split react front and and node backend, so your file structure right under project repo is something like</p><pre>#react project client node_modules package.json server.js .git .gitignore .env #include secret key</pre><p>Where client folder include all react application, while server.js is based on node.</p><p><br></p><h4>If you would like to update your front-end only app from case1</h4><p>In case you would like to deploy this app based on case1 (assume we've started with building front then adding backend, but these are still same project), we might need to reconnect to heroku existing app;</p><pre>heroku apps #find &lt;your heroku existing app&gt; heroku git:remote -a &lt;your heroku existing app&gt; #reconnect existing heroku app to current react + node based local repo</pre><p>Now we are deploying to express server using node so we need to remove existing buildpack.</p><pre>heroku buildpacks #list up current buildpacks heroku buildpacks:remove &lt;your current buildpacks&gt;</pre><p>Then we need to commit these changes through git then deploy</p><pre>git add . git commit -m 'removed buildpack replacing with express server' git push heroku master --force #might need --force git push origin master #in case you use github to manage project</pre><p><br></p><h4>If you would like to create new app with both front-end and back-end</h4><pre>heroku create &lt;your project name&gt; git add . git commit -m 'initial commit to heroku' git push heroku master git push origin master</pre><p><br></p><p>Make sure that .gitignore includes .env so we don't add secret information in git repository. The secret info needs to manually send heroku through</p><pre>heroku config:set YOUR_SECRET_KEY = YYYYYYYYYYYYYYYYYYYYYYYYYY</pre><p>Now heroku get secret key so heroku could use the key in the production app.</p><p><br></p><p>This is assuming 'git push heroku master' automate couple of scripting written in package.json</p><pre>#package.json right under repo "scripts": { "client": "cd client &amp;&amp; yarn start", "server": "nodemon server.js", "build": "cd client &amp;&amp; npm run build", "dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\"", "start": "node server.js", "heroku-postbuild": "cd client &amp;&amp; npm install &amp;&amp; npm install --only=dev --no-shrinkwrap &amp;&amp; npm run build" }</pre><p><br></p><h4>My working solution</h4>but some cases (and my case too), this does not work if the version compatibility between client and server does not match. In the case change 'heroku-postbuild' scrip in package.json like<p></p><pre>#package.json right under repo "scripts": { "client": "cd client &amp;&amp; npm start", "server": "nodemon server.js", "build": "cd client &amp;&amp; npm run build", "dev": "concurrently --kill-others-on-fail \"npm run server\" \"npm run client --host 0.0.0.0\"", "start": "node server.js", <b>"heroku-postbuild": "npm run production"</b> }</pre><p>and manually do client side npm run build</p><pre>cd client &amp;&amp; npm run build cd .. #back to right under repo git add . git commit -m 'new changes, whatever you made' git push origin master git push heroku master</pre><p><br></p><p>For a development in localhost,</p><pre>npm run dev (this automate the script in package.json for npm run server and npm run client)</pre><p>--host 0.0.0.0 is to enable intranet testing so we could use different device to connect to the local development server to test</p>