Codesandbox-client: Set initial opened file, skip deps install & do not run start scripts as options in sandbox.config.json

[jthegedus]

Is there a way that the settings inference could be done without the main field in the package.json. This requirement is blocking me, as specifying a main field will conflict with other tools I use, messing up their configuration (https://github.com/firebase/firebase-tools/issues/662).

With an empty main field my other tooling works as expected, but then I receive this error:

An error occured when fetching the sandbox:
Cannot find the specified entry point: 'src/index.js'. Please specify one in 'package.json#main' or create a file at the specified entry point.

Since other templates require specific dependencies, could it check if those templates apply first, then upon failing, infer that the repo being cloned is just an arbitrary folder structure?

As discussed here https://github.com/CompuIves/codesandbox-client/issues/43, I don't wish to execute the code from the repo in CodeSandbox, but merely use it as a way to keep blog code snippets in sync across my Medium blog (using gists for snippets in Medium is unmanagable).

[CompuIves]

Hmm, interesting. We have a list of entry points we traverse specific per template. The package.json entry is the first one we try. Do you have a link to the sandbox? I could definitely add an override based on sandbox.config.json!

[jthegedus]

An override would be great!

This sandbox loads fine as I've got an empty file src/index.js and a main field: https://codesandbox.io/s/github/jthegedus/blog-examples/tree/master/firebase-functions-express . But this breaks the Firebase deployment as it concatenates the main field to the deployment dir. An issue I have raised with Firebase https://github.com/firebase/firebase-tools/issues/662 . This is the repo - https://github.com/jthegedus/blog-examples/tree/master/firebase-functions-express .

I have noticed that it recognises this as the create-react-app template, which I assume is the template inferred by the src/index.js file.

This sandbox fails to load as there is no main field in the package.json: https://codesandbox.io/s/github/jthegedus/blog-examples/tree/master/firebase-functions-es6-babel . This is the repo structure I have which deploys to Firebase fine because the main field is empty and so does not concatenate anything to the other deploy dir definitions in the firebase.json - https://github.com/jthegedus/blog-examples/tree/master/firebase-functions-es6-babel

Sorry I can't be of more help and PR a fix myself. You've innovated so much it's beyond me where to even start a solution.

[CompuIves]

Okay!

So if I understand correctly, you want to show https://github.com/jthegedus/blog-examples/blob/master/firebase-functions-es6-babel/src/functions/index.js from the https://github.com/jthegedus/blog-examples/blob/master/firebase-functions-es6-babel repo, without setting main in package.json, right?

[jthegedus]

That's correct.

I want to add the project to CodeSandbox without the main field being used to determine anything about the project structure. I want the folder I link on GitHub Import to be the root that CodeSandbox loads, and that's it. If main is populated, a config option to opt-out of using it to determine the project structure would mean I could use main as required by other tools.

I understand that it is common practice to use main to determine the entry point of the app, but the repo structure I have is a stripped down monorepo, without a single entry point.

The discussion here https://github.com/firebase/firebase-tools/issues/662 covers how the firebase-tools CLI tool requires main for deployment. Because each tool uses main and they each require a different path/file to work they conflict.

[ameriania]

I am encountering the same problem.

In my cases,i just want to clone a repo to show in CodeSandBox,and have some editting,that's it.

But it seems not support yet.

[ryanpcmcquen]

It would be great if CodeSandbox scanned the package.json for a codesandbox property, is this possible? Conversely, if the sandbox.config.json allowed the specification of an entry point that would also work.

[Saeris]

Spent a good chunk of time trying to hunt down where exactly in the code CSB is reading the package.json file to get the main path and to see if I could add an override into sandbox.config.json. Couldn't find it. That code is all over the place.

I'm commenting to add another use case for having such an override. I'm trying to write a component library and I need to use the main field in package.json for NPM. Since I developed both the component library and it's demo page in CSB, I was really hoping I could support users simply importing the repo to get a live demo, but as it stands it's one or the other. The only other alternative I see is having some sort of mono-repo structure with multiple package.json files, one for the library and one for the demo page. Maybe I'd need to do that anyways since CSB doesn't seem to install all of the devDependencies either. It would be good to see an example for this use case though, as I'm sure there's a large audience of library developers who would like to use CSB to demo their code.

[eps1lon]

@Saeris mui-org/material-ui uses a dedicated examples directory which includes multiple examples that can be used for codesandbox like so: https://codesandbox.io/s/github/mui-org/material-ui/tree/master/examples/create-react-app

I think this approach better suited for your use case.

[CompuIves]

Oh I'm sorry for that @Saeris, the code to support the sandbox.config.js can be found here: https://github.com/CompuIves/codesandbox-client/blob/private-github/packages/common/templates/template.js#L74-L83

[jthegedus]

The material-ui method is not quite the same as it is using a pre-existing template. It somehow infers that I am using the create-react-app template :man_shrugging: but the fact that I can create a sandbox with my repo allows me to use Codesandbox for rendering my code snippets. I am not sure what changed over the past 5 months that now lets this work.

What would be ideal is if sandbox.config.json had a flag to completely turn off the compilation. I just want to render code snippets in my blog, but can't do so without stopping people trying to build a project I know cannot be run within Codesandbox. And by turning off the compilation I guess would make the rest of the issues I am having moot.

For reference, this is the example I wanted: https://codesandbox.io/s/github/jthegedus/firebase-gcp-examples/tree/master/firebase-functions-es6-babel

[lbogdan]

Also related: #1254 (that was however solved by adding the Aurelia template).

[smolinari]

Has this been added? I can't find any note of it in the docs. Would be great if one could simply add an initialFilesToOpen (not just one) property with an array of file name paths in sandbox.config.json.

Scott

[ldanet]

This would be really useful to me. I keep running into this issue where I write code to demonstrate something, but I do so in a separate file to the main entry point since the entry point has distracting boilerplate code. When I give the link or open my own sandbox, it opens on the boilerplate code and it's confusing what I'm trying to demonstrate. I would like to see the relevant file with the demo when opening the sandbox, not the boilerplate.

[esr360]

Would love to be able to specify default file opened! +1

[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.

[karlhorky]

I suppose now a single opened file can be specified by the file URL parameter:

https://codesandbox.io/s/prismjs-forked-wu91d?file=/src/index.js

[jthegedus]

@karlhorky It does work as you describe, this being my initial example - https://codesandbox.io/s/github/jthegedus/firebase-gcp-examples/tree/master/functions-express?file=/package.json

However, the sandbox still installs all deps, and attempts to run code in package.json. I don't require any of these things to occur when I just want to render the source code in Medium. Unless I am reading the config options incorrectly - https://codesandbox.io/docs/embedding#embed-on-medium

While the title of the Issue is addressed, I had other requests in the body of the initial issue.

[SaraVieira]

That makes sense, can you please update the title of the issue so it's easier for us to scan through issues?

[sammychinedu2ky]

I have a sandbox for a docusaurus template. I had to create a sandbox.config.json file to run yarn start but code sandbox still runs yarn serve instead of the defined yarn start.
please can you help out with that?
here is a link to my sandbox. https://codesandbox.io/s/docu-test-jv4ir

[andrasbacsai]

@sammychinedu2ky could you please check https://github.com/codesandbox/codesandbox-templates/issues/134#issuecomment-718609713

[sammychinedu2ky]

thanks man I created a dev script and it worked.