Writing an ember-cli addon in Coffeescript - ember.js

I'm trying to author an ember-cli addon, and I prefer to develop in Coffeescript. But it seems like the CLI build is hardcoded to look for just .js files. Is there any way to author an addon in Coffeescript and have the build take place with the consuming application's build (i.e. without me having to build the addon each time using a custom build process).

Yes, you can author in Coffeescript, but there was a bug in 0.0.46 where we would only preprocess *.js files in the addon tree. This is fixed on master, and should be included in 0.0.47 soonish...

So turns out this is a bug in the CLI, but it wasn't fixed in 0.0.47. See https://github.com/stefanpenner/ember-cli/issues/2354 for more context, it's currently an open issue & PR.

Related

A guideline to building angular apps based on npm and typescript

with the release of angular2 I actually encountered typescript, npm, ... for the first time, and I really appreciate its power, so I barely grasp the surface.
In the "development mode" I can find my way, but in the end:
Question:
I want to generate an independent folder that includes all necessary dependencies: js, css, html-files and is portable without needing npm, transpilers,... anymore. (So basically I want to copy this generated folder to a server and people can access the index.html as usually)
Problem
Setup
npm (as a module manager and build tool) npm as a build tool, npm as a build tool II
typescript (tsc as transpiler)
angular2 (with separated files for html, css), SystemJS
Needed Guideline
An (abstract) guideline for what steps to take in order to achieve the prescribed goal, namely a folder that has (all) the features and is build from the typescript files, (probably .scss-files,...) in a separate and self-contained way.
Probably I am searching for the wrong keywords but I have only found some fractions of my answers so far and I would really appreciate a list (of tutorials, or so) that I can stepwise go through. (Currently I feel lost)
I would have a look at the systemjs builder, using a build process such as gulp, gulp-inject to configure the index.html, and consitute the build like this:
build typescript files
bundle js files using systemjs in the build folder
build scss files (there must be a plugin for gulp) in the build folder
copy all html files in the build folder
inject dependencies in index.html
This is a raw answer to your question, untested, and from the top of my head, but I hope it can lead you to a solution. I have a little something in this repository.

Automatically reference bower package in ember-cli-build.js

When you add a library using bower, that is not an ember addon, you have to manually add it to the ember-cli-build.js using app.import. For eg. if I add a typical js library I have to add both the css and js files like:
app.import('../path_to/library.min.js');
app.import('../path_to/library.min.css');
Question: Is there any way to automate this process? With all these nice utilities we have for front-end development, there must surely be?
I don't know any way of automating these processes.

Ember-cli creating more than 30000 files

I'm new to ember and after following a few guides, I've been playing around with ember apps. I'm using ember-cli to create an app, so I use
$ ember new 'app-name'
which creates the app as expected with the 'app' and 'dist' folder. But it also creates a lot of other files. I only discovered this while deleting the folder when the windows delete dialog box showed deleting more than 30000 files.
Is it that I'm doing something wrong that's causing unnecessary files to be created? Is there a way to avoid this?
You aren't doing anything wrong, a big portion of it is the dependencies and then the build process keeps a lot of temporary files around for reuse.
By the way, if you are developing in Windows, make sure you are running your command prompt as administrator, and that you've excluded the ember app from the virus scan, it really improves the build times.
It's not an issue with ember-cli itself, but how npm handles dependencies, since it has a hierarchical dependency system. You could try npm 3 (be warned, it's still beta - changelog), which tries to flatten out the dependencies better.
Another thing is checking if bower packages are adding any unneeded dependencies, like tests or raw source files (if they have pre built files). You could submit a PR to those projects by adding the ignore property in the bower.json file. See the spec here. Same with npm packages, which has a .npmignore file.
This is probably not what you wanted to hear, but in open source, we must all help each other. These are the bread crumbs of open source, and a great place to get started.

Using latest Ember.js (1.0.0-PRE.3) with yeoman

The ember.js team just released the new version of the ember framework version 1.0.0-pre.3 this version includes the new "router" API that I'm very eager to use.
I'm about to start a new app and yeoman is in my workflow to help, but the yeoman ember-generator uses the 1.0.0-pre.2 version (wich has the deprecated router API implementation) for the generation of the projects boilerplates, but I would like to use the new version 1.0.0-pre.3 in my new project, and the easy way to do it is very hacky, it would be to change the ember.js lib directly in the yeoman templates directories and update the version number in the corresponding generator script that uses it, I've already made a test changing it this way and it would work, but this way I would "break" my yeoman installation, this is not a good option I think.
So my final master question is, how would I go about to update yeoman to use the new ember lib without hacking? Or should I maybe make a fork of the project https://github.com/yeoman/yeoman create a new branch for a new ember-generator (using the latest ember lib obviously) and make a pull request hoping to get accepted? Can someone "yeoman savvy" point me in the right direction here? I just want to make it the right way... if there is one :)
Thanks in advance!
Just manually update the ember lib in your project.
Yeoman 1.0 will have support for updating libs transparently.

How to add Ember-Bootstrap to an EmberJS project created via Yeoman

I've started working on an EmberJS application and used Yeoman to generate the skeleton structure. Now, I'd like to add Ember-Bootstrap to my project but am having trouble doing so. I downloaded the latest version from GitHub and unzipped it but I'm not sure what to include.
I see several .js files in the packages/ember-bootstrap/lib folder. Do I need to include all of these? If so, then in which order should I include them?
Someone mentioned in another answer that you needed to add it to the "assets" folder but I don't have one of these.
Does installing Ember-Bootstrap require having a Rails project? I'm not familiar with Rails so please forgive for the newbie questions.
Thanks.
I found a great project that supports Bootstrap 3.0 with many components,
you can find it here:
https://github.com/ember-addons/bootstrap-for-ember
you can see all components alive:
http://ember-addons.github.io/bootstrap-for-ember
GoodLuck.