This fork is mainly to adapt to Tango and work as its sandbox engine, so most of the modifications are focused on Sandpack.

Build

yarn install
yarn build:deps
yarn build:sandpack

Built files will be in www/.

Deploy

Once built, use Caddy to serve static files. A Caddyfile is already in the repo.

Or you can download prebuild assets from releases and Caddyfile manually. Create a folder www next to Caddyfile, extract compressed tarball into www/, and run Caddy.

caddy run

Or you can use Docker to build and deploy.

docker build -t tango-codesandbox .
docker run -p 8080:8080 tango-codesandbox

Local testing

Tango and Sandpack requires to be run in HTTPS. If you want to test locally, assign any domain in your hosts file and resolve to 127.0.0.1, then change Caddyfile and replace :8080 to the domain. Once you've done, Caddy should be run on 8443 with self-signed HTTPS.

docker run -p 8443:8443 tango-codesandbox

Changes

Here are the main modifications applied in this fork, to make it run more flawless with Tango.

• Set document.domain to Second-level Domain, to make sure Tango can listen to fired events in iframe.
  • This requires to add Origin-Agent-Cluster: ?0 response header for Chrome 115.
• Force running Babel in multi-thread mode.
• Sandbox config is now in sandbox.config.json rather than package.json.
• Resolve alias for ESM, and can be set as alias in sandbox.config.json.
• Support externals feature like webpack, and can be set as externals and externalResources in sandbox.config.json.
• Support passing evaluateJavaScript to run at head, and can be set in sandbox.config.json.
• sandboxId can be set in sandbox.config.json
• Support less module (.module.less)

---

 

An instantly ready, full-featured online IDE for web development on any device with a browser. Enabling you to start new projects quickly and prototype rapidly. With CodeSandbox, you can create web apps, experiment with code, test ideas, and share creations easily.

Other CodeSandbox repositories

CodeSandbox consists of several separate servers, some of which are open sourced.

• Client: the web application
• Server: the Phoenix API server
• Nginx: Nginx config files
• Git Extractor: responsible for extracting the source from a GitHub repository
• CLI: the CLI to upload a CodeSandbox project from your command line

Documentation

You can find our documentation on our website

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Ives van Hoorne 💬 📝 🐛 💻 🎨 📖 💡 🚇 👀 ⚠️ 🔧	Donavon West 💻	Jeff Allen 💻	Ben Gummer 💻	James Gillmore 💻 🐛	Ade Viankakrisna Fadlil 💻	Tushar Sonawane 💬 💻 📖 🤔
Johann Hubert Sonntagbauer 🐛 💻	Joachim Seminck 💻	Subramanya Chakravarthy 💻	Robert (Robby) O'Connor 🚇	Bogdan Luca 🐛 💻	Divjot Singh 💻	Jason Nall 💻
Lionel 💻 🎨	Philipp Brumm 💻	Valentin Hervieu 💻 🐛	Anenth 💻 🎨 🤔	Dony Sukardi 🐛 💻	Geoffrey Dhuyvetters 🎨 💻	Eswar Yaganti 💻 🚇
Frank Tan 💻	Bilal Budhani 💻	El Juli 💻	Arthur Denner 💻 📖	Radi Cho 🐛 💻 🤔	Xiaoyi Chen 💻	Gautam Arora 💻 🤔
Haroen Viaene 💻 🎨	Nick Nisi 💻	Abhishek Jakhotiya 💻 🐛	Tom Kühl 💻	br1anchen 💻	Daniel Hsing 💻	Maciej Kasprzyk 💻
Robert Heessels 📖	Ryan P. C. McQuen 💻	Chris 💻	Drew Smith 💻	Eric Berry 💻	Hum4n01d 💻	Malachi Willey 💻
Michel Weststrate 💻	Oleg 💻	Paul Sherman 🐛 💻	Ro Savage 💻	Sam Denty 💻	Zephraph 💻	Josh Waller 🐛 💻 📖
Joe Ng'ethe 💻	Carles Codony 💻	Vytenis 💻	Manuel Dugué 🐛 💻	Demian Dekoninck 💻	Drake Costa 💻	Marko Stijak 💻
Ilya 💬 🤔	Emerson Laurentino 💻 🐛	Aaron Reisman 🐛 💻 📦	Colton Colcleasure 💻 🐛	PJ Walker 🐛 💻	Satya Rohith 💻 📖	Melanie Seltzer 💻
ZYSzys 📖	Sara Vieira 💻 🎨 🤔	François Chalifour 🐛 💻	Abdullah 💻 🎨	Jon Short 💻	Daniel Vu 💻	Vivek Nayyar 💻
Bob Ziroll 📖	Alexander Lichter 💻	Chiamaka Nwolisa 💻	Steve Shreeve 💻	Robert Wildling 💻	Ben Conolly 💻	Wei-Wei Wu 💻
Alex Casillas 💻	Brian Ng 💻	Mike North 💻	Róbert Oroszi 💻	Adrià Fontcuberta 💻	António Afonso 💻	Artem Sapegin 💻
Brian Bartholomew 💻	Christian Alfoni 💻	David Baumgold 💻	Evgeny Rodionov 💻	Fathy Boundjadj 💻	Fatih Altinok 💻	Grant Timmerman 💻
James 💻	Kelson448 💻	Ken Snyder 💻	Kent C. Dodds 💻	Khaled Garbaya 💻	Liu 💻	Maciej 💻
Matthew Gadd 💻	Miguel Carvajal 💻	Olaolu Olawuyi 💻	Pete Nykänen 💻	Phil Hughes 💻	Rodrigo Pombo 💻	Sai Ram Kunala 💻
The Gitter Badger 💻	Tim Whitbeck 💻	Wei Zhu 💻	Wil Wilsman 💻	abnessor aka findoff 💻	cottom 💻	gitname 💻
Bruce Xu 💻	jess 💻	Juliette Prétot 💻	Victoria Bergquist 💻 📖	Samrith Shankar 💻	Mahendra Hirapra 💻	Rabin Gaire 💻
Neville Mehta 💻	Vasiliy 💻	Romain Lanz 💻	LiBe 💻	Jeremy Bolding 💻	Evan Bacon 💻	Michaël De Boey 📝 🐛 💻 📖 🚇 🔧
gabeeden 💻	Tiffany White 💻	James Bedford 💻	Scott 💻	Dutiyesh Salunkhe 💻	Halit Ogunc 💻	Yash Joshi 💻
Yehor 💻	Jens de Rond 🐛 💻	Benjamin Schachter 📖	Rafael 🐛 💻	baremetalfreak 💬 🐛 💻	Javed 💻	R4M80MRX 💻
Dr. Derek Austin [aka dj D-REK from Richmond, VA] 🐛	Sid 💻	Yeison Daza 💻	Shriram Balaji 💻	Thomas Dillard 💻	Chinmay Chaudhary 💻	Sakthivel Sengodan Sapient 💻
Nabeelah 💻	vanya829 💻	Tane Morgan 💻	Het Patel 💻	Ivan Medina 💻	Gobinath-Manokaran 💻	Abdul Rauf 💻 📖
milap1296 💻	yevhen orlov 💻	Nilesh Patel 💻	Pooja Gaur 💻	Sajad Hashemian 💻	Carlos Galarza 📖	soorajshankar 💻
Matthias Christoph Munder 🐛 💻	Anurag Hazra 💻	johansenja 📖	Shodipo Ayomide 📖	Akash Joshi 💻	Oleksandr Fediashov 🐛 💻	John D. 💻
Nino 📖	Saurabh Daware 💻 🔌	Pablo Varela 💻	Ryan Waldon 💻	Andrew Cherniavskii 💻	NullVoxPopuli 💻 🖋 🚧	Josh 📖
Stefan Retief 🐛 💻	Aditya 🐛 💻	B2D1 📖	Artem 💻	Hugo Wiledal 🐛 💻	Sai Hari 💻

Thanks

Thanks to Chromatic for providing the visual testing platform that helps us catch unexpected changes.