Creating, configuring and deploying a MEAN stack app on heroku

Introduction

This is a step-by-step guide to:

Creating a MEAN app
Managing and configuring three environments: local, staging and production using heroku
Connecting the app to a remote MongoDB database
Binding the production server to a domain name
Implementing a login/register system via Oauth

Creating your MEAN app from boilerplate code

Clone boilerplate from this repository

Credits for creating this seed: https://scotch.io/tutorials/use-mongodb-with-a-node-application-on-heroku

Heroku

Create your app First, sign up on Heroku. Create your first app
Install Heroku's CLI

https://devcenter.heroku.com/articles/heroku-command-line

Create your remote staging

      heroku create --remote staging
      
      Creating app... done, ⬢ sheltered-atoll-86099
      https://sheltered-al-86099.herokuapp.com/ | https://git.heroku.com/sheltered-al-86099.git
      
      heroku apps:rename staging-yourname --app sheltered-atoll-86099

To deploy to staging, stage and commit changes, then:

        git push staging master

Create your remote prod

      heroku create --remote production
      
      heroku apps:rename production-yourname --app heroku-generated-name-86099

Likewise, to deploy:

        git push production master

Bind the app to heroku

First list current origins:

  git remote -v

Add heroku remote:

  git remote add heroku	https://git.heroku.com/your_heroku_project.git

Download the heroku CLI for your OS on the heroku website
Add a public SSH key to your account
- Check for existing ssh keys
```
   ls -al ~/.ssh
```
- Generate a new ssh key
```
 ssh-keygen -t rsa -b 4096 -C "[email protected]"
```
  Press Enter, then type a passphrase twice
- Adding the ssh keys to heroku
```
 heroku keys:add
```

Setting up MongoDB

MongoDB can be installed locally. However, it is easier to get started with a remote db hosted by MongoLab.

Create a new db
Create a new user with credentials for that db

e.g. https://mlab.com/databases/name_of_your_db#users

Find the "sandbox" option for free hosting

Add MongoLab to your local environment

      export MONGOLAB_URI="mongodb://<dbuser>:<dbpassword>@ds053312.mongolab.com:53312/todolist"

Configure staging and prod

      heroku config:set MONGOLAB_URI="mongodb://example:[email protected]:53312/todolist" --remote staging
      heroku config:set MONGOLAB_URI="mongodb://example:[email protected]:53312/todolist" --remote production

Note: in this example, all three environments connect to the same MongoDB service. That is rarely the case in a real-world scenario. Simply modify the config for each environment when necessary.

Setting up a custom domain

View existing domains

      heroku domains --remote production

Add domain or subdomain to the production app

      heroku domains:add --remote production example.subdomain.co

Configure your domain host's DNS to point to heroku

Supposing you want to point example.subdom.com to myapp.herokuapp.com, you'll need to add a CNAME record for example.subdom.com pointing to myapp.herokuapp.com, another one for www.example.subdom.com with the same target.

Login and Register via Oauth

The seed code implements Oauth for Instagram.

First, create a dev app on Instagram.

You will be supplied with a client id and secret. Add those to the remotes:

                    heroku config:set INSTAGRAM_CLIENT_ID="your_id" --remote staging
                    heroku config:set INSTAGRAM_CLIENT_SECRET="your_secret" --remote staging

                    heroku config:set INSTAGRAM_CLIENT_ID="your_id" --remote production
                    heroku config:set INSTAGRAM_CLIENT_SECRET="your_secret" --remote production

Also add the environment variables to ~/.bashrc (for Linux)

The seed uses the Instagram passport strategy