codesandbox / codesandbox-importers Goto Github PK
View Code? Open in Web Editor NEWAll importers & exporters for CodeSandbox
License: Other
All importers & exporters for CodeSandbox
License: Other
The path
methods in Node output \ paths on Windows, so the directory modules object will end-up looking like this for a just created create-react-app
project:
[ 'public\\index.html',
'public\\manifest.json',
'src\\App.css',
'src\\App.js',
'src\\App.test.js',
'src\\index.css',
'src\\index.js',
'src\\registerServiceWorker.js',
'.gitignore',
'README.md',
'package.json',
'yarn.lock',
'src\\logo.svg',
'public\\favicon.ico' ]
This is a problem because the rest of the code has hard-coded Unix paths with forward slashes, so when it tries to find the default main file of 'src/index.js` it will fail. A minimal solution could be as simple as this:
diff --git a/packages/import-utils/src/create-sandbox/index.ts b/packages/import-utils/src/create-sandbox/index.ts
index 4f41c0a..8282178 100644
--- a/packages/import-utils/src/create-sandbox/index.ts
+++ b/packages/import-utils/src/create-sandbox/index.ts
@@ -67,7 +67,8 @@ export default async function createSandbox(
const packageJsonPackage = JSON.parse(packageJson.content);
const template = getTemplate(packageJsonPackage, directory);
- const mainFile = findMainFile(directory, packageJsonPackage.main, template);
+ const mainFileUnix = findMainFile(directory, packageJsonPackage.main, template);
+ const mainFile = process.platform === "win32" ? mainFileUnix.replace(/\//g, "\\") : mainFileUnix;
if (!directory[mainFile]) {
throw new Error(
I'll push a PR so that we can take the technical discussion there.
Also, when it fails because of this it does throw an Error, but the console message Uploading files to CodeSandbox
keeps going, giving the false impression that the process can still continue, when it is actually hanged.
(apparently no one is using the CLI on Windows? 😅 )
codesandbox
doesn't seem to support HTTP proxies. For those of us behind corporate networks, this can be painful.
Ideally, codesandbox
would look at the following environment variables in order to determine proxy settings:
FTP_PROXY
HTTP_PROXY
HTTPS_PROXY
ftp_proxy
http_proxy
https_proxy
no_proxy
NODE_TLS_REJECT_UNAUTHORIZED
Additionally, command-line parameters to control proxy behavior would also be useful.
Originally posted by @roundnutz14 in microsoft/AADConnectConfigDocumenter#30
By default, the entry file needs to be named index.js however others might name it main.js or even index.jsx (different extension name). Would it be possible to specify the full file name in an input field for the entry file?
Just a feature to be considered. I love the project and the site and am really looking forward to seeing it grow as a platform.
Is it possible to import to a private project with the codesandbox-cli?
got: missing verification of requested URLs allows redirects to UNIX sockets [services-management-platform-default] fixed in sindresorhus/got#2047
Presently, the usage information that shows up along with the help text is as below:-
Usage: Usage: codesandbox [options] [command]
Usage: codesandbox [command] [options]
Hi, @CompuIves @sbinlondon,
I noticed that a vulnerability is introduced in [email protected]:
Vulnerability CVE-2020-28168 affects package axios (versions:<0.21.1): https://snyk.io/vuln/SNYK-JS-AXIOS-1038255
The above vulnerable package is referenced by [email protected] via:
[email protected] ➔ [email protected]
Since [email protected] (3,338 downloads per week) is referenced by 93 downstream projects (e.g., @patternfly/react-docs 4.21.35 (latest version), trafimage-maps 1.5.36 (latest version), @antv/gatsby-theme-antv 1.1.8 (latest version), storybook-addon-preview 2.1.2 (latest version), mobility-toolbox-js 1.3.5 (latest version)), the vulnerability CVE-2020-28168 can be propagated into these downstream projects and expose security threats to them via the following package dependency paths:
(1)@antv/[email protected] ➔ [email protected] ➔ [email protected]
(2) @pxwlab/[email protected] ➔ [email protected] ➔ [email protected]
......
If [email protected].* removes the vulnerable package from the above version, then its fixed version can help downstream users decrease their pain.
Given the large number of downstream users, could you help update your package to remove the vulnerability from [email protected] ?
In [email protected], maybe you can kindly try to perform the following upgrade(not crossing major version) :
axios ^0.18.1 ➔ ^0.21.1
;
Note:
[email protected](>=0.21.1) has fixed the vulnerability CVE-2020-28168.
Thank you for your attention to this issue.
Best regards,
^_^
fetch('./super.tar')
.then(response => response.body)
.then(body => body.pipeThrough(unpack).pipeTo(createSandbox))
This removes the overhead of writing to file system, by streaming in memory. It also adds flexibility to the API and performance gains.
Thanks for the excellent work @CompuIves and team. Kindly share your thoughts.
On Windows Bash (WSL), after clicking yes to "We will open CodeSandbox" and then yes to "We will open CodeSandbox to finish the login process", it shows a link to the login but the browser doesn't load. It also doesn't work manually as the program exits before allowing the user to input a token.
The browser probably isn't launching because on WSL, windows apps must have .exe appended like chome.exe. I'm able to click on the provided link, log into Github and get a token, but unfortunately I can't input it because the program has already exited.
Hi,
I'm using the CLI and it gave me this error trying to import my project:
[error] This project is too big, it contains 595 files which is more than the max of 120.
And it then continues to show
Uploading files to CodeSandbox
That seems to be a bug in the CLI.
I've also become a patron to lift limits. Granted, I've chosen the lowest payment ($5 a month) and I'm still stuck with the same hurdles to get my code uploaded to CodeSandbox. Are there different levels of patronage? Are different limits lifted with different patron contributions? Needless to say, if there is, it is all less than transparent. That also needs fixing.
Scott
Hello.
I would like to create a CodeSandbox with some assets that are not hosted anywhere using define api.
So I want to use something like Uint8Array and datauri.
As follows.
const parameters = getParameters({
files: {
"package.json": {
content: {
dependencies: {
react: "latest",
"react-dom": "latest",
},
},
} as any,
"fromDataURI.png": {
content:
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==",
isBinary: true, // something else
},
"fromBuffer.jpg": {
content: someUint8Array,
isBinary: true,
},
},
});
Is there plan to realize these or any ways which we can be replicated?
The getParameters
method currently requires the value under content
(which is a property of a file) to be a string
:
But in the docs, it's specified that content
under package.json
can be an object.
Either the documentation or the type signature on getParameters
should be updated accordingly. I currently can't use an object in TS.
codesandbox-importers/packages/types/index.d.ts
Lines 24 to 39 in ad37601
I often publish a local version of an example I have so that I can revert the changes, but there's some files commonly ignored that I need to remove from the final sandbox, or even prevent the publish if I don't remove them first. A couple examples are:
I could see even .env
, which would be even more problematic.
When gathering the files to publish, it should first check git to list any files that are ignored in the current repo and not publish those.
I'm happy to do a PR if it's clear where to add these checks + will be approved.
Thanks!
similar issue: #67
After installing codesandbox package I have some vulnerabilites on my project.
Here is npm audit
report:
# npm audit report
axios <=0.27.2
Severity: high
Axios vulnerable to Server-Side Request Forgery - https://github.com/advisories/GHSA-4w2v-q235-vp99
axios Inefficient Regular Expression Complexity vulnerability - https://github.com/advisories/GHSA-cph5-m8f7-6c5x
Axios Cross-Site Request Forgery Vulnerability - https://github.com/advisories/GHSA-wf5p-g6vw-rhxx
Depends on vulnerable versions of follow-redirects
fix available via `npm audit fix --force`
Will install [email protected], which is a breaking change
node_modules/axios
codesandbox >=1.0.0
Depends on vulnerable versions of axios
Depends on vulnerable versions of pacote
Depends on vulnerable versions of update-notifier
node_modules/codesandbox
follow-redirects <=1.15.5
Severity: high
Exposure of Sensitive Information to an Unauthorized Actor in follow-redirects - https://github.com/advisories/GHSA-pw2r-vq6v-hr8c
Exposure of sensitive information in follow-redirects - https://github.com/advisories/GHSA-74fj-2j2h-c42q
Follow Redirects improperly handles URLs in the url.parse() function - https://github.com/advisories/GHSA-jchw-25xp-jwwc
follow-redirects' Proxy-Authorization header kept across hosts - https://github.com/advisories/GHSA-cxjh-pqwp-8mfp
fix available via `npm audit fix --force`
Will install [email protected], which is a breaking change
node_modules/axios/node_modules/follow-redirects
got <11.8.5
Severity: moderate
Got allows a redirect to a UNIX socket - https://github.com/advisories/GHSA-pfrx-2q88-qq97
fix available via `npm audit fix`
node_modules/codesandbox/node_modules/got
package-json <=6.5.0
Depends on vulnerable versions of got
node_modules/codesandbox/node_modules/package-json
latest-version 0.2.0 - 5.1.0
Depends on vulnerable versions of package-json
node_modules/codesandbox/node_modules/latest-version
update-notifier 0.2.0 - 5.1.0
Depends on vulnerable versions of latest-version
node_modules/codesandbox/node_modules/update-notifier
http-cache-semantics <4.1.1
Severity: high
http-cache-semantics vulnerable to Regular Expression Denial of Service - https://github.com/advisories/GHSA-rc47-6667-2j5j
fix available via `npm audit fix`
node_modules/make-fetch-happen/node_modules/http-cache-semantics
make-fetch-happen 2.1.0 - 6.1.0
Depends on vulnerable versions of http-cache-semantics
node_modules/make-fetch-happen
pacote 2.0.0 - 9.5.12
Depends on vulnerable versions of cacache
Depends on vulnerable versions of make-fetch-happen
Depends on vulnerable versions of ssri
node_modules/pacote
ssri <=6.0.1
Severity: high
Regular Expression Denial of Service in ssri - https://github.com/advisories/GHSA-325j-24f4-qv5x
Regular Expression Denial of Service (ReDoS) - https://github.com/advisories/GHSA-vx3p-948g-6vhq
fix available via `npm audit fix`
node_modules/make-fetch-happen/node_modules/ssri
node_modules/ssri
cacache 10.0.4 - 11.0.0 || 7.0.0 - 9.3.0
Depends on vulnerable versions of ssri
Depends on vulnerable versions of ssri
node_modules/cacache
node_modules/make-fetch-happen/node_modules/cacache
12 vulnerabilities (5 moderate, 7 high)
To address issues that do not require attention, run:
npm audit fix
To address all issues (including breaking changes), run:
npm audit fix --force
Is it possible to update vulnerable packages ?
I'd like to put some example code to CodeSandbox but I do edit and maintain it with vscode and git and just to deploy it to CodeSandbox. Is is possible to do that without generating new CodeSandbox URL? Thanks.
If I use the CodeSandbox importer directly by visiting https://codesandbox.io/s/github and pasting in https://github.com/miquelvir/centrifuga4, it fails.
"Something went wrong. Unable to import sandbox at the moment. Please try again later."
original issue: dferber90/githubbox#9 (comment)
It would be super helpful to have the ability to not only import, but to export sandbox locally (a la git clone) by running codesandbox <sandboxName> <destination>
I can see it is possible to add node module dependencies, but is it also possible to add external (non-npm) dependencies when creating sandboxes dynamically via the API?
I was wondering if there's a publicly accessible API based on the git-extractor package?
Seems there's the Define API but it's a bit limited. I'm more interested in being able to hit the /define/git/github/:username/:repo/:branch/commit/:commitSha*
endpoint.
Any ideas?
I was thinking that adding Koa to the templates would be a nice addition to the Server side templates.
I would personally look into this if there is some interest. It would give me something to get my hands dirty in OSS code for the first time.
Thank you everyone ahead of time.
Is there a way to update a specific sandbox with code from my local machine? It looks like the Codesandbox CLI always creates a new sandbox. And the APIs don't seem to have a way to do the same.
Is there a POST https://codesandbox.io/api/v1/sandboxes/:sandbox-id
or something?
Thanks!
Currently, when the template of a project cannot be inferred via a big stack of conditions, create-react-app
is chosen as a default.
Particularly with the new server-side evaluation support, this may not be a reasonable or safe default anymore. Perhaps node should be the new default, with create-react-app
being only reasonable in the presence of react or cra as a (dev)dependency?
Hey there,
I was wondering if there could be an option to publish a sandbox as cloud sandbox.
As far as I can tell, there is only the possibility to publish browser sandboxes. However, via the API it is possible to publish a cloud sandbox (by passing v2: true
).
Maybe this could be a configuration in the sandbox.config.json
file or maybe as a command flag.
I have a project on github https://github.com/edkalina/jsx-decorator-sandbox. It is ejected creater-react-app project with replaced babel config (It doesn't use create-react-app preset). Also it has patched babel packages in dependencies, specified this way:
{
"@babel/helper-builder-react-jsx": "https://github.com/edkalina/babel#babel-helper-builder-react-jsx",
"@babel/parser": "https://github.com/edkalina/babel#babel-parser"
}
Locally it works as expected: patched babel packages are installed and project builds correctly.
But after importing it to codesandbox I can see parsing errors (looks like original babel was used).
Is it a bug? Is my case unsupported?
Per this message thread: https://codesandboxapp.slack.com/archives/CHM6FA0TA/p1619782410183900?thread_ts=1619780139.183000&cid=CHM6FA0TA
pullInfo
a separate endpoint in the importer, so we call /pullInfo/:username/:repo/pull/:pullNumber
instead of /info/:username/:repo/pull/:pullNumber
and we'll prevent conflicts with the import sandbox endpointAdditionally, we do want to be able to import a specific PR's files as a sandbox, so work should be done on the server afterwards to make sure this is happening.
Hello!
@CompuIves We may have found a bug in your repository.
This bug was found while issuing the following command:
curl -D- http://localhost:2000/git/github/info/user/%1F/tree/branch/path
Making this call resulted in the following response:
HTTP/1.1 500 Internal Server Error
Content-Type: application/json; charset=utf-8
Content-Length: 54
Date: Thu, 30 Apr 2020 10:50:44 GMT
Connection: keep-alive
{"error":"Request path contains unescaped characters"}
Making this call resulted in the following stack trace:
TypeError [ERR_UNESCAPED_CHARACTERS]:
Request path contains unescaped characters
at new ClientRequest (_http_client.js:127:13)
at Object.request (http.js:38:10
at Object.request (/src/node_modules/@sentry/node/dist/integrations/http.js:65:18)
at RedirectableRequest._performRequest (/src/node_modules/axios/node_modules/follow-redirects/index.js:128:24)
at new RedirectableRequest (/src/node_modules/axios/node_modules/follow-redirects/index.js:54:8)
at Object.wrappedProtocol.request (/src/node_modules/axios/node_modules/follow-redirects/index.js:252:14)
at dispatchHttpRequest (/src/node_modules/axios/lib/adapters/http.js:131:25)
at new Promise (<anonymous>)
at httpAdapter (/src/node_modules/axios/lib/adapters/http.js:18:10)
at dispatchRequest (/src/node_modules/axios/lib/core/dispatchRequest.js
To resolve this issue, we recommend URL encoding all paths and queries before making HTTP calls.
Originally posted by @roundnutz14 in microsoft/AADConnectConfigDocumenter#30
Originally posted by @roundnutz14 in #82
I can't find any documentation on how to do it
I opened this issue on the client but maybe I should do it here as well:
When trying to create a sandbox from a Github repo, and in a specific path, instead of only bringing files from the path, it's randomly bringing a folder that is on a directory above the specified path.
The folder marked below should not have been imported (It's in the upper directory):
I'm trying to embed a working example in our guides but the sandbox will not work because of this additional unwanted folder.
Create a new sandbox using Github import from this path:
https://github.com/Basis-Theory/basis-theory-js-examples/tree/master/collect-cards-with-individual-elements
Software | Name/Version |
---|---|
Сodesandbox | Web |
Browser | Brave/1.39.111 |
Operating System | MacOS 12.4 |
When trying to deploy my directory via
yarn global add codesandbox
codesandbox ./
I am receiving this error:
/Users/sam/.config/yarn/global/node_modules/codesandbox/lib/utils/log.js:10
console.log(" " + chalk_1["default"].blue.bold("Code") + chalk_1["default"].yellow.bold("Sandbox") + " " + chalk_1["default"].bold("CLI"));
^
TypeError: Cannot read property 'blue' of undefined
at Object.logCodeSandbox (/Users/sam/.config/yarn/global/node_modules/codesandbox/lib/utils/log.js:10:43)
Using node v10.7.0 (npm v6.2.0)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.