Host the examples

[bogas04]

I feel that it'll be easier for users to understand, test and play with CycleJS if the examples are hosted somewhere. Something like how react-router 4 does. Currently only such thing is the example on homepage.

One great way to start doing this can be simply creating bins on webpackbin.com. All your examples use 2-3 files, and don't rely too much on build processes other than that of babel.

[Frikki]

webpackbin is highly unstable.

[Widdershin]

We could adapt tricycle for this sort of thing. Could be tied in with create-cycle-app perhaps https://github.com/cyclejs-community/create-cycle-app/issues/10

[staltz]

I agree. It would be nice. It's not my priority, but something someone can help contribute.

[geovanisouza92]

Can I propose something? What about point every project on examples/ to a Code Sandbox, embedding them on the docs/site? Sandbox would download dependencies and run the code on the browser, totally synced with the repo, with a project script to keep all examples linked seamlessly.

To achieve this, the only required change is to 1) rename each example main.js to index.js, following the convention expected by CS, or; 2) point the main on each example package.json.

If you are ok with that, I can make a PR :smiley:

[staltz]

@geovanisouza92 I'm not familiar with Code Sandbox, it looks good, I'm just worried about the limits of the free plan, and whether this startup will last long enough. I was also excited about putting each example in Dat, this way it's very easy to update them and view them in Beaker browser. To make it available also for users of the old web, we could use https://hashbase.io/ (it also has a pricing plan, but at least it's easy to self host if we decide so).

[bogas04]

I can migrate them to CSB as an experiment.

Here are 2:

• animated-letters
• animation

It's very basic and easy.

• Fork any of these
• Copy paste src/main.js
• Add missing dependencies
• #main-container -> #root

If you dig this, I can take out some time tomorrow and migrate all the remaining ones.

@staltz

[eostrom]

CodeSandbox is still around and has made this even easier, at least for the example I tried: https://codesandbox.io/s/github/eostrom/cyclejs/tree/code-sandbox-demo/examples/advanced/animated-letters

This is all I did:

1. Fork this repo on GitHub.
2. Add a main property to the example's package.json, pointing to src/main.js.
3. Copy the URL for the animated-letters subdirectory of my GitHub repo.
4. Paste it into CodeSandbox's import wizard.

CodeSandbox will also watch the GitHub repo and update itself automatically when it changes! This is great – if we just copy-pasted code to a sandbox, it would quickly fall out of date unless someone was dedicated to maintaining it.

Note that this sandbox is not "owned" by anyone, as far as I can tell. If you try to edit it, it will automatically create a private copy of the sandbox.

With all that in mind, if there's still interest in this, I propose the following:

1. I will add main properties to all the examples.
2. If needed, I will make other changes to make the examples run on CodeSandbox, making sure they also still run in a development environment.
3. I will submit a pull request with these changes.
4. Once that's merged, I will create a CodeSandbox for each example, imported from the master branch of the main @cyclejs repo so that it keeps up with future changes.
5. Ideally, someone with access to https://cycle.js.org/ will link to these sandboxes so visitors know they exist.

Let me know if this seems like a good way to proceed.

[eostrom]

A progress report on this (with links to the sandboxes):

• advanced/routing-view is functional but the CSS isn't applied
  • I think when I set main to src/main.js, the sandbox generates its own HTML file that basically just embeds that JavaScript file, but for this example we want to use our own index.html
  • I tried setting main to index.html, which works in this Vanilla sandbox, but it didn't work for me
• I guessed that for advanced/isomorphic I should set main to server.js but I get an error
  • I'm not sure whether CodeSandbox can host server-side code
• basic/jsx-seconds-elapsed raises a "ReferenceError: React is not defined"
  • something to do with JSX I'm guessing
• basic/http-random-user, intermediate/bmi-typescript, intermediate/hello-lastname, and intermediate/tsx-seconds-elapsed all present a blank page with no explanation
  • all four of these use TypeScript and I suspect that's the problem
  • CodeSandbox does support TypeScript but maybe it needs different configuration
  • side note: intermediate/tsx-seconds-elapsed raises a lot of TypeScript parsing errors on my computer, but the others work fine

The other 12 examples work!

I'll look further into these failures, but if anyone else wants to jump in, feel free to fork a copy of the example and tinker with it.