Framework support for Ember.JS

[NullVoxPopuli]

Describe the solution you'd like:
I'd like stackblitz framework/template links to link to the official "output repo" for online editors (there is now an official branch just for stackblitz-specific customizations)

Provide a link to a github repo containing an example of the framework:

https://stackblitz.com/github/ember-cli/ember-new-output/tree/stable?file=README.md
https://stackblitz.com/github/ember-cli/editor-output/tree/stackblitz-app-output?file=README.md

This link is updated automatically with every release.

Additional context:

We have an influx of a need to create reproductions for situations for helping people out / having folks create small reproductions of their problems so we can help them better analyze their situation. Having "official" ember support would be beneficial so we don't get comments like this in Discord:

"Do you know some site like stackblitz for ember ?"
"I see that Ember is not support :( "

Issues that affect projects that have as many files as the default ember boilerplate need to be resolved:

• Error When Saving: 413 Request Entity Too Large (nginx error) #294
  • This happens every time you try saving with a server running

[EricSimons]

This is a great idea- we should definitely add a link to a starter for Ember.

@NullVoxPopuli I tried reproing the 413 issue by forking the base Ember CLI project you linked but can't seem reproduce it. Do you know if this is an error that's happened recently at all?

[NullVoxPopuli]

Do you know if this is an error that's happened recently at all?

Yup. Every time I use stackblitz.

Repro steps:

1. Fork blitz
2. npm start - potentially wait start to finish
3. Make any change to any file, a js file for example
4. Save
5. Observe 413

[EricSimons]

Oh I see, the start command is optimistic in opening the devserver. Definitely seems like the writes to the dist folder are the issue here. Is there a way to turn that feature off by chance? If not, we've also been talking about adding a .stackblitzignore or something akin that would solve this as well. Curious wyt?

[NullVoxPopuli]

I'd think stackblitz should respect .gitignore

[NullVoxPopuli]

@EricSimons ember now has dedicated repo / branch for Stackblitz: https://github.com/ember-cli/editor-output/tree/stackblitz-app-output

[NullVoxPopuli]

@jrvidal / @EricSimons - is there a place I can PR to add the link? or is the website private?

[EricSimons]

@NullVoxPopuli ah yeah our website isn't public, but I'll circle with the team tomorrow morning and get this updated on the homepage/dashboard shortly 🙏

[NullVoxPopuli]

what's the verdict? <3

[NullVoxPopuli]

@EricSimons how'd the circling go?

[sulco]

Hi @NullVoxPopuli! I'd be happy to make this happen, and we should be able to add the starter this week.

One concern I have atm is, since our free tier doesn't include binary files, and the starter includes the construction.png image, people who open it and are on the free tier – or not logged in – would now see the the "upgrade to pro account" message:

Do you think you could change it to an svg or a hotlinked image? Either should resolve the issue.

[NullVoxPopuli]

tldr: I think it's fine if we leave things as is -- the options for REPLs are a "best of no good options" sort of deal, and I think this can "be put up with"

We can't really swap out the default blueprint, as it's nearly the same as what folks use on their local machines. And if they have dependencies installed locally (due to already making an ember app somewhere else), it's nice that they don't have to have internet to have the default welcome experience.

Questions though:

• is there an option or something (in the .stackblitzrc) to make this modal a little less intrusive?
• if binary files require pro account, how come it renders? (or maybe I don't understand?

[sulco]

That's too bad, it's not the best UX for a starter we'd want to put as an official one. I can't see any different options, but I'll discuss it with the team.

Regarding the questions:

• there is no option to change the modal
• what I believe happens is that when the project launches, the image goes through WebContainer – which works – and at the same time tries to persist it – which is not available

Where does the image come from btw? I wasn't able to locate it in the repository.

[NullVoxPopuli]

Regarding the questions:

thanks for the answers!

Where does the image come from btw? I

• this dependency ember-welcome-page
• provides this component: <WelcomePage />
• which references (and packages) that image here: https://github.com/ember-cli/ember-welcome-page/tree/master/images
• which is declared as "to be merged" with the consuming app's build here: https://github.com/ember-cli/ember-welcome-page/blob/master/package.json#L119

(it's a common pattern in the ember-ecosystem to have libraries that may provide static assets (super handy for work projects, too))

and at the same time tries to persist it

can we opt out of that? I don't think we need that behavior?

it's not the best UX for a starter we'd want to put as an official one.

I suppose if we mustn't have the image, I'd have to remove the welcome page entirely by removing the addon and adjusting the blueprint files. (in this auto-updating script that we use to update online-editor outputs): https://github.com/ember-cli/ember-cli/blob/master/dev/update-output-repos.js#L67
but then that leads to a less-pleasant experience for on-boarding / not seeing any links or how to get help 🤔

[sulco]

Oh my, I've been digging deeper and it looks like that dist folder – or rather us lacking the possibility of ignoring it – is the ultimate culprit.

I've just forked the repo and set the "output-path" to "/.dist" (dot-folders are ignored by default) and looks like this solves the issue. See https://stackblitz.com/fork/github/sulco/editor-output/tree/stackblitz-app-output .

I imagine this doesn't solve the issue as this would make the setup non-default thought, right?

[sulco]

Ok, I will try to push this paths-ignoring configuration to the team – can't promise any ETA, but I realize it would be super useful

[NullVoxPopuli]

've been digging deeper and it looks like that dist folder – or rather us lacking the possibility of ignoring it – is the ultimate culprit.

taking care of that would also fix: #294
(and potentially every other issue I've had with using stackblitz)

I imagine this doesn't solve the issue as this would make the setup non-default thought, right?

as far as output goes, I think that's less important.

But, anything against ignoring what's specified in .gitignore?
I think a few other frameworks use dist/ as their output folder, so if .gitignore could be supported, I think that'd easily cover most things? yeah? (or at least, this class of problem?)

I've just forked the repo and set the "output-path" to "/.dist"

Nice! I didn't actually know about that option in the .ember-cli file 🙃

Ok, I will try to push this paths-ignoring configuration to the team – can't promise any ETA, but I realize it would be super useful

Thanks for investigating!! <3

[sulco]

Good news! looks like we are going with .gitignore! Should also be sooner rather than later, probably before the end of the next week 🤞

[NullVoxPopuli]

yay!!! 🎉 🌮 🥳

[NullVoxPopuli]

success? @sulco <3

[sulco]

WIP! :)

[NullVoxPopuli]

success? @sulco <3

[MichalBryxi]

Right now the URL from the issue description (https://stackblitz.com/github/ember-cli/editor-output/tree/stackblitz-app-output?file=package.json) gives me:

~/projects/mklizrgop.github
❯ npm install && npm start
warn preInstall No repository field
┌ [1/3] 🔍  Resolving dependencies
└ Completed in 1.221s
┌ [2/3] 🚚  Fetching dependencies
│ info pruneDeps Excluding 2 dependencies. For more information use `--verbose`.
└ Completed in 3.674s
┌ [3/3] 🔗  Linking dependencies
└ Completed in 1.982s
info security We found `install` scripts which turbo skips for security reasons. For more information see
https://turbo.sh/install-scripts.
└─ [email protected]

success Saved lockfile "package-lock.json"
success Updated "package.json"

success Install finished in 7.626s
$ ember serve
TypeError: Failed to fetch
    at _0x530128.performHTTPCall (https://mklizrgop--github.w.staticblitz.com/blitz.05388ae171e3a0a12539f1efbda0fa1189d4f549.js:15:282948)

~/projects/mklizrgop.github 13s
❯ 

[NullVoxPopuli]

@sulco any updates?

[NullVoxPopuli]

Today, I get this error:

success Updated "package.json"

success Install finished in 7.734s
$ ember serve
TypeError: Right-hand side of 'instanceof' is not an object
    at _0x585795.[Symbol.hasInstance] (https://qgnixoogb--github.w.staticblitz.com/blitz.5bca79c80956550a0ee18f24bf5b874e18bb8626.js:6:285951)
    at processPromiseRejections (https://qgnixoogb--github.w.staticblitz.com/blitz.5bca79c80956550a0ee18f24bf5b874e18bb8626.js:6:1008798)
    at processTicksAndRejections (https://qgnixoogb--github.w.staticblitz.com/blitz.5bca79c80956550a0ee18f24bf5b874e18bb8626.js:6:719888)
    at _0x4460f7 (https://qgnixoogb--github.w.staticblitz.com/blitz.5bca79c80956550a0ee18f24bf5b874e18bb8626.js:8:208957)

[NullVoxPopuli]

Now I have:

ReferenceError: Object is not defined
    at Function.build (/home/projects/github-k7htnb/node_modules/console-ui/node_modules/chalk/index.js:129:2)
    at Function.get (/home/projects/github-k7htnb/node_modules/console-ui/node_modules/chalk/index.js:61:17)
    ```

[NullVoxPopuli]

@EricSimons and @sulco I've made some progress with patch-package.

https://stackblitz.com/github/NullVoxPopuli/ember-cli-editor-output/tree/stackblitz-app-patched-broccoli-and-no-ember-data?file=README.md
and opened the following issues / PRs:

• esm from private-build-infra should be removed as it patches Object emberjs/data#8021
• Conditionally use esm package broccolijs/broccoli#499

Atm, I have two situations depending on.. maybe luck? maybe browser?

In firefox, I get this error:

$ ember serve
[UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "TypeError: NetworkError when attempting to fetch resource.".] {
  code: 'ERR_UNHANDLED_REJECTION'
}

and in chrome I get this error:

$ ember serve
TypeError: Failed to fetch
    at _0x425d0a._fetch (https://kkvingabo--github.w.staticblitz.com/blitz.bff91798029e1af88e01551d056a592b2882b9ac.js:15:406182)
    at _0x425d0a.performHTTPCall (https://kkvingabo--github.w.staticblitz.com/blitz.bff91798029e1af88e01551d056a592b2882b9ac.js:15:405754)
    at _0x425d0a._write (https://kkvingabo--github.w.staticblitz.com/blitz.bff91798029e1af88e01551d056a592b2882b9ac.js:15:399835)
    at _0x425d0a.writeLatin1String (https://kkvingabo--github.w.staticblitz.com/blitz.bff91798029e1af88e01551d056a592b2882b9ac.js:15:390491)
    at _0xba2ea3.writeLatin1String (https://kkvingabo--github.w.staticblitz.com/blitz.bff91798029e1af88e01551d056a592b2882b9ac.js:15:210978)
    at https://kkvingabo--github.w.staticblitz.com/blitz.bff91798029e1af88e01551d056a592b2882b9ac.js:6:783438
    at writeGeneric (https://kkvingabo--github.w.staticblitz.com/blitz.bff91798029e1af88e01551d056a592b2882b9ac.js:6:783719)
    at Socket._writeGeneric (https://kkvingabo--github.w.staticblitz.com/blitz.bff91798029e1af88e01551d056a592b2882b9ac.js:6:237637)
    at Socket._write (https://kkvingabo--github.w.staticblitz.com/blitz.bff91798029e1af88e01551d056a592b2882b9ac.js:6:237795)
    at doWrite (https://kkvingabo--github.w.staticblitz.com/blitz.bff91798029e1af88e01551d056a592b2882b9ac.js:6:1012713)

[NullVoxPopuli]

@EricSimons / @sulco any debugging tips?

[NullVoxPopuli]

Things seem to be looking smooth now, actually: https://stackblitz.com/github/ember-cli/editor-output/tree/stackblitz-app-output?file=README.md

can we get Ember added to the home page? <3 https://stackblitz.com/
or in the frontend tab? https://stackblitz.com/?starters=frontend

[Polve]

Is there some kind of tutorial on how to setup an ember project with webcontainers?

I would like to try it very much!

[NullVoxPopuli]

if you have a node environment in your web container, you'd do:

npx ember-cli new my-app
cd my-app
npm start

[betocantu93]

Is there a way to make livereload work? I see the console rebuilding, but not the demo.

[NullVoxPopuli]

I wonder if you need to fork it first? I have live reload working here: https://stackblitz.com/edit/github-qivg2a?file=app%2Fcomponents%2Fnav.hbs,app%2Frouter.js

[betocantu93]

@NullVoxPopuli uff, it worked! I had to sign in for it to work. NICE.

i'll refactor ASAP codesandbox from ember-eui demos for stackblitz

[NullVoxPopuli]

you can put them all on a github repo and use specially crafted URLs to load all your demos from github 🎉

https://stackblitz.com/github/{user-name}/{repo-name}/tree/{branch-name}

This way, if something goofy is going on, you have multiple options for loading your example code 🎉 (stackblitz, github.dev, local, etc)

[betocantu93]

do you have an example of this @NullVoxPopuli ?

[NullVoxPopuli]

Yeah, the automatically updated URL:

https://stackblitz.com/github/ember-cli/editor-output/tree/stackblitz-app-output

Updates every release

[NullVoxPopuli]

We now have both JS and TS generated templates:

JS: https://stackblitz.com/github/ember-cli/editor-output/tree/stackblitz-app-output
TS: https://stackblitz.com/github/ember-cli/editor-output/tree/stackblitz-app-output-typescript

New automation to keep them in sync: ember-cli/ember-cli#10211

[NullVoxPopuli]

@Nemikolh any updates? <3

[Nemikolh]

Hey @NullVoxPopuli ! Sorry for the late response.

Do you think you could give me an update on what you think is broken / missing? From what I could gather, it seems the main blocker is support for the esm package. I don't know when we'll be able to work on this quite yet, but I'll be sure to keep you posted when we have support for this package.

[NullVoxPopuli]

No worries, @Nemikolh , lemme catch you up:

From what I could gather, it seems the main blocker is support for the esm package.

I think that was only for old copies of the ember generated app blueprint -- the solution was just to avoid esm.

Ember updates its app templates every 6 weeks, so things can progressively get fixed / updated on these links over time:
JS: https://stackblitz.com/github/ember-cli/editor-output/tree/stackblitz-app-output
TS: https://stackblitz.com/github/ember-cli/editor-output/tree/stackblitz-app-output-typescript

Using these links
- in firefox on windows, no issues
- in firefox on linux, no issues
- in chrome, on windows, no issues

[Nemikolh]

Hey @NullVoxPopuli, just a heads up. We are currently making improvements to our starter list UI and I'll make sure your templates will be included. I don't have an ETA for now, but be reassured that we haven't forgotten about Ember!

(and thank you so much for your message, it was super useful 😍 )

[d3lm]

@NullVoxPopuli I think we still need to investigate why exactly the esm package fails in WebContainer but if it can be avoided (for now and for the starter) that'd be a really nice interim solution to have a working starter template.

[d3lm]

Can you remind of the ticket that was filed for the esm package specifically, or do you happen to have a project at hand that doesn't work in WebContainers that we could use?

[NullVoxPopuli]

Yeah, totally - and super appreciate that mentality!

Here is themesm issue(s):

• Chrome chrashes and doesn't load other tabs #692
• Firefox: Stack trace breaks? #691

Reproduction blitz: https://stackblitz.com/edit/github-8qeupk?file=package.json

Looks like both GH issues have stable/non-updating blitz examples

[NullVoxPopuli]

@d3lm / @Nemikolh any updates you can share about adding Ember to the site / template / project launcher?

as for the esm issue, it isn't present in the blitz links -- it was for much older version of the ember starter project(s) 🎉

[sulco]

@NullVoxPopuli we're adding several new starters to the platform this week – Ember is going to be among them! ❤️

[NullVoxPopuli]

oooo very exciting!!! 🎉 🎉 🎉 🎉 🎉 🎉 🎉 🎉 🥳

[d3lm]

@NullVoxPopuli That's fantastic news! So it doesn't use the esm package anymore?

[NullVoxPopuli]

@d3lm kinda -- some legacy code paths still use it

❯ npx ember-cli@latest new my-app
# wait forever because npm is slow 🙃
❯ npm why esm
[email protected] dev
node_modules/esm
  esm@"^3.2.4" from [email protected]
  node_modules/broccoli
    broccoli@"^3.5.2" from [email protected]
    node_modules/ember-cli
      dev ember-cli@"~4.12.1" from the root project
      peer ember-cli@"^3.2.0 || ^4.0.0" from [email protected]
      node_modules/ember-cli-dependency-checker
        dev ember-cli-dependency-checker@"^3.3.1" from the root project

but (I haven't looked at how esm is used in these packages) this either doesn't affect anything when doing npm start or the issue has been resolved.

[d3lm]

Cool! Thanks for the info.

[NullVoxPopuli]

We can close this, because emberjs on stackblitz works everywhere web containers are supported!

And it's showcased on the stackblitz site itself!