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
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/superrentalsCSB 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
- Creating new files through the terminal won’t work https://github.com/CompuIves/codesandbox-client/issues/1137
- Empty files are pruned https://github.com/CompuIves/codesandbox-client/issues/1136, potentially resulting in ember-cli blowing up on initial build https://github.com/ember-cli/ember-cli/issues/8081
- Many projects will be detected as `create-react-app` projects https://github.com/codesandbox-app/codesandbox-importers/pull/16
- Transitive dependencies of ambient type packages are ignored https://github.com/CompuIves/codesandbox-client/issues/1127
- Only one port is opened, but HTTP and WS are allowed
- `debugger;` w/ live freezes all watchers https://github.com/CompuIves/codesandbox-client/issues/1128
- Only a certain number of SSE sandboxes per user allowed — store keep your code in github so you can destroy and re-create whenever you like
