Lesson 18

Deploying to Heroku

3

Congratulations! You've reached the final stage of developing your Ember app: it's time to deploy it to a server so that everyone can start using it!


There are many ways that you can deploy your application. In this chapter we're going to use Heroku.

Set up Heroku

The first thing you need to do, if you haven't yet, is create a Heroku account (don't worry, it's free)!



Next, you need to install the Heroku Toolbelt on your computer. Just follow the instructions on the page and log in with your credentials in their command line tool.


Now, make sure that you're in the Chirper Ember folder and run this command to create your Heroku app using the Ember Heroku Buildpack (the namespace my-chirper-app needs to be unique, so you're going to have to come up with your own name):

You can deploy to Heroku using simple Git commands, which is awesome. If you haven't commited anything in your project yet, we'll do it now:

And finally, we push the application to the Heroku server:

This might take a few minutes, so just sit tight and let the buildpack do it's thing. The first deploy is always a little extra long since Heroku will cache the node_modules directory in order to speed up future builds.


What you should see once the deploy is done!


When it's done, visit http://{your-app-namespace}.herokuapp.com (in my case, it will be my-chirper-app.herokuapp.com) and you should see your web app, live!


Wohoo!



If you log in to Heroku.com, you can find more info about your app (by the way, Heroku's dashboard is built in Ember!)


Deploying the API

There's an important piece still missing, namely the API! If you try to log in or sign up, you'll notice that nothing happens, so let's deploy our November app as well!


We'll start by going back to our November directory in the terminal, and create a Heroku app for it (remember, choose a unique namespace):

Next, we commit and deploy a first version of the app:

When it's done, you can check out your app in the browser by running heroku open.


There's our API!


Right now, our live API isn't linked to any production database though.


Heroku uses PostgreSQL as their default database, which Sequelize (and therefore November) supports out of the box. This allows us to use a PostgreSQL database in production while still using MySQL when we develop locally. Sweet!


Let's add a database to our app by going back to the Heroku Dashboard:


In the dashboard, click on "my-chirper-api"



In the Add-ons section, click on the "+"-button. Search for "postgres" and you should find the "Heroku Postgres" add-on. Click on it, then click "Save".



After that, navigate to the "Settings" tab and click on "Reveal Config Vars"



Copy the DATABASE_URL field that Heroku has added, and also make sure that you add a key called "NODE_ENV" with the value "production" (so that November knows which database setting to use)


Before we redeploy, we need to specify the allow_origin in November's config-file (under the production key), so that our Ember app can make AJAX requests to our API in production:

config/config.json

Alright, let's redeploy this!

After it's done, visit https://{your-api-namespace}.herokuapp.com/users and if you see an empty array, that means that the database tables were created successfully!



Fixing the Ember app

Finally, we need to set some environment variables for the API URL in our Ember app as well, so that it connects to the Heroku URL instead of localhost:9000 when we ship it.

config/environment.js

Commit and redeploy your Ember app:


When that is done, both your Ember app and your API should be fully working!


That's it! Now your app is deployed with a working API and you can take some time off to CELEBRATE!


Congratulations!


Comments

Kirk Israel

Help! I'm getting <p class="p1">


$ git add .


</p> <p class="p1">fatal: Not a git repository (or any of the parent directories): .git


even though I ran the heroku create </p>

profile/avatar/default
Gwynneth Davidoff

I also recommend the following if you see a fatal error about "'heroku' does not appear to be a git repository. Could not read from remote repository." - http://stackoverflow.com/questions/18406721/heroku-does-not-appear-to-be-a-git-repository

Kirk Israel

Judging from http://stackoverflow.com/questions/3755529/git-remote-doesnt-seem-to-be-working-at-all I think you need a "git init" in there -- perhaps thats covered by the buildpack in the ember heroku push ?

Kirk Israel

Also I needed this info: http://stackoverflow.com/questions/17626944/heroku-permission-denied-publickey-fatal-could-not-read-from-remote-reposito

Kirk Israel

it's asking for "your development language"... I'm assuming node.js ...

Kirk Israel

<p class="p1">I get a "Pruning cached bower dependencies not specified in bower.json</p><p class="p1"> </p><p class="p1">remote: /tmp/buildpack_4c55cd9f699a46737891123cabec629c/bin/compile: line 186: bower: command not found"</p>

Kirk Israel

Fix seems to be "heroku config:set REBUILD_ALL=true" at https://github.com/tonycoco/heroku-buildpack-ember-cli/issues/103 - man there's a lot that go wrong :-(

Kirk Israel

it's now called "Provision" not "save"

Kirk Israel

It could be worth pointing out this is one line of command... also, reassuring people that "we'll use tonycoco's buildpack" so the novice doesn't try and replace anything in the url for that

Robert Boone

I got an error because of the / at the end of the allow_origin url. Removing the slash made it work as expected.

Alid Lorenzo Castano

Why did you decide to use MySQL for development, rather than PostgreSQL for both?

Tristan Edwards

@alidlorenzocastano: No particular reason actually. Usually I find MySQL has more tools available to the developer (apps like Sequel Pro for Mac are great for example)! And since November is database-agnostic, I thought &quot;why not&quot;. I prefer Postgres though. :)