In my app I'm adding EmberJS to a page where jQuery is already loaded. So I don't need the ember-cli to include jQuery.
The ember-cli build step has the addition of jQuery hardcoded, but you can override it via configuration. I'm not sure if this is documented, but you can check node_modules/ember-cli/lib/broccoli/ember-app.js
this.vendorFiles = merge(options.vendorFiles, {
'loader.js': this.bowerDirectory + '/loader/loader.js',
'jquery.js': this.bowerDirectory + '/jquery/dist/jquery.js',
'handlebars.js': {
development: this.bowerDirectory + '/handlebars/handlebars.js',
production: this.bowerDirectory + '/handlebars/handlebars.runtime.js'
} /* etc, etc, */
}
options is the hash that is passed to a new instance of EmberApp in your Brocfile.js
Instead of,
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
var app = new EmberApp({});
Pass the location of a stub file (use the vendor/ dir for this),
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
var app = new EmberApp({
vendorFiles : {
'jquery.js': 'vendor/stub.js'
}
});
This stub will take priority over the hard-coded jQuery path. Just make sure you load in jQuery before your ember app is loaded.
Related
Is there a way to use the User(model) methods like (login & logout) in our code? Like in my case I want to use the User.login(....) method in the middle-ware that is defined in the route phase of middle-ware.
I tried to import the User model in this way in the middle-ware file.
var loopback = require('loopback');
var boot = require('loopback-boot');
var app = module.exports = loopback();
var User = app.models.user;
It gives me the error that "app is undefined".
Kindly let me know is there a way to use the login etc methods in my middle-ware.
Thank you
'use strict';
var mysql = require('mysql')
var loopback = require('loopback');
var boot = require('loopback-boot');
var app = module.exports = loopback();
app.start = function() {
// start the web server
return app.listen(function() {
app.emit('started');
var baseUrl = app.get('url').replace(/\/$/, '');
console.log('Web server listening at: %s', baseUrl);
if (app.get('loopback-component-explorer')) {
var explorerPath = app.get('loopback-component-explorer').mountPath;
console.log('Browse your REST API at %s%s', baseUrl, explorerPath);
}
});
};
// Bootstrap the application, configure models, datasources and middleware.
// Sub-apps like REST API are mounted via boot scripts.
boot(app, __dirname, function(err) {
if (err) throw err;
// start the server if $ node server.js
if (require.main === module)
app.start();
});
You need to bootstrap the application in advance before using the models
var loopback = require('loopback');
var boot = require('loopback-boot');
var app = module.exports = loopback();
boot(app, __dirname, function(err) {
// You can start your application here
app.start();
// Models have been loaded to app object after boot(). You can use it here if you want
var User = app.models.user;
});
From their official document
The LoopBack bootstrapper, loopback-boot, performs application
initialization (also called bootstrapping). When an application
starts, the bootstrapper:
Configures data sources.
Defines custom models Configures models and attaches models to data-sources.
Configures application settings
Runs boot scripts in the /server/boot directory.
You may want to look at their sample server.js for better reference
I'm using ember-bootstrap add-on which is working fine but I would like to use the Cerulean theme from https://bootswatch.com/cerulean/. If I just overwrite the .CSS files in bower_components/bootstrap/dist/css then I expect they will be overwritten the next time I do a bower install or upgrade ember. How do I get around that please?
First of all you need to manually install bootstrap:
$ bower install bootstrap --save
Then edit ember-cli-build.js so it looks like that:
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
module.exports = function(defaults) {
var app = new EmberApp(defaults, {
// If you do not use ember-bootstrap - then you can omit these lines
'ember-bootstrap': {
'importBootstrapCSS': false
}
});
app.import(app.bowerDirectory + '/bootstrap/dist/css/bootstrap.css');
app.import(app.bowerDirectory + '/bootstrap/dist/js/bootstrap.js');
app.import(app.bowerDirectory + '/bootstrap/dist/fonts/glyphicons-halflings-regular.woff', {
destDir: 'fonts'
});
return app.toTree();
};
Now you have fully working bootstrap. To add Celurian theme copy its bootstrap.css to vendor/ directory.
Then remove original bootstrap.css from ember-cli-build.js and add theme css:
module.exports = function(defaults) {
var app = new EmberApp(defaults, {
// If you do not use ember-bootstrap - then you can omit these lines
'ember-bootstrap': {
'importBootstrapCSS': false
}
});
//app.import(app.bowerDirectory + /bootstrap/dist/css/bootstrap.css');
// The name does not matter, default bootstrap.css will work as well
app.import('vendor/celurian.css');
app.import(app.bowerDirectory + '/bootstrap/dist/js/bootstrap.js');
app.import(app.bowerDirectory + '/bootstrap/dist/fonts/glyphicons- halflings-regular.woff', {
destDir: 'fonts'
});
return app.toTree();
};
So, in essence, you need to add required files to vendor directory and import them in ember-cli-build.js.
The other way would be to use SASS and just import required files from app.scss.
I have an ember-cli based app which needs to be integrated into an existing java/JSP app. For this to happen I need to generate a JSP file with js/css fingerprinted URLs which are generated by ember-cli/broccoli-asset-rev.
This is working fine for a html file and I can set it use a JSP file by changing my Brocfile.js to include:
var app = new EmberApp({
outputPaths: {
app : {
html: 'index.jsp'
}
}
});
but this prevents ember serve working as it uses the index.jsp as the html file. Is it possible to have both generated?
After trying many things I have come up with two solutions, both have drawbacks. The first is to use make a new broccoli tree and merge it with he app tree then explicity run broccoli-asset-rev on the resulting tree. The downside of this is that the mustache does not get hydrated, this is useful for outputting config. This would look something like:
//Brocfile.js
var mergeTrees = require('broccoli-merge-trees');
var funnel = require('broccoli-funnel');
var assetRev = require('broccoli-asset-rev');
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
var jspTree;
var app = new EmberApp({
fingerprint: {
enabled: false
},
storeConfigInMeta: false
});
jspTree = funnel('app', {
files: ['index.jsp']
});
module.exports = assetRev(mergeTrees([appTree = app.toTree(), jspTree]), {
extensions: ['js', 'css'],
replaceExtensions: ['jsp', 'html']
});
The other solution is the override a private api method in ember-cli which builds the tree for the index. This solution does let the mustache get hydrated but relies on a private method. You can find details here and here
How about adding symbolic link?
ln -s index.jsp index.html
Depending on what build tool you're using in your project, I'd probably recommend something like the following:
Put some placeholder sections in your index.html.
Copy index.jsp to index.jsp.tmp.
Copy in code from index.jsp into your placeholder sections.
Move index.jsp.tmp back to index.jsp and clean up.
You might consider something like gulp-replace to do the work.
Ember-cli: 0.33
How can I use web workers within an ember-cli based project?
Example - I have a component and I want to start a web worker:
import Ember from 'ember';
export default Ember.Component.extend({
_startWorker: function() {
var worker = new Worker('path/to/worker.js');
}.on('didInsertElement')
});
In which folder should I put the worker.js file inside the ember-cli project structure?
Which other changes are required (Brocfile.js,...)?
One possible solution:
1) In your ember project root folder add a new folder with the name 'workers'.
2) Update your Brocfile.js (see Screenshot)
3) Write workers :-)
relevant code from #Steven's solution for easy copying:
/* global require, module, process */
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
var pickFiles = require('broccoli-static-compiler');
var app = new EmberApp();
var workers = pickFiles('workers', {
srcDir: '/',
files: ['*.js'],
destDir: '/assets/workers'
});
if (process.env.EMBER_ENV === 'production') {
workers = require('broccoli-uglify-js')(workers, {
mangle: true,
compress: true
});
}
module.exports = app.toTree(workers);
If that helps someone, I managed to start using using workers with the config below, using ember-cli >= 2.4.2 to be able to use outputFile:
//ember-cli-build.js
..
//don't prepend CDN to worker paths (or CORS issue)
fingerprint: {
exclude: ['worker'],
..
}
..
var app = new EmberApp(defaults, {
..
app.import('vendor/localforage.js');//use localforage outside of workers
app.import('vendor/localforage.js',outputFile:'assets/workers/localforage.js'});//use localforage inside of workers
app.import('vendor/worker_localforage.js',outputFile:'assets/workers/worker_localforage.js'});
app.import('vendor/worker_test_indexeddb.js',outputFile:'assets/workers/worker_test_indexeddb.js'});
});
Then the workers code:
//vendor/worker_localforage.js
importScripts('localforage.js');
self.onmessage = function(e) {
var namespace=e.data.namespace;
var msg=e.data.msg;
var data=e.data.data;
//console.log("msg to worker",namespace,msg);
if (msg==="load") {
localforage.getItem(namespace).then(function(res){
self.postMessage({msg:"load",data:res});
});
}
else if (msg==="persist") {
localforage.setItem(namespace,data).then(function(res){
self.postMessage({msg:"persist",data:res});
});
}
};
Calling the workers from anywhere in your app:
self.worker=new Worker("assets/workers/worker_localforage.js");
var worker=self.worker;
prom2= new Ember.RSVP.Promise(function(resolve,reject){
worker.onmessage=function(e){
if (e.data.msg==="load") {
resolve(e.data.data);
}
}
});
worker.postMessage({namespace:self.adapterNamespace(),msg:"load"});
In an Ember-CLI project, if I add a directory containing webfonts and their CSS stylesheets to the public/assets directory, I can use them with something like #import 'assets/font/regular/stylesheet.css. This works fine.
Ideally though, I'd like to keep these assets out my git repository, and instead bower install them as client-side dependencies, but how can these assets be used in the Ember-CLI build?
The documentation mentions app.import(FILE) in Brocfile.js, which works for CSS stylesheets, but not for a WOFF font file:
$ ember build
version: 0.0.28
Build failed.
Error: Path or pattern "nicefont.woff" did not match any files
at Object.multiGlob (/(PATH)/node_modules/ember-cli/node_modules/broccoli-static-compiler/node_modules/broccoli-kitchen-sink-helpers/index.js:216:13)
at /(PATH)/demo/node_modules/ember-cli/node_modules/broccoli-static-compiler/index.js:25:27
at invokeCallback (/(PATH)/node_modules/ember-cli/node_modules/rsvp/dist/commonjs/rsvp/promise.js:228:21)
at publish (/(PATH)/node_modules/ember-cli/node_modules/rsvp/dist/commonjs/rsvp/promise.js:176:9)
at publishFulfillment (/(PATH)/node_modules/ember-cli/node_modules/rsvp/dist/commonjs/rsvp/promise.js:312:5)
at flush (/(PATH)/node_modules/ember-cli/node_modules/rsvp/dist/commonjs/rsvp/asap.js:41:9)
Also, I would like to specify a directory, which is app.import() refuses.
Is there an Ember-CLI / Brocolli way of doing this?
I thought I was stuck on this issue, but apparently a cup of tea and explicitly phrasing the question on StackOverflow pushed me in the right direction…
If you install a client-side dependency with bower, then in an Ember-CLI project these will end up in vendor/. To use (parts of) them without changing them, we can use Broccoli's slightly awkwardly named broccoli-static-compiler. First, install two build-time dependencies:
npm install --save-dev broccoli-static-compiler
npm install --save-dev broccoli-merge-trees
In Brocfile.js add at the top below the EmberApp import:
var mergeTrees = require('broccoli-merge-trees');
var pickFiles = require('broccoli-static-compiler');
And at the bottom of Brocfile.js:
// Remove this line:
// module.exports = app.toTree()
// Copy only the relevant files:
var fontOpenSans = pickFiles('vendor/font-opensans', {
srcDir: '/',
files: ['**/*.woff', '**/stylesheet.css'],
destDir: '/assets/fonts'
});
// Merge the app tree and our new font assets.
module.exports = mergeTrees([app.toTree(), fontOpenSans]);
Here our client-side dependency is a font-opensans, which refers to a local git repository containing a copy of the Open Sans webfont.
That is all! To use the web-font, link to assets/ from index.html:
<link rel="stylesheet" href="assets/fonts/opensans_regular/stylesheet.css">
This was tested with ember-cli 0.0.40 and a few earlier versions.
The supported answers are a bit out of date. At the time of this writing Ember CLI 0.2.2, there is support for directly copying/fingerprinting vendor folders you want in your assets directory.
// Brocfile.js
var app = new EmberApp();
...
var extraAssets = new Funnel('bower_components/a-lovely-webfont', {
srcDir: '/',
include: ['**/*.woff', '**/stylesheet.css'],
destDir: '/assets/fonts'
});
module.exports = app.toTree(extraAssets);
Documentation here
Similar to answer from JeroenHoek, in ember-cli, version 0.0.40, I ended up doing it right under the app.import before module.exports. I use the augmentation pattern to encapsulate what I'm trying to do so that when/if it's no longer necessary, or there is a more preferred way to do it, I can clean it up easily, and remove modules that aren't used anymore.
/* global require, module */
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
var app = new EmberApp();
// Use `app.import` to add additional libraries to the generated
// output files.
//
// ... [comments omitted]
app.import('vendor/moment/moment.js');
var tree = app.toTree();
tree = (function mergeFontAwesomeTree(tree) {
var mergeTrees = require('broccoli-merge-trees');
var pickFiles = require('broccoli-static-compiler');
var fontawesome = pickFiles('vendor/fontawesome/fonts', {
srcDir: '/',
destDir: '/fonts'
});
return mergeTrees([tree, fontawesome]);
})(tree);
module.exports = tree;