8479. Deploying React and Socket.IO App to Heroku
Nodejs and Heroku

Introduce how to deploy a React and Socket.IO app to Heroku.

1. Socket.IO App

In the posting Building Course Player with React and Socket.IO, I introduced how to build an course player with React and Socket.IO. In this posting, I will introduce how to deploy this app to Heroku.

2. Heroku

Heroku is a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud.

2.1 Sign Up

Go to https://signup.heroku.com/ create a free Heroku account.

2.2 Installing Heroku CLI

Go to https://devcenter.heroku.com/articles/heroku-cli#download-and-install to download proper installer.

2.3 Getting Started

First, read the official tutorial Getting Started on Heroku with Node.js to get familiar with the basic functions of Heroku. Below are some of the highlights from the tutorial.
1) Log into Heroku

$ heroku login
Enter your Heroku credentials.
Email: csgeek@mail.com
Password: **********

2) Create Heroku App

$ heroku create                        // no name, a random name will be assigned to the app
$ heroku create course-player-react // create app with the given name

3) View logs

$ heroku logs --tail

4) Scale the app

$ heroku ps //check how many dynos are running
$ heroku ps:scale web=0 // scale down
$ heroku ps:scale web=1 // scale up

5) Run the app locally

$ heroku local web // same as 'npm start'

6) Heroku Console

$ heroku run bash
Running bash on ⬢ damp-springs-52045... up, run.3598 (Free)
~ $ ls
Procfile  README.md  app.json  index.js  node_modules  package-lock.json  package.json	public	test.js  views
  • Type ‘exit’ to quit the console.

3. Deployment

3.1 Cloning Source Code

$ git clone https://github.com/jojozhuang/course-player-react
$ cd course-player-react

3.2 Creating App on Heroku

$ heroku create course-player-react
Creating ⬢ course-player-react... done
https://course-player-react.herokuapp.com/ | https://git.heroku.com/course-player-react.git
  • When creating an app, a git remote (called heroku) is also created and associated with the local git repository.

3.3 Pushing Files to Heroku

$ git push heroku master
Counting objects: 89, done.
Delta compression using up to 8 threads.
Compressing objects: 100% (81/81), done.
Writing objects: 100% (89/89), 14.55 MiB | 625.00 KiB/s, done.
Total 89 (delta 15), reused 0 (delta 0)
remote: Compressing source files... done.
remote: Building source:
remote:
remote: -----> Node.js app detected
remote:
remote: -----> Creating runtime environment
remote:        
remote:        NPM_CONFIG_LOGLEVEL=error
remote:        NODE_VERBOSE=false
remote:        NODE_ENV=production
remote:        NODE_MODULES_CACHE=true
remote:
remote: -----> Installing binaries
remote:        engines.node (package.json):  unspecified
remote:        engines.npm (package.json):   unspecified (use default)
remote:        
remote:        Resolving node version 8.x...
remote:        Downloading and installing node 8.11.3...
remote:        Using default npm version: 5.6.0
remote:
remote: -----> Restoring cache
remote:        Skipping cache restore (not-found)
remote:
remote: -----> Building dependencies
remote:        Installing node modules (package.json + package-lock)
remote:        
remote:        > uglifyjs-webpack-plugin@0.4.6 postinstall /tmp/build_be3dc5293418ccdd9f30ac4b62a5e876/node_modules/uglifyjs-webpack-plugin
remote:        > node lib/post_install.js
remote:        
remote:        added 808 packages in 14.998s
remote:
remote: -----> Caching build
remote:        Clearing previous node cache
remote:        Saving 2 cacheDirectories (default):
remote:        - node_modules
remote:        - bower_components (nothing to cache)
remote:
remote: -----> Pruning devDependencies
remote:        Skipping because npm 5.6.0 sometimes fails when running 'npm prune' due to a known issue
remote:        https://github.com/npm/npm/issues/19356
remote:        
remote:        You can silence this warning by updating to at least npm 5.7.1 in your package.json
remote:        https://devcenter.heroku.com/articles/nodejs-support#specifying-an-npm-version
remote:
remote: -----> Build succeeded!
remote: -----> Discovering process types
remote:        Procfile declares types     -> (none)
remote:        Default types for buildpack -> web
remote:
remote: -----> Compressing...
remote:        Done: 44.1M
remote: -----> Launching...
remote:        Released v3
remote:        https://course-player-react.herokuapp.com/ deployed to Heroku
remote:
remote: Verifying deploy... done.
To https://git.heroku.com/course-player-react.git
 * [new branch]      master -> master

If you need to push some updated files, run following commands.

$ git add .
$ git commit -m "<comments>"
$ git push heroku master

4. Testing

Open web browser, access ‘https://course-player-react.herokuapp.com/’. The player is working now. image
Click the ‘Play’ button and drag to slider bar. image

5. Reference