Codesandbox-client: Convert Client Environment to Container Environment

[CompuIves]

🌈 Feature

Currently it's impossible to convert a Client Sandbox to a Container Sandbox, while this is needed sometimes when you want to do advanced configuration. We should make this a button.

I currently think that the button should fork the sandbox to a container environment, so the fork is executed in a docker container. This allows you to still "revert" the change by going to the old sandbox without too much hassle, it's less destructive. I've also heard from someone that he wants to avoid forks on all costs, so that he would prefer to convert the sandbox in place.

What's the opinion of everyone else on this?

[bcbrian]

Often times the systems seems to guess wrong... Is there a way to tell codesandbox from the beginning that I want a container and not a client environment? That would fix my issues... As for forking or changing in place I choose fork! Because I like the roll back option and have never like the "eject" and cannot go back feel of CRA...

For reference I am trying to work with this repo in the sandbox...
https://github.com/storybookjs/design-system

[sylvainpolletvillard]

How about the other way around ? How can I convert a Container Sandbox to a Client Sandbox ? It looks like Container sandboxes are used by default now when opening Codesandbox from a Github repo URL, and it breaks previous behaviour (like Jest tests auto-detect).

[andyrichardson]

Hey @CompuIves - I think this is a much needed feature!

There have been a few times where I've had to change environment and this would have been super useful. In those cases it wasn't too big a deal though because I was able to create a new container environment and move the files across.

One of the issues I've been experiencing lately is not being able to specify the environment when importing a GitHub URL. Unlike when creating a sandbox from scratch, there's no way to choose what kind of environment to work with and no way to move files across to a new environment; so you're stuck with whatever CodeSandbox assumed you need.

[lbogdan]

Hey @andyrichardson ,

You can explicitly set the template by creating a sandbox.config.json file in the repository root with the following contents:

{
  "template": "node"
}

[andyrichardson]

Legend, thank you very much!

It's worth noting for anyone else trying this that adding that config to an existing sandbox (post import) won't work.

[chasemccoy]

@CompuIves Is there no way to specify an imported GitHub repo as a container sandbox? If not, I don't suppose I will be able to use CodeSandbox at all, as I have to be able to sync my changes back to GitHub.

[lbogdan]

Hey @chasemccoy ,

Did you try with the method in my comment above? That should work even if you already imported the repo as a client sandbox, as we detect the change and update the environment accordingly.

[chasemccoy]

@lbogdan I did try that by setting the template setting to “node” but it didn’t seem to change anything. Notably, I didn’t get access to the server panel in the left sidebar.

[lbogdan]

Can you please share the link to the said repo / sandbox?

[chasemccoy]

Yes! Here’s a sandbox I just created. I imported a github project, and then created a sandbox config with template set to “node” https://codesandbox.io/s/designsystemsdev-jfb09?file=/sandbox.config.json @lbogdan

[chasemccoy]

As you can see, the environment didn’t seem to change:

[lbogdan]

Unfortunately it doesn't work after the fact (that's basically what this feature is supposed to cover, so it's not yet implemented). What I was suggesting above was to add that file to the repository itself, and then re-import it into CodeSandbox.

[chasemccoy]

Ohhh I see, I misunderstood. My apologies! Thank you so much for the help, I’ll give that a shot.

[lbogdan]

Like this: https://codesandbox.io/s/github/lbogdan/designsystems.dev .

[github-actions[bot]]

This issue is stale because it has been open many days with no activity. It will be closed soon unless the stale label is removed or a comment is made.

[einarpersson]

I have been hitting my head against this for the past hours. For some weird reason CodeSandbox thinks by Github Page is "create-react-app" and now nothing happens when I change to parcel (through the sandbox.config.js file)...

[pablopunk]

@einarpersson I had the same issue. I had the sandbox connected to a github repo and changing the sandbox.config.js to "template": "node" did nothing to me. The trick is creating a sandbox from scratch by importing that repo into codesandbox

[SaraVieira]

Hey!

This is actually in our backlog and it's something I also really want, I have wanted this a bunch of times

I will be closing but to make sure what we have in GitHub is just issues and all our feature requests are tracked in our roadmap.

Will definitely let everyone know when it's releaseded