Proposal - Create a CodeSandbox link to this project

[rszalski]

Hey!

I was reading your article when I came across this repo. Wanted to play a bit with the code.

I think it would be great if the README.md would link directly to a working CodeSandbox (or any other online-ide-tool) project so that cloning/installing/starting is not necessary.

CodeSandbox supports creating sandboxes directly from Github, here's the example I made: https://codesandbox.io/s/github/the-road-to-learn-react/react-interval-setstate-unmounted-component-performance

In order to create the sandbox click: "Create Sandbox" -> "Import from GitHub". See the pic.

If you were to create such sandbox from master as of now, CodeSandbox complains about .prettierrc but the fix is here: #7

Thanks!

[rszalski]

Actually, I just noticed that the link I posted (https://codesandbox.io/s/github/the-road-to-learn-react/react-interval-setstate-unmounted-component-performance) is not my sandbox, but one that is synced to this GitHub repo already. Hence it can be used in the readme directly, see #9

[rwieruch]

Thank you so much for the tip. Super neat! I think I will do this for all my example projects 👍

[rwieruch]

@rszalski do you know if it is possible to get a Webpack project running as well without any change in the source code? See https://codesandbox.io/s/github/rwieruch/minimal-react-webpack-babel-setup

[rwieruch]

Oh no, I get the following for this project on Codesandbox

[rszalski]

@rwieruch I got the same error, even for a freshly re-imported repo. This is weird as it was working fine just a couple of days ago.

I found an issue on GH that describes this problem: codesandbox/codesandbox-client#718. Looks like it was fixed but there is a regression. I commented and will be watching for responses. Just hope this is not case-by-case fix 🙄

As for Webpack, I honestly have no idea. It looks like running webpack is only supported in server containers and not client sandboxes. And I haven't found a way to change the template on an auto-imported Github repo :(

[rwieruch]

Thanks! I will check the maximum char bug as well. It's the only thing which keeps me away from having all GitHub repositories linked to CodeSandbox! 🎉 Thanks for showing me this trick :)

Webpack, so npm scripts, run as well. You only need to include a CodeSandbox configuration file: https://github.com/rwieruch/minimal-react-webpack-babel-setup

[rszalski]

Webpack, so npm scripts, run as well. You only need to include a CodeSandbox configuration file: https://github.com/rwieruch/minimal-react-webpack-babel-setup

Thanks for testing this, looks like indeed the node template is what triggers this to be a Server Sandbox. Nice to know it's that easy!

Also, have you tried creating a Imported Sandbox (as above) for: https://github.com/rwieruch/minimal-react-webpack-babel-setup?

It looks like this one is working, however I don't know if previously it was giving the "64 char error".
https://codesandbox.io/s/github/rwieruch/minimal-react-webpack-babel-setup

[rwieruch]

Yep, it's working and doesn't hit the limit.