Giter VIP home page Giter VIP logo

tapas-with-ember's Introduction

DEPRECATION WARNING

Tapas with Ember will not be maintained after Ember 2.0 is released. Please use Ember CLI instead.

Tapas with Ember Build Status

A Brunch skeleton for rapid Ember development. Including Ember installation scripts, environment-specific builds, generators, and Ember.vim support.

Me talking about Tapas with Ember

Features

  • Ember Install Script - Cakefile scripts to install the latest Ember, Ember Data, and Ember Model.
  • Environments - Custom code to allow for environment detection in the browser and at compile time. Automatically uses Ember's production build when in production just like ember-rails.
  • Automatic File Loading - Automatically loads you code, no script tags or superfluous requires necessary.
  • Ember.vim support - Navigate to and create models, controllers, templates, and views with ease.

Brunch Plugins

Setup

Before using Tapas with Ember you will need to install Node, CoffeeScript, Brunch, and Bower.

npm install -g brunch coffee-script bower

Now that you've got Brunch installed, you're three commands away from a running Ember app!

brunch new gh:mutewinter/tapas-with-ember <appname>
cd <appname>
cake server

Open localhost:7435 and check out your brand new Ember app! Every time you save a file, the browser will automatically refresh.

Tapas with Ember runs the latest release channel Ember and latest beta of Ember Data. You can update to Beta or Canary builds using cake ember:install. It's also easy to install the latest Ember Data or Ember Model using the cake scripts below.

Testing

To run run tests headlessly you'll need need to install phantomjs.

brew update && brew install phantomjs

Running Tests Once

npm test

This command will install all dependencies, build the application in the test environment, and run the tests.

Running Tests Automatically

In two terminal sessions, run these commands:

npm run-script test:watch
cake test:watch

Testem will now rerun tests every time your app code changes. You can switch test:watch to test:server if you'd also like to manually interact with the app on http://localhost:7435.

Testing in Other Browsers

If you want to run your tests on other browsers, modify your testem.yml file to include the additional browsers. For example:

launch_in_dev: ['PhantomJS', 'Chrome', 'Firefox', 'Safari']

You can see a list of available launchers by running the command testem launchers.

Frequently Asked Questions

See the FAQ in the Wiki for answers to questions like:

  • How do I add a JavaScript / CSS Library?
  • How do I add Bootstrap?
  • How do I detect the environment?
  • How do I set Ember feature flags?

Technology

NPM Dependency Status This will always say out of date because I'm using jQuery 1.X for IE compatibility.

Updating Libraries

Ember

Tapas with Ember ships with the latest release channel Ember. You can install other versions of Ember using the commands below.

cake ember:install
# cake -t "v1.9.1" ember:install # for v1.9.1 tagged release
# cake -c "beta" ember:install # for beta
# cake -c "canary" ember:install # for canary

Note: cake ember:list displays the tagged releases since 1.0.0.

Ember Data

cake ember-data:install
# cake -t "v1.0.0-beta.9" ember-data:install # for v1.0.0-beta.9 tagged release
# cake -c "canary" ember-data:install # for canary

Note: cake ember-data:list displays all tagged releases.

Ember Model

cake ember-model:install

Note: Ember Model can not be used with Ember Data.

Generators

This skeleton makes use of scaffolt generators to help you create common files quicker.

To use first install scaffolt globally with npm install -g scaffolt. Then you can use the following command to generate files.

scaffolt arraycontroller <name>   โ†’    app/controllers/<name>s.coffee
scaffolt component <name>         โ†’    app/components/<name>.coffee
                                       app/templates/components/<name>.hbs
scaffolt controller <name>        โ†’    app/controllers/<name>.coffee
scaffolt helper <name>            โ†’    app/helpers/<name>.coffee
scaffolt initializer <name>       โ†’    app/initializers/<name>.coffee
scaffolt mixin <name>             โ†’    app/mixins/<name>.coffee
scaffolt model <name>             โ†’    app/models/name.coffee
scaffolt route <name>             โ†’    app/routes/<name>.coffee
scaffolt router                   โ†’    app/config/router.coffee
scaffolt template <name>          โ†’    app/template/<name>.hbs
scaffolt view <name>              โ†’    app/views/<name>.coffee

Compiling for Production

Both the development and production versions of Ember are installed via the ember:install cake task. To compile your project with the production version of Ember with hashed file names, run:

cake build

Now the public folder will contain your production-ready Ember app.

Deploy

Tapas with Ember comes with a Mina deployment script to deploy your app to your own server.

  1. Install Mina by running gem install mina
  2. Fill in your credentials in config/deploy.rb
  3. Setup your server, I use Nginx with this config
  4. Run mina setup
  5. Run mina deploy

Scripts

The following cake scripts are provided.

cake server               # start the brunch server in development
cake watch                # build the app continuously without a server
cake build                # build for production
cake build:test           # build for test
cake test:watch           # run brunch in test environment and watch for changes
cake test:server          # run brunch in test environment, watch for changes, and run server
cake tapas:update         # update Tapas to latest (Cakefile, package.json, portkey.json, config.coffee, generators/*)
cake ember:install        # install latest Ember
cake ember:list           # list tagged relases of Ember since v1.0.0
cake ember-data:install   # install latest Ember Data
cake ember-data:list      # list tagged relases of Ember Data
cake ember-model:install  # install latest Ember Model

The following npm scripts are provided

npm test                  # Install dependencies, build for test, run tests
npm run-script test:watch # Run tests continuously when files change

Pow.cx

To use this app with Pow.cx, follow these simple steps:

  1. Install Pow.cx
  2. echo 7435 > ~/.pow/<appname>
  3. Start the server with cake server
  4. Open http://appname.dev

Ember.vim Support

Custom Ember.vim support is provided via portkey.json. You can navigate to files via these commands:

:Eadapter
:Easset <name>       โ†’ app/assets/<name>
:Ecomponent <name>   โ†’ app/components/<name>.coffee
:Econfig <name>      โ†’ app/config/<name>.coffee
:Econtroller <name>  โ†’ app/controllers/<name>.coffee
:Ehelper <name>      โ†’ app/helpers/<name>.coffee
:Einitialize
:Einitializer <name> โ†’ app/initializers/<name>.coffee
:Emixin <name>       โ†’ app/mixins/<name>.coffee
:Emodel <name>       โ†’ app/models/<name>.coffee
:Eroute <name>       โ†’ app/routes/<name>.coffee
:Estyle <name>       โ†’ app/styles/<name>.styl
:Etemplate <name>    โ†’ app/templates/<name>.hbs
:Etest <name>        โ†’ test/<name>_test.coffee
:Eutility <name>     โ†’ app/utilities/<name>.coffee
:Eview <name>        โ†’ app/views/<name>.coffee

Updating Tapas with Ember

Tapas with Ember has a built-in update script.

cake tapas:update

It updates and overwrites Cakefile, package.json, portkey.json, config.coffee, generators/*.

Thanks To

tapas-with-ember's People

Contributors

bitdeli-chef avatar coderberry avatar dsawardekar avatar elliotec avatar mutewinter avatar patricksimpson avatar ugisozols avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

tapas-with-ember's Issues

Where to add the Adapter store file?

The brunch generator doesn't create a file like store.coffee where one can add the ApplicationAdapter.

I created a file at config/store.coffee with content:

App.ApplicationAdapter = DS.RESTAdapter.extend
  host: 'http://localhost:4000'

App.Store = DS.Store.extend
  adapter: App.ApplicationAdapter

module.exports = App.ApplicationAdapter
module.exports = App.Store

But its not picked up.

Where should I place this file and what to write in it?

Models not loading

Running 'scaffolt model test' creates app/models/test.coffee as expected.

My models weren't accessible, so as a sanity check I put in an Alert. The alert is not shown when loading the page.

app/models/test.coffee:

alert("Model loaded")
module.exports = App.Test = DS.Model.extend()

How to setup emblem.js

Hi!

I really like your skeleton, great job, but I want to be able to use emblem instead of handlebars. How to setup it? What do I have to change to setup generated templates and make everything work just like handlebars.

cake build outputs DIGEST(styles/app.css) in public/index.html

@mutewinter , here is another issue when running cake build.
This popped up when I tried to deploy another app on to heroku.

To reproduce this, I've put-up the repo at https://github.com/millisami/deployed-ember
Clone it, bower install and npm install
Then run cake build and open up public/index.html

<link rel="stylesheet" href="DIGEST(styles/app.css)">
    <script src="DIGEST(scripts/vendor.js)" defer></script>
    <script src="DIGEST(scripts/app.js)" defer onload="require('initialize');">
    </script>

Why that DIGEST(...) is attached into it. Its breaking my build of the sample app?

Models not loading

#19 is still a valid bug. I have ember-data installed, and am still getting the behavior described in issue 19. Thanks

Version conflict on `brunch new`

I run the command brunch new gh:mutewinter/tapas-with-ember yarn-ember according to the setup instructions. I am getting an error that there is a version conflict for handlebars.js

I think it is because the latest Ember.js uses handlebars.js 2.0.0, and tapas-with-ember specifies handlebars version 1.3.0

Error with Stylus on Cake Server

In trying to run cake server with the tapas wrapper on node v0.10.28 and a fully updated macbook pro I'm getting the following errors. These don't seem to be just stylus or brunch-stylus errors but rather an effect of the the install system. Other developers on the team with the same setup as I have on the same codebase are not seeing these issues. Any thoughts on what might be missing that gives me these very odd errors? If this isn't the appropriate place for this issue please advise.

30 May 11:13:05 - error: Compiling of 'app/styles/application.styl' failed. app/styles/global.styl:9
    5|  top 0
    6|  left 0
    7|  width 100%
    8|  height 50px
 >  9|  background-image url('/img/stripesDark.png')
   10|  background-color white
   11| arrowWidth = 64px
   12| .arrow

Cannot read property 'nodes' of undefined
    at ".bar" (app/styles/global.styl:4)
 ; Compiling of 'app/styles/contact.styl' failed. app/styles/global.styl:9
    5|  top 0
    6|  left 0
    7|  width 100%
    8|  height 50px
 >  9|  background-image url('/img/stripesDark.png')
   10|  background-color white
   11| arrowWidth = 64px
   12| .arrow

Bower components not building properly.

In my application.styl to get my bower components to work properly with 'cake server', I had to do this:

@import '../../bower_components/jeet/stylus/jeet'
@import '../../bower_components/slicknav/slicknav.css'

Then when I try to build them for production, I get this:

21 Apr 17:12:16 - error: CSS minify failed on public/styles/app.css: Error: Broken @import declaration of "../../bower_components/slicknav/slicknav.css"

Error when running cake server

Just installed tapas with the instructions provided and when I run cake server, I get the following error. I am running on Windows 7 if that makes a difference.

c:\Code\tapas>cake server

events.js:72
throw er; // Unhandled 'error' event
^
Error: spawn ENOENT
at errnoException (child_process.js:988:11)
at Process.ChildProcess._handle.onexit (child_process.js:779:34)

c:\Code\tapas>

Handlebars error prevents to load the app

Hi, to use the new feature query-params-new queryParams, I had to upgrade the handlebars to 1.3.0 and emberjs to canary version.

I did update both with the following cake tasks:

cake --channel canary emberjs:install
cake handlebars:install

Now when I start the app, I get the error:

Uncaught Template was precompiled with an older version of Handlebars than the current runtime. ..................

And this issue had also popped up before at handlebars-lang/handlebars.js#576

In the console:

Handlebars.VERSION
"1.3.0"
Em.VERSION
"1.5.0-beta.1+canary.2b50c3ae"

What should I do to get past this error in this skeleton?

Why jquery-mockjax not picking up in test?

Hi @mutewinter , I've been trying to setup the jquery-mockjax
But its not intercepting the network requests.
I've tried playing with ember-testing-httpRespond, sinonjs.

I think it has something to do with the skeleton or setup thats not picking up.
I've been banging my head for long hours to figure this out, but still not working.
So calling up for you help on this!!

I've setup the testing app at https://github.com/millisami/postly

Can you pull it and run the test and look for whats I am missing?

Deployment

Been looking into interwebs about how to deploy ember apps, but found none helpful.
In the README, @mutewinter , you've specified the Mina part. But looks like it will work for the VPS only or at least it needs SSH access.

It would be helpful to know on how to deploy on Heroku. A cake task might be super useful if provided. Or, can u guide me through and I can update the README!!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.