Publishing a create-react-app App on Heroku for free!

Greetings, all. Over the past two weeks, I’ve been casually learning about the React framework. The experience has been a blast, and while I’m definitely still a big ol’ noob, I’m hoping the following will prove useful to someone out there.

Now before getting into any great detail, if you’re here just because of the title then this is what you want: https://github.com/mars/heroku-cra-node. You can clone that repository and then get coding inside the react-ui folder. Once you’re ready, push your changes to Heroku and away you go! Read on to learn how I eventually got there.

Right, with that out of the way we can get into the details. A great place to start learning React is their Quick Start tutorial – please make sure you have NodeJS installed as well. It will take a while to work through it and digest everything going on, so don’t be disheartened if you’re still working through it after an hour or two. Ensure you understand whathow, and why for each part of the Quick Start.

As part of the Quick Start, you use the npm package create-react-app. It’s great to get started developing using React. It spins up a quick dev server for you, has hot-reloading, and even includes a service worker so your app loads from a local cache on future loads.

Quick side note – here’s how to get started with create-react-app:

npm install create-react-app -g
create-react-app my-app
cd my-app
npm start

After spending a while hacking and slashing my way through numerous tutorials I managed to put together a basic CRUD application with authentication. Great, but my thirst for knowledge not entirely quenched. I wanted to figure out how this application could be hosted online and uh, not have to pay a cent.

Heroku to the rescue. I’d been introduced to Heroku years ago by a talented colleague but hadn’t given it the chance it deserved. This time around I looked into what support Heroku offered for the Node.JS platform. Free hosting for hobby projects. Everything sounds great, let’s get started! After signing up, I got started on Heroku with Node.JS and had a sample application up and running in no time two hours.
There’s currently (July 2017) an issue with the Provision a database section of the tutorial. 
Please see this gist to save yourself the trouble of figuring out the solution.

Alright! The pieces are coming together. Now, how to get my “create-react-app” app into Heroku? Running “npm run build” in my application directory produces a production-ready build, but it needs to be hosted by a server… A-ha, Express! I had just used it as part of the Node.JS on Heroku tutorial, I’ll use it here as well.

First Attempt

Spoiler alert: It didn’t end well.
Now, this is all learning code so it’s not great.
I created an “index.js” file at the top level which served the files in my build folder using express.static. Running “node index.js” from the command line worked fine.
Right, time to create a Procfile – web: node index.js – and modify my package.json file for Heroku by specifying which Node.JS version to use and a post install script – see here.

After pushing my changes to Heroku, the command line output just started looping endlessly. Installing npm packages, building production bundle, installing npm packages, building production bundle, and so on.

Second Attempt

Not disheartened in the slightest, but quite confused as to what was going on, I sought out answers and found one in the form of heroku-cra-node. The author split the server and the React app bundle into separate folders and had two package.json files – one for the server, and the other for the React app.
What I noticed in the top level package.json was that the command to run the Node.JS server was included in the “start” script, and installing packages + creating the production bundle was handled inside the React app folder itself.

...,
"scripts": {
    "start": "node server",
    "heroku-postbuild": "cd react-ui/ && npm install && npm install --only=dev --no-shrinkwrap && npm run build"
},...

Applying this same pattern to my own project almost worked the first time. Just one missing dependency, bugger. After updating my package.json inside the react-ui folder to account for this, it was go-time. Running git push heroku master and it… just worked. Just like that, my application was up and running on the web! Great.

Wrapping things up

I’ve built dozens of applications on Microsoft’s IIS platform over the years in my professional life, but this was always something I’ve wanted to do. It was lots of fun, and I will definitely build more useless apps in the future.

You can view the GitHub repository for my application here: https://github.com/davehax/games-leant
You can view my application here: https://games-leant.herokuapp.com/
You’ll need to log in with a Google account.
Disclaimer: I will be able to see your e-mail address. It will not be used in any way, shape, or form.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s