Sample Ember app for Broccoli
License: MIT License
Sample Ember app for Broccoli.
See Brocfile.js for the build definition.
To start the server, run:
npm install
bower install
npm install -g broccoli-cli
broccoli serve
Note: If you get an error like Built with error: Error: Line 1: Unexpected token ILLEGAL at throwError (/.../broccoli-sample-app/node_modules/broccoli-es6-concatenator), it's
probably because Bower found a rogue .bowerrc file in a parent directory. To
fix this, delete all parent .bowerrc files.
Cloned down app and after running install steps come across error
OSX 10.9 Mavericks
╰─$ node -v
v0.10.28
─$ broccoli -V 1 ↵
0.10.0
Callstack
Build error
appkit/bower_components/jquery/build/release-notes.js
Line 1: Unexpected token ILLEGAL
Error: Line 1: Unexpected token ILLEGAL
at throwError (/Users/stanzheng/code/null/broccoli-sample-app/node_modules/broccoli-es6-concatenator/node_modules/es6-module-transpiler/dist/es6-module-transpiler.js:2584:21)
at scanPunctuator (/Users/stanzheng/code/null/broccoli-sample-app/node_modules/broccoli-es6-concatenator/node_modules/es6-module-transpiler/dist/es6-module-transpiler.js:1354:9)
at advance (/Users/stanzheng/code/null/broccoli-sample-app/node_modules/broccoli-es6-concatenator/node_modules/es6-module-transpiler/dist/es6-module-transpiler.js:2002:16)
at peek (/Users/stanzheng/code/null/broccoli-sample-app/node_modules/broccoli-es6-concatenator/node_modules/es6-module-transpiler/dist/es6-module-transpiler.js:2028:21)
at parseProgram (/Users/stanzheng/code/null/broccoli-sample-app/node_modules/broccoli-es6-concatenator/node_modules/es6-module-transpiler/dist/es6-module-transpiler.js:5176:9)
at /Users/stanzheng/code/null/broccoli-sample-app/node_modules/broccoli-es6-concatenator/node_modules/es6-module-transpiler/dist/es6-module-transpiler.js:5661:38
at parse (/Users/stanzheng/code/null/broccoli-sample-app/node_modules/broccoli-es6-concatenator/node_modules/es6-module-transpiler/dist/es6-module-transpiler.js:6038:23)
at [object Object].$Parser.parse (/Users/stanzheng/code/null/broccoli-sample-app/node_modules/broccoli-es6-concatenator/node_modules/es6-module-transpiler/dist/es6-module-transpiler.js:6810:17)
at new $Parser.constructor (/Users/stanzheng/code/null/broccoli-sample-app/node_modules/broccoli-es6-concatenator/node_modules/es6-module-transpiler/dist/es6-module-transpiler.js:6803:12)
at [object Object].$Compiler.parse (/Users/stanzheng/code/null/broccoli-sample-app/node_modules/broccoli-es6-concatenator/node_modules/es6-module-transpiler/dist/es6-module-transpiler.js:6588:20)
at new $Compiler.constructor (/Users/stanzheng/code/null/broccoli-sample-app/node_modules/broccoli-es6-concatenator/node_modules/es6-module-transpiler/dist/es6-module-transpiler.js:6585:12)
at addModule (/Users/stanzheng/code/null/broccoli-sample-app/node_modules/broccoli-es6-concatenator/index.js:87:26)
at /Users/stanzheng/code/null/broccoli-sample-app/node_modules/broccoli-es6-concatenator/index.js:59:7
at $$$internal$$tryCatch (/Users/stanzheng/code/null/broccoli-sample-app/node_modules/broccoli/node_modules/rsvp/dist/rsvp.js:470:16)
at $$$internal$$invokeCallback (/Users/stanzheng/code/null/broccoli-sample-app/node_modules/broccoli/node_modules/rsvp/dist/rsvp.js:482:17)
at $$$internal$$publish (/Users/stanzheng/code/null/broccoli-sample-app/node_modules/broccoli/node_modules/rsvp/dist/rsvp.js:453:11)
at $$rsvp$asap$$flush (/Users/stanzheng/code/null/broccoli-sample-app/node_modules/broccoli/node_modules/rsvp/dist/rsvp.js:1531:9)
at process._tickCallback (node.js:419:13)
at Function.Module.runMain (module.js:499:11)
at startup (node.js:119:16)
at node.js:906:3
Serving on http://0.0.0.0:4200
After I have a successful build I see the above. Yet when I view that url I get this in the browser
{"statusCode":403,"error":"Forbidden"}
How should my web app (not rails based) access the items returned from the Brocfile?
**here is the basic brocfile I"m using
module.exports = function (broccoli) {
var filterTemplates = require('broccoli-template')
var concat = require('broccoli-concat')
function preprocess (tree) {
tree = filterTemplates(tree, {
extensions: ['hbs', 'handlebars'],
compileFunction: 'Ember.Handlebars.compile'
})
return tree
}
var sourceTree = broccoli.makeTree('js');
var appTemplates = preprocess(sourceTree, {
inputFiles: [
'templates/*.handlebars'
],
outputFile: '/js/dist/tmpls.min.js'
});
var appJs = concat(sourceTree, {
inputFiles: [
'vendor/jquery/jquery.js',
'vendor/handlebars/handlebars.min.js',
'vendor/ember/ember.js',
'app.js',
'other.js'
],
outputFile: '/js/dist/deps.min.js'
});
return [appJs, appTemplates];
}Call me stupid, but how to I run the tests in this? I'm quite new to Ember and all.
*_test and *_spec are very strong conventions for naming unit tests. How about renaming the routes?
Broccoli is great BTW.
First off -thank you for all the time / effort you've put into such a great build tool. I'm playing with it for the first time today and found that I'd like to start a little simpler than this example shows (I'll be making my example public in the near future to help others like myself who don't yet use modules of any kind with ember).
I have a fairly small Brocfile but in the line below you simple "append" legacy files like jquery/handlebars. How can I do this w/out using the ES6 module you have?
var applicationJs = compileES6(appAndDependencies, {
loaderFile: 'loader.js',
ignoredModules: [
'resolver'
],
inputFiles: [
'appkit/**/*.js'
],
legacyFilesToAppend: [
'jquery.js',
'handlebars.js',
'ember.js',
'ember-data.js',
'ember-resolver.js'
],
wrapInEval: env !== 'production',
outputFile: '/assets/app.js'
})With broccoli-cli installed, cloning the broccoli-sample-app repo and running broccoli serve after npm install and bower install throws errors and will not serve the app:
In appkit/bower_components/jquery/build/release-notes.js:
Line 1: Unexpected token ILLEGAL
Error: Line 1: Unexpected token ILLEGAL
at throwError (broccoli-sample-app/node_modules/broccoli-es6-concatenator/node_modules/es6-module-transpiler/dist/es6-module-transpiler.js:2584:21)
at scanPunctuator (broccoli-sample-app/node_modules/broccoli-es6-concatenator/node_modules/es6-module-transpiler/dist/es6-module-transpiler.js:1354:9)
at advance (broccoli-sample-app/node_modules/broccoli-es6-concatenator/node_modules/es6-module-transpiler/dist/es6-module-transpiler.js:2002:16)
at peek (broccoli-sample-app/node_modules/broccoli-es6-concatenator/node_modules/es6-module-transpiler/dist/es6-module-transpiler.js:2028:21)
at parseProgram (broccoli-sample-app/node_modules/broccoli-es6-concatenator/node_modules/es6-module-transpiler/dist/es6-module-transpiler.js:5176:9)
at broccoli-sample-app/node_modules/broccoli-es6-concatenator/node_modules/es6-module-transpiler/dist/es6-module-transpiler.js:5661:38
at parse (broccoli-sample-app/node_modules/broccoli-es6-concatenator/node_modules/es6-module-transpiler/dist/es6-module-transpiler.js:6038:23)
at $Parser.parse (broccoli-sample-app/node_modules/broccoli-es6-concatenator/node_modules/es6-module-transpiler/dist/es6-module-transpiler.js:6810:17)
at new $Parser.constructor (broccoli-sample-app/node_modules/broccoli-es6-concatenator/node_modules/es6-module-transpiler/dist/es6-module-transpiler.js:6803:12)
at $Compiler.parse (broccoli-sample-app/node_modules/broccoli-es6-concatenator/node_modules/es6-module-transpiler/dist/es6-module-transpiler.js:6588:20)
at new $Compiler.constructor (broccoli-sample-app/node_modules/broccoli-es6-concatenator/node_modules/es6-module-transpiler/dist/es6-module-transpiler.js:6585:12)
at addModule (broccoli-sample-app/node_modules/broccoli-es6-concatenator/index.js:80:24)
at ES6Concatenator.transform (broccoli-sample-app/node_modules/broccoli-es6-concatenator/index.js:53:5)
at broccoli-sample-app/node_modules/broccoli-es6-concatenator/node_modules/broccoli-transform/index.js:13:19
at invokeCallback (broccoli-sample-app/node_modules/broccoli/node_modules/rsvp/dist/commonjs/rsvp/promise.js:228:21)
at publish (broccoli-sample-app/node_modules/broccoli/node_modules/rsvp/dist/commonjs/rsvp/promise.js:176:9)
at publishFulfillment (broccoli-sample-app/node_modules/broccoli/node_modules/rsvp/dist/commonjs/rsvp/promise.js:312:5)
at flush (broccoli-sample-app/node_modules/broccoli/node_modules/rsvp/dist/commonjs/rsvp/asap.js:41:9)
at process._tickDomainCallback (node.js:459:13)
It seems to be trying to include those files in addition to the built version of jQuery when doing es6 concatenation/compilation; deleting those folders lets the app build and run as expected.
What is the idiomatic way with Broccoli to exclude these files? Am I missing something else about configuration?
I'm running Node 0.10.26 and Bower 1.2.8 on OS X.
Just wondering how I go about running the tests included in the sample app?
Thanks!
I am unable to trigger the uglify step in this project, but it works in my pared down sample app prior to adding the ES6 transpiler.
I have tried it with serve:
$ BROCCOLI_ENV=production && broccoli serve
And with build:
$ BROCCOLI_ENV=production && broccoli build output-dir
In both cases (with this sample app) I get a 1.8MB sized app.js file that is unminified.
I've also tried removing the production check altogether; same result.
My guess was it is an issue with the ES6 module concatenator step prior, since you perform uglify on the broccoli tree and not on the output (/assets/app.js).
In my example without ES6, compression works as I read directly from the tree instead of /assets folder.
As someone who is new to Broccoli and wanting to learn it, I appreciate the existence of this sample app. However, the fact that there is no documentation whatsoever (besides how to get it running), I'm not getting as much value out of it as I'd hoped.
Since the Brocfile.js is the main file of interest here, would it be possible to have some comments in it to explain what exactly is going on, explain the thinking behind it, and elucidate the concepts? I think this would massively increase the value of this project as a learning tool for newcomers.
Thank you!
Please include instructions on how to run the tests.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.