After 5 days invested in learning Ember, I am having trouble with Ember CLI

1

I spent the last five days learning Ember (I read the ENTIRE documentation) and I am now ready to develop my app. I actually enjoyed reading the docs and love the Ember architecture and the forthcoming plans. I know JavaScript well and I have actually used Ember about three years ago to develop an application, which I developed considerably quicker than an identical app I developed in Backbone.js. So I am not entirely new to Ember, but I have forgotten nearly everything I learned about Ember three years ago.

Yesterday, as I was about to develop my app, I discovered that I have to learn Ember CLI, too. I thought to myself this should be no biggie. So I head over to the Ember CLI docs. I was disappointed and frustrated with the Ember CLI documentation. I found it quite weak, in need of some carbs and proteins, no doubt one of the most malnourished documentations I have seen.

Incidentally, I know many people complain about the Ember docs, but in my view, it is among the best documentations around, well written and well organized.

Suffice to say, I can’t start to build my Ember app because of errors and frustration with Ember CLI and Ember. Specially, there is no easy or straightforward way to get started with Ember CLI and HTMLBars and Ember 1.10 beta, or even Canary. I tried all the instructions and I keep getting one error after another.

I need a bit of help with this. I have not asked for help on a forum in over six years, mostly because I always find what I am looking for somewhere online. This new version of Ember with Ember CLI has humbled me; It kicked my butt, after dozens of hours trying to simply get the basic setup configured. This is one area where Meteor shines: you can install Meteor and start coding your Meteor app in mere seconds. I have used two days trying to get my Ember app set up before I can actually start writing code, and I am still stuck. I must admit that I do see the value in using Ember CLI, which I have no choice but to learn somehow.

Unfortunately, I can’t give up now. I have invested too much time learning Ember, and I am very short on time to complete my project. So I am not going to Meteor or Backbone or React, three technologies I am very familiar with. I am determined to use Ember on this particular project.

Here is what I have done to get just a basic Ember CLI/Ember Canary app running (I actually prefer to use Ember 1.10 beta 11):

  1. ember init (inside directory)

  2. bower install --save handlebars#~2.0.0

  3. bower install --save ember#canary

  4. bower install

  5. npm uninstall --save-dev broccoli-ember-hbs-template-compiler (this was unnecessary for me, btw)

  6. npm install --save-dev ember-cli-htmlbars

  7. npm install

  8. I added this bit to the config file:

    EmberENV: { FEATURES: { ‘ember-htmlbars’: true } },

  9. ember server

Frustrating Error in Console (app can’t load): “Uncaught TypeError: Cannot read property ‘pathname’ of undefined”

Installation errors during the steps above, though they appear to be inconsequential: “invalid watchman found, version: [2.9.8] did not satisfy [^3.0.0], falling back to NodeWatcher”

npm WARN unmet dependency /Todos_CLI/node_modules/ember-cli-esnext/node_modules/broccoli-esnext/node_modules/esnext/node_modules/regenerator/node_modules/commoner requires glob@‘~4.2.1’ but will load npm WARN unmet dependency /Todos_CLI/node_modules/glob, npm WARN unmet dependency which is version 4.3.1

I just simply want to use the latest version of Ember with HTMLBars to build my app. Can someone help?

2

People are apparently having success with this solution, maybe that’d help you. But you could just wait for 1.10 to be out of beta. Whether HTMLBars is enabled shouldn’t affect the code you write, just performance. Get started, and once 1.10 is released, things should be ironed out.

As for ember-cli, it does say

Although potentially exciting, this is still really a WIP, use at your own risk.

3

Thanks for the quick reply, Backspace. That page doesn’t help with the errors I outlined in my post above. I forgot to mention that I added this bit:

 EmberENV: {
  FEATURES: {
    'ember-htmlbars': true
  }
},
4

Yeah, I can’t get a fresh ember-cli working with the Canary build, either. Are there features in Canary that you’re just dying to use? Canary is unstable by design, I’m not surprised it’s not working smoothly.

If you’re desperate for HTMLBars, why not just use the beta? I just set up a fresh beta ember-cli application with HTMLBars and it worked.

5

As much as I can understand the desire you have to use HTMLBars, I would strongly suggest that you use the stable release of Ember. Using Canary is very much experimental and would not be something to recommend on a time critical project.

As for Ember CLI, the learning curve is indeed steep, but the benefits are huge. With any rapidly evolving project there is an element of risk, but the depth of thought the core team put into things is a great productivity booster over time.

As for starting a new project, I’m not sure what ember init buys you over ember new

6

It’s certainly ambitious to jump into canary + htmlbars. But granted you’ll be on your own in terms of support and subtle documentation differences, I suggest sticking with stable, especially as you’re new to Ember.

Porting your application, once they officially, land should be a breeze.

7

I resolved the issue by deleting my node_modules and bower_components directories and adding them back with NPM install and bower install.

Thanks to everyone who responded.

8

Here are the steps to get Ember CLI working with the latest beta release of Ember (1.10.0-beta.x)

  1. ember new yourProjectName

  2. bower install --save handlebars#~2.0.0

  3. bower install --save ember#1.10.0-beta.1

  4. npm uninstall --save-dev broccoli-ember-hbs-template-compiler

  5. npm install --save-dev ember-cli-htmlbars

  6. Now, you have to remove the node_modules and bower folders

  7. bower install

  8. npm install

  9. In the /config/environment.js file, add this: FEATURES: { 'ember-htmlbars': true }

  10. ember server

That last line will of course launch the server. It should work. After many trials and errors and following more than a couple of instructions, I have found the noted set of instructions to be the most reliable and consistent way to set up Ember CLI and the latest Ember beta release.

5 Likes
9

If you’re just starting, you are likely to be a lot better off with a stable version so you don’t run into bugs and make your learning curve worse.

10

Man, I don’t know, but… Starting to work with a new framework and picking the beta or canary version of it and then expecting everything to work smoothly and crying for help if it doesn’t is just ridiculous… sorry.

Use the latest stable releases, which the manuals are published for and follow the instructions of the ember cli setup (there is no need to invent your own), you won’t have any trouble if you start with a new app from the beginning! (migrating an existing app is a different issue)

Anything you publish here about setting up ember and ember cli will be outdated sooner than later and will only encourage other novice ember developers to follow this example of starting off with a framework wrong.

I also never understood this reading-all-of-the-documentation-first approach or the trying to read-through-internal-framework-code-to-understand-how-things-work method. So many people seem to do that.

If it’s not in the API documentation, don’t do it (a very few exceptions exist, they are covered by all the blogs around ember you can follow)

11

I do understand that using a beta release version of Ember is not the ideal way to get started with Ember. I don’t have choice, really. I chose Ember because I am using Polymer components, and Ember is the best full front-end framework to use along with web components like the Polymer components. Only the beta versions of Ember support some of the features I need.