# Redux Tutorial: Deploy to Heroku

Step 1: Prepare your app

Initialize a Git repo within the redux-todolist directory:

$ git init
$ git add .
$ git commit -m 'first commit'

Then, create a new Heroku app (we are assuming you have Heroku toolbelt already installed on your machine)

$ heroku create

Your output should look something like this:

Creating app... done, ⬢ <HEROKUAPP>
https://<HEROKUAPP>.herokuapp.com/ | https://git.heroku.com/<HEROKUAPP>;.git

Now, push to Heroku like so:

$ git push heroku master

Once you have pushed the app, open your redux-todolist/graphql.json file and change the "production" endpoint to the newly created app (don't forget to append a /graphql to the URI). Here is how it looks like after the changes:

{
  "development": {
    "endpoint": "http://localhost:8080/graphql"
  },
  "production": {
    "endpoint": "https://<HEROKUAPP>.herokuapp.com/graphql"
  }
}

Then, install the Heroku mLab addon like so:

$ heroku addons:create mongolab

After installing the mLab addon, modify redux-todolist/data/database.js Line 3 and provide the MongoDB URI that will be made available in the Heroku environment (we also need to set the authMechanism to ScramSHA1 so it works with Mongo 3.x):


let MONGODB_URI = 'reduxtest';

if (process.env.MONGODB_URI) MONGODB_URI = process.env.MONGODB_URI;

const db = pmongo(MONGODB_URI, {
  authMechanism: 'ScramSHA1'
}, ['todos']);

Before deploying, run the following command to generate a production build:

$ npm run build:prod -s

Once the production build completes, commit the changes to git like so:

$ git add .
$ git commit -m 'changes'

Push the changes to Heroku again:

$ git push heroku master

Load sample data to mLab database from your Heroku dyno like so:

$ heroku run npm run load-sample

Finally, run the following command to open the newly created app in your browser:

$ heroku open