Comments (6)
alexnm
commented on June 8, 2024
1
Sure, anytime.
If the steps work for you, feel free to submit a PR to the readme of sandpack-client, with a section after the Why is the bundler hosted externally. every contribution is much appreciated at this point, since we just started testing this project.
And also, let us know what you build with it, we'd love to showcase some of the community projects around sandpack
from sandpack.
alexnm
commented on June 8, 2024
1
right, missed one thing, first time you setup the codebase you need after yarn a yarn build:deps, this builds some of the packages in the monorepo so lerna can use the dist folders to link them. will update the initial comment as well
from sandpack.
alexnm
commented on June 8, 2024
Yes. I will try to document this in the sandpack-client readme. Here's the short version
- the bundler is part of the codesandbox-client codebase: https://github.com/codesandbox/codesandbox-client
- run
yarnto install dependencies in the root folder and thenyarn build:depsto build some of the packages lerna needs for internal links - then you can create your instance of sandpack with
yarn build:sandpack - this creates a
wwwfolder in the root folder (I know, not the best naming) - that
wwwfolder is thesandpackfolder thatsandpack-clientconnects to on{version}-sandpack.codesandbox.io - once you have this hosted on your end, you can pass
bundlerURLwhen callingnew SandpackClient(iframe, sandboxInfo, { bundlerURL: 'https://your-hosted-version' } ) - or, if you use
sandpack-react, you can bundlerURL in the options of theSandpackpreset
from sandpack.
vipulbhj
commented on June 8, 2024
Hey @alexnm
Thank you so much for all your help 😄
I can help with the documentation, let me know if you need any
from sandpack.
vipulbhj
commented on June 8, 2024
Sounds good, I will keep you in the loop as to how our experiments go :)
from sandpack.
vipulbhj
commented on June 8, 2024
Hey @alexnm , I am getting this error while running the build command as you had mentioned.
➜ yarn build:sandpack
yarn run v1.22.10
$ lerna run build:sandpack-sandbox --scope app --stream
lerna notice cli v3.16.4
lerna info versioning independent
lerna info filter [ 'app' ]
lerna info Executing command in 1 package: "npm run build:sandpack-sandbox"
app: > app@0.1.1 build:sandpack-sandbox /Users/vipulbardwaj/Work/POCs/codesandbox-client/packages/app
app: > cross-env NODE_ENV=production SANDPACK=true SANDBOX_ONLY=true node scripts/build.js && cross-env SANDBOX_ONLY=true yarn copy-assets
app: internal/modules/cjs/loader.js:638
app: throw err;
app: ^
app: Error: Cannot find module '@codesandbox/common/lib/version'
app: at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
app: at Function.Module._load (internal/modules/cjs/loader.js:562:25)
app: at Module.require (internal/modules/cjs/loader.js:692:17)
app: at require (internal/modules/cjs/helpers.js:25:18)
app: at Object.<anonymous> (/Users/vipulbardwaj/Work/POCs/codesandbox-client/packages/app/config/webpack.prod.js:13:17)
app: at Module._compile (internal/modules/cjs/loader.js:778:30)
app: at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
app: at Module.load (internal/modules/cjs/loader.js:653:32)
app: at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
app: at Function.Module._load (internal/modules/cjs/loader.js:585:3)
app: at Module.require (internal/modules/cjs/loader.js:692:17)
app: at require (internal/modules/cjs/helpers.js:25:18)
app: at Object.<anonymous> (/Users/vipulbardwaj/Work/POCs/codesandbox-client/packages/app/scripts/build.js:10:16)
app: at Module._compile (internal/modules/cjs/loader.js:778:30)
app: at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
app: at Module.load (internal/modules/cjs/loader.js:653:32)
app: npm ERR! code ELIFECYCLE
app: npm ERR! errno 1
app: npm ERR! app@0.1.1 build:sandpack-sandbox: `cross-env NODE_ENV=production SANDPACK=true SANDBOX_ONLY=true node scripts/build.js && cross-env SANDBOX_ONLY=true yarn copy-assets`
app: npm ERR! Exit status 1
app: npm ERR!
app: npm ERR! Failed at the app@0.1.1 build:sandpack-sandbox script.
app: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
app: npm ERR! A complete log of this run can be found in:
app: npm ERR! /Users/vipulbardwaj/.npm/_logs/2021-03-16T07_42_43_406Z-debug.log
lerna ERR! npm run build:sandpack-sandbox exited 1 in 'app'
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.from sandpack.
Related Issues (20)
- Update Next.js template and node version to suport next.js app router template HOT 1
- Prioritization error regarding custom style
- Failed to get shell by ID
- Is it possible to load local files HOT 2
- Throw a string in SandpackTests will make the component crash
- Page becomes unresponsive HOT 4
- How to "host" the app HOT 2
- Invalid left-hand side in assignment HOT 1
- Full Reset on any state changes in React Codesandbox HOT 1
- %c%s & color: rgba(125, 125, 125, 0.5) in console.log <Sandpack/> (strictMode?) HOT 1
- Changing decorators recreates Codemirror HOT 1
- ts-node template HOT 1
- Broken example with Sandpack Console HOT 1
- Documentation: Sandpack Layout does not accept a theme prop. But the docs says it does. Also the link is broken showing the example. HOT 3
- Broken Korean text in sandpack-react test error messages
- Custom Jest asymmetric matchers break in SandpackTests HOT 1
- Documentation: Hosting the Bundler HOT 2
- bee
- support images
- add react-vite and react-vite-ts to template definition HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from sandpack.