Ember Community, meet CodeSandbox!

Last week, codesandbox.io released server-side evaluated sandboxes, opening the door for web application development driven by a true node-driven build process instead of browser-based hacks that aim to approximate similar results.

CSB’s interface, leverages the power of Microsoft’s Monaco editor, which you may be familiar with as the text editing component of visual studio code. Without further ado, here’s an example of CSB running ember-cli to serve an ember app

A slightly-adjusted and updated version of the app used in the Ember.js guides https://guides.emberjs.com/release/tutorial/ember-cli/

How is this different, compared to ember-twiddle?

First, it’s important to recognize that ember-twiddle has helped our community share examples, teach and learn, explore and reproduce bugs and more! We owe Gaurav and everyone who has contributed to this project our gratitude.

With codesandbox containers, what you’re dealing with is not the usual browser-only trickery that’s used to imitate the work ember-cli does in a real development environment — it’s the real deal. You can view the app without the development tools here, and examine it with the ember-inspector.

Because this is a true Node.js environment, running the real ember-cli, we can do things in codesandbox that were never possible with twiddle, such as create programs that use fastboot for server-side rendering, make use of PWA technologies like Service Workers and more!

Git Integration

Here’s the URL for the example above

https://codesandbox.io/s/github/mike-north/ember-new-output/tree/superrentals

CSB pulls code from public git repos with ease, You can even create sandboxes from branches, tags or even subfolders (i.e., a single package within a monorepo project). The git integration doesn’t stop there — you can fork sandboxes, make changes, and then generate a pull request back into the original repo! Look here for more info:

How do I create my own ember-cli sandbox?

While we wait on the official Ember.js support to be added to the codesandbox-client app

You can start with this sandbox in the mean time

https://codesandbox.io/s/github/mike-north/ember-new-output

This will give you almost the equivalent output of ember new my-app . Soon®, the hope is to use https://github.com/ember-cli/ember-new-output/ for this instead — since this repo is updated with every ember-cli release.

If you’re interested in using bleeding edge parts of the ember ecosystem like TypeScript support, ember-decorators and sparkles-components, here’s another starter project

https://codesandbox.io/s/github/mike-north/ember-new-output/tree/typescript

Known Limitations

The following are limitations, some of which apply to codesandbox, some to ember and ember-cli. Keep an eye on these, so you’ll know when the editing experience becomes even more refined than it already is