Deploy

Deploy

https://youtu.be/7q0FP_C832E

• Heroku
  • Setup
  • Common flow
  • Client
  • Server
  • mySQL
  • mongodb
  • Helpers
  • Continuous integration
• Github Pages

---

Heroku

https://devcenter.heroku.com/articles/getting-started-with-nodejs

Signup an account on heroku (https://signup.heroku.com/)

Setup

https://devcenter.heroku.com/articles/getting-started-with-nodejs#set-up

install heroku cli

log in

heroku login

Common flow

# Create heroku app
heroku create [<APP_NAME>]

# Add 'heroku' git remote (optional - normally done by `heroku create`)
git remote add heroku https://git.heroku.com/<APP_NAME>.git

# Deploy
git push heroku master

Client

create-react-app

https://github.com/mars/create-react-app-buildpack#usage

# in your project directory
heroku create $APP_NAME --buildpack https://github.com/mars/create-react-app-buildpack.git

git push heroku master

static deploy

https://github.com/heroku/heroku-buildpack-static

heroku create $APP_NAME --buildpack https://github.com/heroku/heroku-buildpack-static.git

Create a static.json file in your project root directory

{
  "root": "src/"
}

Server

Procfile

https://devcenter.heroku.com/articles/getting-started-with-nodejs#define-a-procfile

Create a Procfile file in your project root directory

web: node src/index.js

web: entry indicates the command heroku should run to start your project

Commit it

git add Procfile
git commit -m "Procfile added"

mongoDB

heroku addons:create mongolab

mySQL

https://devcenter.heroku.com/articles/getting-started-with-nodejs#provision-a-database

https://devcenter.heroku.com/articles/cleardb

# Add clearDB (mySQL) addon
heroku addons:create cleardb:ignite

# Config
heroku config | grep CLEARDB_DATABASE_URL
# You will get a mysql url of the form 'mysql://<USER>:<PWD>@<HOST>/<DATABASE>?reconnect=true'

# Set the DATABASE_URL env variable with the CLEARDB_DATABASE_URL
heroku config:set DATABASE_URL="mysql://...."

# Populate/init database (remote connection)
mysql -u <USER> -p -h <HOST> -D <DATABASE> < src/init-db.sql

Helpers

# Visit your deployed app
heroku open

# Restart app
heroku restart

# Display config (environment variables)
heroku config

# Set config environment variable
heroku config:set API_URL="http://locahost:5000"

# Display logs
heroku logs --tail

# Open an addon interface (eg. cleardb)
heroku addons:open cleardb

Continuous integration

with heroku pipeline (easy)

• open the Deploy tab of your App in heroku dashboard https://dashboard.heroku.com/apps/<APP_NAME>/deploy/github
• connect with github
• select the repository
• enable automatic deploy on master ([x] Wait for CI to pass before deploy)

OR with Travis CI (not tested)

https://github.com/travis-ci/travis.rb#installation

Install Travis

gem install travis

Log to travis-ci.org & add repo -> activate

https://docs.travis-ci.com/user/deployment/heroku/

.travis.yml file $HEROKU_API_KEY must be set as an environment variable

language: node_js
node_js:
  - "node"
branches:
  only:
    - dev
    - master
jobs:
  include:
    - stage: style
      script: npm run lint
    - stage: test
      script: npm run test
    - stage: deploy to heroku
      script: skip
      deploy:
      provider: heroku
      api_key:
        secure: $HEROKU_API_KEY

Github Pages

Install gh-pages package

npm install gh-pages --save-dev

In package.json

• add a homepage property. Define its value to be the string https://{username}.github.io/{repo-name}, where {username} is your GitHub username, and {repo-name} is the name of the GitHub repository

"homepage": "https://akabab.github.io/todos-client-react"

• add a deploy scripts

"scripts": {
  //...
  "deploy": "npm run build && gh-pages -d build"
}

• setup github pages (Github settings) to serve branch gh-pages

Full procedure -> https://github.com/gitname/react-gh-pages#procedure