CxJS Template

[mstijak]

CodeSandbox is truly an amazing project and I would love to see CxJS on the list of the supported frameworks. It's a perfect solution for prototyping, sharing examples and tutorials.

I made a couple of CxJS examples based on the vanilla template to see if it works. Except some linting and SCSS (#627), everything seems fine.

https://codesandbox.io/s/qv2w1v5qlw
https://codesandbox.io/s/mqqwo5v7lj
https://codesandbox.io/s/383p1491m
https://codesandbox.io/s/316wlj6wmq
https://codesandbox.io/s/kx79xlvqwr

We're using CxFiddle at the moment. Moving to CodeSandbox would be a big improvement for us and we would be able to contribute some development time to the project.

Please note that CxJS is a primarily a commercial product. It's free only for small teams and startups.

[CompuIves]

That sounds like a great idea! I'm going to start writing custom documentation this weekend on how to write custom templates in CodeSandbox and open a PR for it, would you be interested in opening a PR with CxJS support using that?

[mstijak]

Definitely. I was going to try to do it on my own, but having the documentation will surely make things much easier. Thanks!

[mstijak]

I need help. It was pretty straightforward to add a new template in the UI, but I have problems understanding how the rest works. Where do template files live?

https://github.com/mstijak/codesandbox-client/tree/cxjs-template

[CompuIves]

Ah, yep that's understandable.

To define a new template we need to change three things:

Template Definition

We need to add a template definition, this is used for our editor and the homepage to determine what the template is and what it can do. All templates are stored here: https://github.com/CompuIves/codesandbox-client/blob/master/packages/common/templates/index.js. You can create one by creating a new file (like cxjs.js) and filling it like the other templates, then by adding it to index.js.

Preset Configuration

We also need to configure the CodeSandbox bundler to transpile the CxJS template correctly. This can be done by creating a preset. A preset can be defined like here as example: https://github.com/CompuIves/codesandbox-client/blob/master/packages/app/src/sandbox/eval/presets/create-react-app/index.js. You'll need to add a new preset and add it to here: https://github.com/CompuIves/codesandbox-client/blob/master/packages/common/templates/index.js.

The last thing that needs to be done is marking a sandbox with a template. This is pretty hard currently, I suggest to set the template property manually on the sandbox when you fetch it. Like adding it here: https://github.com/CompuIves/codesandbox-client/blob/master/packages/app/src/app/store/actions.js#L11.

Let me know if there are more questions, I'd be glad to answer them! 😄

[mstijak]

The thing is that when a new sandbox is created (based on the CxJS template) the app tries to fetch /s/cxjs which is currently non-existent. How to create that initial sandbox with default project files?

Regarding the template field, should I save the project afterward to persist the change? The problem is that I'm not able to log in with GitHub in development mode. Page not found /auth/github. Am I missing something?

[CompuIves]

Hmm, you could just create a new sandbox at a random ID and manually set the template field of that sandbox to cxjs for now. That's how I do most development for templates as well.

should I save the project afterward to persist the change

No, that's not needed. If you just set your receiving side to override the field you will get the cxjs for every template, which is desired behaviour when you're developing for that template I believe.

The problem is that I'm not able to log in with GitHub in development mode.

We're setting up a staging that allows you to log in into development, but it's not here yet. You should be able to edit and save sandboxes when you're not signed in though.

[lbogdan]

Added in #683 .