Deploying Ember CLI app to Heroku

Super-easy deploying is what I’m used to with Heroku and my small prototype apps. However, now when I now started to use Ember CLI, deploying wasn’t that easy because the instructions Google found me weren’t that clear. So I decided to write my own contribution.

1) Install Ember CLI, generate your app with eg. "ember new brand-new-app"

 

2) Add a file called Procfile to the app folder root and add there one line:

 
web: npm run start

 

3) Edit Package.json and find "scripts": { ... } block.

Add the Heroku’s port constant to the start script and also add a new “postinstall” attribute to run bower during the deployment.

  "scripts": {
    "start": "ember serve --port=${PORT}",
    "build": "ember build",
    "test": "ember test",
    "postinstall": "bower install"
  },

 

4) Continue editing Package.json and find the "devDependencies": { ... } block.

Add bower to your dependencies (eg. "bower": "1.3.12",)

Rename the block from “devDependencies” to “dependencies” to change them as dependencies you want to use while deploying.

However, you still have to have the <code>ember-cli</code> package in your devDependencies because that’s how ember detects that the app is an Ember CLI. Otherwise you’ll be told that “You have to be inside an ember-cli project in order to use the serve command”.

In the end the “devDependencies” and “dependencies” blocks look something like this:

"dependencies": {
  "bower": "1.3.12",
  "broccoli-asset-rev": "^2.0.0",
  "broccoli-ember-hbs-template-compiler": "^1.6.1",
  "connect-restreamer": "^1.0.1",
  "ember-cli": "0.1.15",
  "ember-cli-6to5": "^3.0.0",
  ...
},
"devDependencies": {
  "ember-cli": "0.1.15"
}

 

5) Commit your changes, create a Heroku app and let Heroku do the rest!
git add -A .
git commit -a -m "Heroku settings"
heroku create
git push heroku master
heroku open


Congrats, now you have your app running also on Heroku!

Thanks to Brendan Graetz for the best advice I found, this is basicly just me reformatting his blog. And of course Heroku’s Node.js docs helped too. I was using Ember CLI version 0.1.15.

Going from one end to another

I’m good at starting something from scratch. Define the concept, make a detailed execution plan, create tons of tasks and make an estimate how long it will take to make all that happen.

I’m also efficient and systematic of completing the pre-defined tasks one-by-one. Just type on the code, test & fix and finish with a commit. And of course check how much time it took.

But then comes the part when the application and functionality is pretty much there and kind of already works if you are careful enough. The most interesting tasks are done but there’s still lots to do to achieve the finish line.

Then the problems arise. I start making excuses, dropping features and lowering the bar. “Do I really really have to waste my time with the rest of the tasks? I’m sure there’s something more important to do out there, in some other project maybe…”
That’s also the point when you have to face your bad architectural and design decisions from the beginning of the project. Accept that you weren’t as good as you thought…

I have to learn to keep on working until I can say that this is complete and I can’t come up with any flaws that I knew how to fix.

Not just prototype but make production quality applications!

 

3-hour TicTacToe

Today I build a TicTacToe web version for about 3-4 hours from scratch. I got this far => latest commit on my GitHub

I had thought about it earlier a bit so it was a little easier. Anyway I made a huge progress compared to that text-based terminal version. Not only on the UI side but also in the game engine. I got much further and with much more elegant code.

It’s not ready yet, I made a seven bullet point list about things to improve:
# 1. Doesn’t take diagonals from right to left when checking the winner
# 2. Player can replace the computers button => should be error
# 3. Board CSS (square size, font size & shadow) should follow the board width / height arguments
# 4. Board could be responsive and will fit to screen size
# 5. Computer could be more intelligent, not just random
# 6. There could be UI for board size & signs & in_a_row => preferences
# 7. 2 player mode? => on a tablet?

I think I will complete some of those tasks still in the future and then deploy it to Heroku so everybody can check it out.

——

I need this kind of practice to build my confidence and skills to build something from end-to-end (as our Tealeaf instructor Chris says). It starts with these and in the future it hopefully be something more impressive.

But this was fun and I was really impressed that I can already build something like this from scratch in few hours. It really motivates to continue and learn new skills.