Today we will be looking at ways that we can deploy your Ember application to Heroku. In my last article we went over how to build our project. If you're not familiar with building your Ember.js project I would start here first.
What is Heroku? Heroku is a platform as a service (PaaS) cloud provider with support for several programming languages. What that means is that as developers we don't have to know anything about setting up servers, configuring Apache, Nginx, or anything like that. We just create the code, and upload it. In fact if you are already familiar with Git this will be even easier since you can push your code to Heroku just as easily as if you were pushing to your own server.
First thing to do is to sign up for a free account at Heroku. The free tier, as of this writing, provides 1X 512MB RAM, 1x CPU Share machine. It's enough to get started.
Next we'll need to download and install the heroku toolbelt. Simply download the version for your OS and it should install all the command line tools you need. Instructions are on the website.
We'll assume you are using Ember CLI and have already created your project and are ready to go. I've found the easiest way to deploy to Heroku is to use Tony Coconate's Ember CLI Heroku Buildpack.
Before we do anything we need to create a new Heroku instance. We could create it using the GUI, however for everything to work we'll need to create it using the command line.
//not in project directory $ heroku create --buildpack https://github.com/tonycoco/heroku-buildpack-ember-cli.git
This will use Tony's buildpack which is a custom made one for Ember CLI applications. Essentially it provides everything we need to get started. After this is done you'll see a URL generated on the command line.
//output //Creating shielded-sands-1402... done, stack is cedar-14 //Buildpack set. Next release on shielded-sands-1402 will use //https://github.com/tonycoco/heroku-buildpack-ember-cli.git. //https://shielded-sands-1402.herokuapp.com/ | https://git.heroku.com/shielded-sands-1402.git
Now we need to setup our project to push to shielded-sands-1402.herokuapp.com the instance we just created with our custom buildpack (If you don't like the name you can change it via the GUI inside the Heroku dashboard) We'll assume that you already have git installed. We'll go ahead and setup git in your project folder.
$ cd <project directory> $ git init $ git add . $ git commit -m "my first commit"
All your files should be committed now. For the next part we'll have to add the remote instance to git.
$ heroku git:remote -a shielded-sands-1402
If all went well all we need to do now is push to Heroku.
git push heroku master
During this process it might ask you for your login credentials. This is normal, it should only ask you once. The actual deploying of your application can take a minute or two. The Ember CLI buildpack caches your NPM and Bower dependencies by default, which should make things faster. However if you need to change cache settings check out the cache article on the Heroku's site.
Hooray! Everything seem to worked and the deploy is completed.
//remote: -----> Launching... done, v3 //remote: https://shielded-sands-1402.herokuapp.com/ deployed to Heroku //remote:
At this point anytime you need to make any changes to your application you can follow the normal procedure of committing via git and pushing it to Heroku just as we did before.
If you want to set your environment to production use this flag.
$ heroku config:set EMBER_ENV=production
You can set the number of Nginx Workers with this command. This can be useful depending on how many dynos your using. The default is 4.
$ heroku config:set NGINX_WORKERS=4
You can set an API proxy URL.
$ heroku config:set API_URL=http://api.example.com/
You can find some more handy tips at the Ember CLI Heroku buildpack Github page.
So there you have it. It was fairly painless to get started with Heroku. Of course I can imagine as your application scales and it needs to talk to a database and do more complicated things Heroku may or may not work for you. Perhaps in the future we'll try out some more advanced features.
Next up we'll be exploring other ways to deploy your Ember application.
Questions leave a comment below!
Image Credit Heroku