Ember support

[jrock2004]

Any thoughts about getting Ember added in here?

[CompuIves]

Not yet set in stone, but I'm open to it!

I'm curious what Ember uses for bundling, does it use Webpack?

[kimroen]

I've been thinking about this ever since I first tried out CodeSandbox, and I came here today to look at what would be needed to support Ember. I'd love to help get something working if there's any interest at all 👍

I'm curious what Ember uses for bundling, does it use Webpack?

Ember uses Broccoli, which is pretty low-level. There's a lot of tooling built on top of it, all handled through ember-cli.

Creating an ember application goes like this:

npm install -g ember-cli
ember new my-app

Running a local dev server:

ember server

Making a production build:

ember build --environment=production

Running tests:

ember test

Addons

The general idea is that you use ember-cli, and then extra libraries and build-time extras are managed through ember addons. For example to use autoprefixer, you install the ember-cli-autoprefixer addon:

ember install ember-cli-autoprefixer

Sass?

ember install ember-cli-sass

These types of addon normally hook into the build pipeline to transform the code at the right place using broccoli (broccoli-autoprefixer, for example), and also make some configuration available for the end user.

Moment.js?

ember install ember-moment

This will both add the library to the build and make some components and helpers for working with Moment available.

You wanna deploy to surge?

ember install ember-cli-surge
ember surge --login
ember surge

Ember Observer is where one can go to find out about these.

Addons can do these things:

• Add steps to the build
• Add "generators" (ember generate component my-component is a built-in generator, for example)
• Add files and libraries to be included in the build
• Make components or other bits of code available
• Add generic commands to the ember command
• Probably other things I'm forgetting

Addons with CodeSandbox

Replicating ember install on CodeSandbox isn't as tricky as one might think, because what happens under the hood is that npm install --save <name-of-addon> is run (which there is already an interface for), and then the generator for the installed addon is run using ember generate <name-of-addon>. This is just node code running though, so there are surely some edgecases that could crop up here.

Ember addons have the keyword ember-addon in their package.json, so they can be detected in npm that way.

Bower

Ember apps used to require bower to actually install the ember library, so there are bound to be some projects that people will try to import from github that won't work if that isn't supported.

Alternatives

At the moment one can create ad-hoc alternatives to CodeSandbox by loading the right scripts into something like [Codepen](codepen.io], jsbin, jsfiddle or similar, but all of these alternatives mean you have to use the globals-based version of Ember. None of them allow you to use the file structure, addons, and similar.

The closest you can get to the local setup is with Ember Twiddle, which is built specifically for Ember and the kind of scenarios that CodeSandbox helps with. CodeSandbox has some pretty clear advantages though, like the interface in general, the editor and the integrations with GitHub (Ember Twiddle loads and saves gists).

First version

To get a working first version of this, we could ignore these things:

• Running addon generators
• Supporting Bower

And support these things:

• Generating a new Ember app
• Installing npm dependencies

[ddoria921]

I'm also interested in this. Any help on where to get started implementing this?

[jrock2004]

Is there documentation on how to implement a new framework? If so I would not be opposed to helping out

[CompuIves]

Hey @jrock2004, that would be really nice!

We don't have official documentation yet, however we have reference work and a small explanation.

We recently got a PR for a new custom template: #665. This PR does a really good job at implementing a new template. I also wrote an explanation here: #628 (comment).

Let me know if you have any other questions! I'm really interested in how good Ember support we can get 😄

[NullVoxPopuli]

I would also very much appreciate ember support :-)

[SaraVieira]

Ember has been added :D

[jrock2004]

@SaraVieira I just tried creating new ember project and it does not work. Should I open a new ticket?

[NullVoxPopuli]

I got this error:

[NullVoxPopuli]

Also, I think for this to be completed, we need the terminal able to add files to the file list view. last I checked, that didn't work. :(

ember g route route-name should generate a few files and have them show up in the sidebar.

[NullVoxPopuli]

ok, so, one of my old ember sandboxes runs.

I wonder if something is just broken with the template container then

[NullVoxPopuli]

/cc @mike-north

[SaraVieira]

Hey!

Getting the terminal commands will be done when we may transfer it to server ones so you have ember CLI installed
When containers get out of beta we may move this to them so you get all the commands

If there is a problem with the template please create a new issue

Sorry but it's better for us to keep track of issues :/

[NullVoxPopuli]

@SaraVieira I was just meaning that files generated with the CLI don't show up in the sidebar.
ember-cli already works :)

yarn ember g component my-component should show my-component in app/components, and app/templates/components

[SaraVieira]

Ohhh, that is weird, that is a bug :o

Do you mind making an issue with that specifically so we don't forget about it ?

[piotrpalek]

Is Ember actually on Codesandbox? I can't see it anywhere.

edit: sorry, I didn't check the "Server templates", shouldn't it be also listed under "Client templates"?

[NullVoxPopuli]

It's a server template, because it uses sandbox's containers to run instead of running purely in the browser.

I also think that the sandboxes should be organized by what they are, rather than their underlying sandbox technology, which the average user doesn't care about.

[piotrpalek]

Weird, I would think Angular also needs the container technology to work, but that doesn't seem to be the case.

[NullVoxPopuli]

Yeah, the code in the angular sandbox to hack the building into the browser is gnarly.

The ember sandbox is super simple, and just runs ember-cli