WF6. Using Git and Heroku

Last updated: 2016-07-01

This HowTo part of a series starting with Mean stack: Preparing workflow on Windows.

It consist of notes taken from Chapter 3 in “Getting Mean With Mongo, Express, Angular, and Node“ about using Git and Heroku.

WF is short for Workflow meaning a manual process in this context.

WF6. Using Git and Heroku

A. Local Git parent

This is optional.
You might want a parent folder for your Local Git Repos.

B. GetLatest (Clone) a git-project to local folder

B1. Download from Git

B2. Tell Heroku that this is a Node.js app

  • $ subl . #Open pwd in ST3
  • Edit package.json. Add section engines before dependencies section:
  "engines": {
    "node": "~4.2.4",
    "npm": "~3.5.3"
  },
  "dependencies": {
  }

B3. Edit package.json to use your global package version

Optionally edit package.json to let dependencies globally installed match your version numbers

  • $ subl . #Open pwd in ST3
  • Edit package.json. Update the version to match your system.
    "express": "~4.13.1",

B4. Tell Heroku how to start this express app

In the root of your project create a file called “Procfile” (without extension). Add this line:

web: npm start

B5. Don’t store some files in git

Edit .gitnore. Add

#Folders
db
#Files
.env
journal*.txt
*.bat
*.log

If you should already have added files of above types in your project you should untrack them with

  • git rm –cached #untrack gitnored files from git

B6. Install npm dependecies

  • $ npm install #install dependencies from package.json

B7. Verify setup and test

In WF2 you used NodeMon to start a webserver. Here we use Foreman (from Heroku Toolbelt), since it also validates the content for use in Heroku.

  • $ forman start # runs on :5000
  • Browse to http://localhost:5000 # this request will also stop foreman after the page has been delivered

C. Initialize folder as Local Git Repo and Heroku as remote Repo

C1. Initialize local Repo

  • $ pwd # /LocalGit/loc8r03
  • $ git init # make folder a local Git Repo (by creating or updating /.git/config)
  • $ git add . # add content to repo
  • $ git commit -m “1st commit” #checkin

C2. Signup with Heroku

C3. Create remote app

You can’t login via Git Bash, so now you must switch to your node shell.

  • $ cd # /LocalGit/loc8r03
  • If you return to a folder you can check if it is connected to a remote repo
    $ git remote -v
    heroku https://git.heroku.com/stormy-coast-20.git (fetch)
  • If you want to disconnect from a remote repo before creating a new
    $ git remote rm heroku
  • If you already have an app you can reuse it with
    heroku git:remote -a stormy-coast-20 #reuse existing else do:
  • $ heroku create -a stormy-coast-20 # an App and a remote Repo is created. Output:
Enter your Heroku credentials.
Email: x@y.com
Password (typing will be hidden):
Logged in as x@y.com
Creating app... done, stormy-coast-20
https://stormy-coast-20.herokuapp.com/ | https://git.heroku.com/stormy-coast-20.git
  • See your app in https://dashboard.heroku.com/apps.
  • When you click on the app you will see it has no resources and under settings you see the Repo is empty.
  • $ git push heroku master # deploy content to Heroku and remote build
    If something fails then delete the \.git\ folder and go back and do “C.” (git init) once more.
  • On the dashboard setting page of the app you can now see it is non-empty:
    Repo size 219.5KB
    Slug size 13.6MB of 300MB
  • Now that code is uploaded Heroku knows (from the procfile) it needs a node webserver.
  • $ heroku ps:scale web=1 #scale out (free level) and start webserver:
    Scaling dynos… done, now running web at 1:Free
  • Browse to https://stormy-coast-20.herokuapp.com/
    $ heroku open

D. CheckIn (commit) to Local Repo and Deploy/Publish (push) to Heroku

When local and remote repo is setup then you only need to checkin with these three commands

  • $ git add . # add content to repo
  • $ git commit -m “1st commit” # checkin
  • $ git push heroku master # deploy content to Heroku and remote build
  • Browse to https://stormy-coast-20.herokuapp.com/

x. Branch off

x. Download latest (Merge) from Remote to Local Repo

x. Upload for merge back to Remote Repo (Pull Request)

The End.

Leave a Reply

Please log in using one of these methods to post your comment:

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

%d bloggers like this: