I've just installed and created app/styles/app.scss, but when I start with ember server the .css file is not created. Is there any other set up I need, other than npm install --save-dev ember-cli-sass?
I've also added this to my Brocfile.js, and run ember build:
Edit: I've also tried compiling manually by adding this to my Brocfile.js and running ember build:
var compileSass = require('broccoli-sass');
var app = new EmberApp();
var sassImportPaths = [
'app/styles'
];
var appCss = compileSass(sassImportPaths, './app/styles/app.scss', './assets/app.css');
You need to install with ember install ember-cli-sass and after rename app.css to app.scss in app/styles/and restart the server. Should work.
See if below will help you
var app = new EmberApp({
sassOptions: {
includePaths: [
'app/styles'
]
}
});
I was having the same problem.
I just ran npm install --save-dev ember-cli-sass again and it was all good. Everything should work out of the box if you install it and change app/styles/app.css to app/styles/app.scss.
Related
I'm trying to use Ember + Intel XDK.
I create a brand new Ember app:
ember new cash
Run ember server, and go to localhost:4200 - everything ok - Welcome to Ember page appears.
Then I open Intel XDK and import my Ember HTML project. I just import it, go back to console and run ember server again. Then I get:
cash git:(master) ✗ ember server
version: 2.3.0
Livereload server on http://localhost:49152
Serving on http://localhost:4200/
File: cash/bower_components/jquery/src/intro.js
cash/bower_components/jquery/src/intro.js: Unexpected token (45:0)
SyntaxError: cash/bower_components/jquery/src/intro.js: Unexpected token (45:0)
43 | // you try to trace through "use strict" call chains. (#13335)
44 | //"use strict";
> 45 |
| ^
at Parser.pp.raise (/Users/Antonio/Code/mbcash/cash/node_modules/ember-cli-babel/node_modules/broccoli-babel-transpiler/node_modules/babel-core/node_modules/babylon/lib/parser/location.js:24:13)
at Parser.pp.unexpected (/Users/Antonio/Code/mbcash/cash/node_modules/ember-cli-babel/node_modules/broccoli-babel-transpiler/node_modules/babel-core/node_modules/babylon/lib/parser/util.js:82:8)
at Parser.pp.parseExprAtom (/Users/Antonio/Code/mbcash/cash/node_modules/ember-cli-babel/node_modules/broccoli-babel-transpiler/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:425:12)
at Parser.pp.parseExprSubscripts (/Users/Antonio/Code/mbcash/cash/node_modules/ember-cli-babel/node_modules/broccoli-babel-transpiler/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:236:19)
at Parser.pp.parseMaybeUnary (/Users/Antonio/Code/mbcash/cash/node_modules/ember-cli-babel/node_modules/broccoli-babel-transpiler/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:217:19)
at Parser.pp.parseExprOps (/Users/Antonio/Code/mbcash/cash/node_modules/ember-cli-babel/node_modules/broccoli-babel-transpiler/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:163:19)
at Parser.pp.parseMaybeConditional (/Users/Antonio/Code/mbcash/cash/node_modules/ember-cli-babel/node_modules/broccoli-babel-transpiler/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:145:19)
at Parser.pp.parseMaybeAssign (/Users/Antonio/Code/mbcash/cash/node_modules/ember-cli-babel/node_modules/broccoli-babel-transpiler/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:112:19)
at Parser.pp.parseExpression (/Users/Antonio/Code/mbcash/cash/node_modules/ember-cli-babel/node_modules/broccoli-babel-transpiler/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:79:19)
at Parser.pp.parseStatement (/Users/Antonio/Code/mbcash/cash/node_modules/ember-cli-babel/node_modules/broccoli-babel-transpiler/node_modules/babel-core/node_modules/babylon/lib/parser/statement.js:137:23)
I'm using ember-cli 2.3.0, which leads me to:
DEBUG: -------------------------------
DEBUG: Ember : 2.3.1
DEBUG: Ember Data : 2.3.3
DEBUG: jQuery : 2.1.4
DEBUG: -------------------------------
I tried to use the following in ember-cli-build.js:
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
module.exports = function(defaults) {
var app = new EmberApp(defaults, {
babel: {
compact: false
}
});
return app.toTree();
};
but when I run ember server, I got these two lines:
version: 2.3.0
Livereload server on http://localhost:49152
Serving on http://localhost:4200/
and it stops there.
If I go to the browser and visit localhost:4200, nothing happens, and the browser status bar shows:
Waiting for localhost...
I think I'm trying something new, because I searched a lot, but didn't find discussions about Ember + Intel XDK.
If somebody can help me, thanks in advance.
Looks like Babel is compiling the bower_components directory which is not good. Maybe bower is configured to create a bower_components directory inside your project's app dir.
Check if you have a .bowerrc file in your home directory (or upwards the directory tree of your project location) that looks like this:
{
"directory": "app/bower_components"
}
If this is the case, delete the app/bower_components directory and create a local .bowerrc file in your project's directory.
Finally, run bower install if required.
Babel should not compile files inside bower_components the next time you run the server.
How do you need to work in an Ember addon, to include bower packages while installing the addon.
1) I installed the bower package I want to include in my addon with bower instal packagename --save
2) then in my addon, in the root, edited index.js, to look like this:
/* jshint node: true */
'use strict';
module.exports = {
name: 'my-ember-component',
included: function(app) {
this._super.included(app);
if(app.import){
app.import(app.bowerDirectory + '/path-to-package/package.js');
}
}
};
However, when I try to start my application where the addon is installed, I get a
ENOENT: no such file or directory, stat '/my-ember-application/tmp/source_map_concat-input_base_path-bWTPoVC9.tmp/0/bower_components/path-to-package/package.js
I want to avoid having to manually add the bower dependency to every application I install my addon in.
Note: I am using npm link to debug my addon, perhaps this could be a source of the problem?
Normally the addon's bower componenets are added to the consuming project during ember install addon.
But since you're doing local development and using npm link. You need to simulate this. You can do this with:
ember generate your-addon-name
Explanation.
Check out the docs on default blueprints in the ember cli docs.
A blueprint with the same name as the addon (unless explicitly
changed, see above) will be automatically run after install (in
development, it must be manually run after linking). This is where you
can tie your addon’s bower dependencies into the client app so that
they actually get installed.
In short, you need to create a default blueprint for your app and add the bower dependency there.
Create your file:
//blueprints/your-addon-name/index.js
module.exports = {
normalizeEntityName: function() {}, // no-op since we're just adding dependencies
afterInstall: function() {
return this.addBowerPackageToProject('BOWER PACKAGE NAME'); // is a promise
}
};
Then when you run the default blueprint with
ember generate your-addon-name
Is it possible to exclude jQuery dependency from vendor.js in ember-cli when building for production only? I want to include it separately in my site.
You can control which files will be used in development or production using a hash like configuration. In your case you should use:
var app = new EmberApp({
vendorFiles: {
'jquery.js': {
development: 'bower_components/jquery/dist/jquery.js',
production: false
}
}
});
Refer to Customizing a built-in asset section for further info.
At the end the only thing worked for me was this:
var app = new EmberApp({
vendorFiles: {
production: false,
development: 'bower_components/jquery/dist/jquery.js'
}
});
This will exclude it in production but not in development.
This is a rather simple matter, check the bower.json file in your directory and remove the jquery entry, or simply run bower uninstall jquery --save in the cli.
Oups missed the in production only, well you can save it as a dev-dependency that way it's not included in the build.
So remove jquery and then run bower install --save-dev jquery
After taking the following steps in the command line to install Ember CLI, Firebase, and EmberFire with node, I am getting an error saying that Firebase is not defined in app/adapter/application.js
npm install -g ember-cli
npm install -g bower
npm install -g phantomjs
ember new my-new-app
cd my-new-app
ember server
At this point I can see my ember app with the default output of “Welcome to Ember.js” at localhost:4200
npm install firebase
npm install —save ember-fire
ember generate adapter application
Then in app/adapter/application.js, removed “export default DS.RESTAdapter.extend({});” and pasted "export default DS.FirebaseAdapter.extend({
firebase: new Firebase('https://.firebaseio.com')
});” with my own firebase URL
ember server
Then I get an error in terminal:
Serving on http://0.0.0.0:4200
lionworxs/adapters/application.js: line 4, col 17, 'Firebase' is not defined.
1 error
===== 1 JSHint Error
Path or pattern "vendor/firebase/firebase.js" did not match any files
Error: Path or pattern "vendor/firebase/firebase.js" did not match any files
I have tried creating the firebase.js file in the directory specified above, but it leads to an entirely new string of errors so I thought that I missed a step in my installation. Do I need to manually include Firebase somewhere in my application even after "installing" it via command line?
Bower install Firebase and EmberFire.
bower install firebase --save
bower install emberfire --save
Be sure you've required the necessary script calls for Firebase and EmberFire in your index.html file:
<!-- Firebase -->
<script src="https://cdn.firebase.com/js/client/1.0.19/firebase.js"></script>
<!-- EmberFire -->
<script src="https://cdn.firebase.com/libs/emberfire/1.1.3/emberfire.min.js"></script>
In your adapter, try using window.Firebase:
import DS from 'ember-data';
export default DS.FirebaseAdapter.extend({
firebase: new window.Firebase('https://your-firebase-data-url.firebaseio.com/web/data')
});
Your question is similar to this one - Adding firebase & emberfire dependencies to an ember.js app (ember-cli) ...
And you might find the final comment there helpful - https://stackoverflow.com/a/24541248/409156
I had the same issue as user2817513. Copying this response from another thread because it was the only thing that worked for me:
Posted by tikotzky:
If anyone is still looking for this, I just created an ember-cli addon that include both firebase and emberfire into the app.
All you need to do is run npm install --save-dev ember-cli-emberfire from within your app and you should be good to go.
You can see the code here https://github.com/tikotzky/ember-cli-emberfire
I have a new ember-cli app and I'm trying to create a version of TodoMVC with ember-cli version 0.0.32.
In my models/todo.js file I have:
import DS from 'ember-data';
var Todo = DS.Model.extend({
title: DS.attr('string'),
isCompleted: DS.attr('boolean')
});
export default Todo;
but when I run ember server I get this error:
version: 0.0.32
Livereload server on port 35729
Serving on http://0.0.0.0:4200
ENOENT, no such file or directory '/<my_path>/tmp/tree_merger-tmp_dest_dir-OWIN6XGL.tmp/ember-data.js'
I've tried:
npm cache clear
npm install
bower install
But didn't seem to do anything.
I figured it out because this barely related question mentioned the 'brocfile.js' file and so I compared my 'brocfile.js' file with the 'brocfile.js' file in an example ember-cli TodoMVC app and noticed one small difference:
app.import({
development: 'vendor/ember-data/ember-data.js',
production: 'vendor/ember-data/ember-data.prod.js'
+}, {
+ 'ember-data': [
+ 'default'
+ ]
});
The +'s are the changes that need to be made to the 'brocfile.js' file in order to get ember-data to work.
Now run ember server and it should work.
Looks like that ember-cli TodoMVC app doesn't need those lines anymore, and the default ember-cli app doesn't have them either.
I had a similar error to yours, saying "no such file or directory: ....\ember-dat.js" and it turns out that I just hadn't done import DS from 'ember-data' in app/adapters/application.js.