Codesandbox-client: Prefill from a POST request

[oliviertassinari]

I'm looking into building a Edit in codesandbox button for the documentation examples of Material-UI.

Do you have, or plan to support something similar to: https://blog.codepen.io/documentation/api/prefill/?

Thanks.

[CompuIves]

Hey @oliviertassinari. I love Material-UI, would be really cool to have the examples on CodeSandbox!

Define sounds like a great feature, I can try to implement something like it tomorrow. The main challenge will be persistability. I want to make it possible to persist the sandbox for different views, so that you keep all views etc on the same example sandbox. This will make it easier for users to find your examples on the search (as we sort on view count).

I'll think some more on this 🤔

[oliviertassinari]

After the issue template requirement, you gonna have https://github.com/callemall/material-ui/pull/8851 in the next release :).

I want to make it possible to persist the sandbox for different views

I wish I could give you more benchmark to look into. I have discovered codepen API by looking at vuetifyjs. plnkr.co must have something similar given material angular@2 has the same feature.

[CompuIves]

After the issue template requirement, you gonna have callemall/material-ui#8851 in the next release :).

That's great!! Nice!

I have an idea. I saw that you were hosting the examples as files on GitHub, maybe we can extend our GitHub integration for single file support.

For example, then you could point to a file (eg. codesandbox.io/s/github/callemall/material-ui/blob/v1-beta/docs/src/pages/demos/buttons/FlatButtons.js) and we'd infer the project settings from the nearest package.json up the tree. So in that case you would need a package.json in callemall/material-ui/blob/v1-beta/docs/src/pages/demos describing all dependencies.

What do you think, would it fit in the workflow? I want to make this as maintainer friendly as possible, so if you have any concerns, let me know 😄 .

[oliviertassinari]

@CompuIves Thanks for helping us! I can only see one problem with your suggestion. What about ReactDOM.render? How is going to render the demo component?

[CompuIves]

Ahh good one, I remember from the early days that we'd render the component regardless. We don't do that anymore though, hmmmmm. I need to think on this some more.

I could create a /define endpoint that creates a temporary sandbox that gets deleted after 24h, that would be the most trivial implementation. Though I first want to check if it'd be possible to do the GitHub approach.

We're 🔜 announcing something that makes it easy to catalogue examples by library on CodeSandbox, and we take the git metadata into account. That's the main advantage.

[CompuIves]

Heya! Yesterday I deployed a define endpoint that allows you to create temporary sandboxes. You can find an implementation on how to use it here: https://codesandbox.io/s/wylx7lrrl7.

I'll keep this open until we have official documentation for it. Let me know if you have any questions!

[oliviertassinari]

@CompuIves Oh, awesome. I'm having a look at it. Thanks!

[lbogdan]

@CompuIves That's nice, but isn't the URL limited to some 2000 characters? Even with compression, that wouldn't help with medium to large sandboxes, right?

[CompuIves]

Yep, this API also works with POST requests. Same parameters.

On Thu, Nov 23, 2017, 13:53 Bogdan Luca [e-mail] wrote:

@CompuIves https://github.com/compuives That's nice, but isn't the URL
limited to some 2000 characters? Even with compression, that wouldn't help
with medium to large sandboxes, right?

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
https://github.com/CompuIves/codesandbox-client/issues/263#issuecomment-346610966,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAj1CFxo4Ek9PICODpVnoCjLVQ3AfcABks5s5WrlgaJpZM4QKHsB
.

[lbogdan]

May I say this is awesome!?

[yesmeck]

Wa (Ant Design) are looking into adding CodeSandbox as one of Open in xxx button too.

[yesmeck]

Try to use POST request, but got a Internal server error.

https://codesandbox.io/s/5x6rp53jxp

[oliviertassinari]

@yesmeck I confirm. Same issue on my side with the POST method.

[CompuIves]

Ah sorry, didn't see the replies. I'm on my phone right now, but can send a
solution later. For the POST request the body should just be a json
structure with one key: files. So what goes in parameters in the get
request is the body. Also there's no lz string compressing required.

I can give a proper sandbox for it later today or tomorrow 😃.

On Sun, Nov 26, 2017, 22:30 Olivier Tassinari [e-mail]
wrote:

@yesmeck https://github.com/yesmeck I confirm. Same issue on my side
with the POST method.

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
https://github.com/CompuIves/codesandbox-client/issues/263#issuecomment-347039963,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAj1CJNrLuAiPsCoKRORfQdOxCFwb19bks5s6dh7gaJpZM4QKHsB
.

[CompuIves]

Just deployed a commit to the server that makes your codesandbox POST example work! @yesmeck @oliviertassinari

[CompuIves]

Documentation is here: https://codesandbox.io/docs/importing#define-api

[CompuIves]

Small followup, @Noviny built a really nice library that makes it incredibly easy to export an example to CodeSandbox. It's called react-sandboxer and is already used by Atlassian for Atlaskit and for the new React-Select: https://github.com/Noviny/react-codesandboxer.