Deploying React and Node to Heroku

3 min read ⋅ 52 views

React is a frontend library built with Javascript that executes in the client's browser. When programming with React we use a syntax called JSX, which stands for JavaScript XML, meaning a combination of Javascript and Markup Language. 

React is a client-side library as opposed to server-side frameworks like Node, PHP or JSP. Essentially, React builds a Virtual DOM on top of the DOM. The DOM, or Document Object Model, is basically the website you get when you access a URL in your browser. This comprises of folders and files, which form the aforementioned Object Model which can be accessed by a global variable, or object, called document. The object that contains the document is the window object, and its data can be accessed as well. 

React then renders susceptible Component Objects on the Virtual DOM, and by susceptible, I mean they are very perceptible and reactive to the change in their environment, each one, prompting a re-rendering of the Virtual DOM. This is a customizable aspect of the framework that you can tweak and optimize.

You might have noticed there's no link to download React, and that's because we're going to do it from the command line with a neat command named create-react-app. I'm doing this on a Windows 8.1 64-bit machine so be aware of that context. These steps aren't exactly the same on a Unix machine (Linux or Mac), but with a few changes, you'll be able to emulate it perfectly well.

First, we're going to need NPM which stands for Node Package Manager. This handy package manager will help us get create-react-app. After we download and install it, we're going to be able to use the node and npm commands in our command prompt or shell. These commands let us not only run our React frontend but also, our Node backend.

In this guide, I'm going to be using the Cmdr command prompt for Windows. This console emulator includes some useful Unix commands like ssh_keygen, which we are going to need to authenticate via SSH with Heroku's Git servers.

We can download the react.js file from a CDN and use it on our plain HTML, but what create-react-app does is provide us with a stable fully-built React implementation, with many other useful frameworks inside like Webpack, Babel, React Router, etc.

Now, it's time to navigate to project folder and run the command:

npm install -g create-react-app

This will install create-react-app and let us use it globally, in our OS command prompt. Next, we will create a React application simply using the command:

create-react-app myapp

Now we've successfully created a fully customizable React app that we can access by using the following command in our app's folder:

npm start

This will open a new tab in your browser on which our app will be displayed.

You may be surprised to know that none of this was needed to deploy our React application with Node as Backend to Heroku, but nonetheless, needed to clarify some concepts about the tools and frameworks being used.

Now that we understand a bit more about them, the next thing we should do is sign-up and log in to Heroku, the hosting server we're going to use.

We will have to download the Heroku CLI and Git in order to complete this guide. After we're done installing those, we will use a buildpack to deploy React and Node together on Heroku.

A buildpack is a folder structure coupled with commands that run when we deploy our applications to Heroku. We will use this buildpack provided by Mars Hall.

Before we do this, we can set up our SSH connection to Heroku by first creating a pair of RSA keys:

ssh-keygen -t rsa

We can use empty passphrases for now. After this, we go to our app's folder and add our keys:

heroku login

heroku keys:add

Now we're ready to clone the buildpack and deploy our application. Enter the following commands:

git clone https://github.com/mars/heroku-cra-node.git
cd heroku-cra-node/
heroku create --ssh-git
git push heroku master

An app with a semi-random name will be created by Heroku and deployed on their servers. In my case, this was the URL: https://young-lowlands-95334.herokuapp.com/

Each time we want to deploy to Heroku we can just enter the command git push heroku master to do so.

That's all for the production build running online and now we can start with local development navigating to our app's root folder and entering the following commands:

npm install
npm start

This will start our Node server. Then we navigate to our React folder and do the same:

cd react-ui/
npm install
npm start

If you get lost, you can always go back to the buildpack's README file which has descriptive steps to set up your application.





MORE ARTICLES

How to set up a MongoDB environment along with npm

The Node Package Manager (npm) is basically a magic wand for programmers. It lets you download and install from a huge l...

958 views