Deploy a Hello World React WebApp to Heroku in 10 minutes Full Tutorial

React boilerplate is a great way to get your software idea off the ground in a modern javascript stack. Today, I'll be going through a basic setup of react-boilerplate, getting to a hello world page on heroku.

<p dir="auto"><span>You can find react boilerplate here: <a href="https://github.com/react-boilerplate/react-boilerplate" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://github.com/react-boilerplate/react-boilerplate <p dir="auto">First, we'll clone the react boilerplate repository: <blockquote> <p dir="auto"><code>git clone --depth=1 https://github.com/react-boilerplate/react-boilerplate.git myappfolder <p dir="auto">Next, cd into <code>myappfolder and issue <code>rm -rf .git to get rid of the git history from the react-boilerplate repo. <p dir="auto">Make sure you have yarn installed, if not issue this command: <code>brew install yarn (if you don't have brew, you'll need to install that first). <p dir="auto">Okay cool, you've got brew and you installed yarn, now let's run the react boilerplate setup command: <blockquote> <p dir="auto"><code>yarn run setup <p dir="auto">Let's run the start command just to make sure nothing is FUBAR: <blockquote> <p dir="auto"><code>yarn start <p dir="auto"><span>And let's checkout the site at <a href="http://localhost:3000" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">http://localhost:3000 <p dir="auto">If you see something like this, congrats! You now have a nodejs server running on your computer that is serving up a webpage powered by react. <p dir="auto"><img src="https://images.hive.blog/768x0/https://steemitimages.com/DQmahfszXRAeMBrPzTbZqkkv42tk9gbTAZ8iycwoyAfCJMV/Screen%20Shot%202017-09-23%20at%203.35.07%20PM.png" alt="Screen Shot 2017-09-23 at 3.35.07 PM.png" srcset="https://images.hive.blog/768x0/https://steemitimages.com/DQmahfszXRAeMBrPzTbZqkkv42tk9gbTAZ8iycwoyAfCJMV/Screen%20Shot%202017-09-23%20at%203.35.07%20PM.png 1x, https://images.hive.blog/1536x0/https://steemitimages.com/DQmahfszXRAeMBrPzTbZqkkv42tk9gbTAZ8iycwoyAfCJMV/Screen%20Shot%202017-09-23%20at%203.35.07%20PM.png 2x" /> <p dir="auto">Now let's delete the example app: <blockquote> <p dir="auto"><code>yarn run clean <p dir="auto">Awww yeah, now we got rid of all the example components and thingamajings that came with the initial install of react-boilerplate. If you got a message like this, you're looking good! <p dir="auto"><img src="https://images.hive.blog/768x0/https://steemitimages.com/DQmdL26x2tyB9Kz4cwwfQVgqiRWWRsnBHTVw6vza5pFTDMi/Screen%20Shot%202017-09-23%20at%203.38.07%20PM.png" alt="Screen Shot 2017-09-23 at 3.38.07 PM.png" srcset="https://images.hive.blog/768x0/https://steemitimages.com/DQmdL26x2tyB9Kz4cwwfQVgqiRWWRsnBHTVw6vza5pFTDMi/Screen%20Shot%202017-09-23%20at%203.38.07%20PM.png 1x, https://images.hive.blog/1536x0/https://steemitimages.com/DQmdL26x2tyB9Kz4cwwfQVgqiRWWRsnBHTVw6vza5pFTDMi/Screen%20Shot%202017-09-23%20at%203.38.07%20PM.png 2x" /> <p dir="auto">Let's start the server and see what our webapp looks like now: <code>yarn start <p dir="auto"><img src="https://images.hive.blog/768x0/https://steemitimages.com/DQmWtCYSc4k8gCa7SYeWBSGS3ZFpSF8cHWZKwBDc4HiHdFK/Screen%20Shot%202017-09-23%20at%203.40.56%20PM.png" alt="Screen Shot 2017-09-23 at 3.40.56 PM.png" srcset="https://images.hive.blog/768x0/https://steemitimages.com/DQmWtCYSc4k8gCa7SYeWBSGS3ZFpSF8cHWZKwBDc4HiHdFK/Screen%20Shot%202017-09-23%20at%203.40.56%20PM.png 1x, https://images.hive.blog/1536x0/https://steemitimages.com/DQmWtCYSc4k8gCa7SYeWBSGS3ZFpSF8cHWZKwBDc4HiHdFK/Screen%20Shot%202017-09-23%20at%203.40.56%20PM.png 2x" /> <p dir="auto">Nice. Very nice yes. Enough celebrating, let's continue for there is more work to be done! <p dir="auto">You'll want to go ahead and create a new empty github repository. Once you've done that, let's add our existing project to this new repo: <blockquote> <p dir="auto"><code>git remote add origin git@github.com:yourusernamehere/yourreponame.git <p dir="auto">We can now do a force push to setup our master branch with our initial commit: <p dir="auto"><code>git push --set-upstream origin master -f <p dir="auto">Right on, onwards and upward. <p dir="auto">In the root of our react project, let's create a file called <code>Procfile and fill it with the following: <blockquote> <p dir="auto"><code>web: yarn run start:prod <p dir="auto"><span>We now need to install the heroku CLI for Mac OSX as shown here: <a href="https://devcenter.heroku.com/articles/getting-started-with-nodejs#set-up" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://devcenter.heroku.com/articles/getting-started-with-nodejs#set-up <p dir="auto">We should now be able to do <code>heroku login and login to heroku in our terminal <p dir="auto">Let's add heroku to our remotes: <p dir="auto"><code>git remote add heroku https://git.heroku.com/yourappname.git <p dir="auto">We'll need to delete the package-lock.json file so that heroku will instead use yarn by default. <blockquote> <p dir="auto"><code>git rm package-lock.json <p dir="auto">We now need to add a heroku buildpack in preparation for the heroku deploy. <p dir="auto">Modify your <code>package.json and add in this script to the scripts section of the json: <blockquote> <p dir="auto"><code>"heroku-postbuild": "yarn run build", <p dir="auto">This will make Heroku build your production assets during the deployment process. <p dir="auto">We also need to update the prebuild script in the package.json to look like so: <p dir="auto"><code>"prebuild": "yarn run build:clean", <p dir="auto">We also need to set an env var for Heroku so that our dev dependencies get installed, since we will need these for the build process: <p dir="auto"><code>heroku config:set NPM_CONFIG_PRODUCTION=false <p dir="auto">Now let's pray and hope this works: <blockquote> <p dir="auto"><code>git push heroku master <p dir="auto">Congrats! You're site is now live and ready to go. You can view it by issuing this command: <blockquote> <p dir="auto"><code>heroku open <p dir="auto">Hope this helps. If you get stuck on any part, please comment below and I'll help you out. <p dir="auto">Thanks for reading!