codesandbox / codesandbox/codesandbox-client

Ability to host sandpack client at relative path

Open
#8,251 2 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
13.6k
Forks
2.4k
Avg merge
6d 19h
Merged PRs (30d)
2

Description

Hi there! I'm trying to self-host the codesandbox client (yarn build:sandpack) under a relative path in my domain. I want to do this to bypass some cross-origin iframe restrictions and interact with the compiled javascript code. I tried changing publicPath and setting CODESANDBOX_ROOT, but still ran into some things I had to manually patch. In particular I had to run the following sed commands (I hosted the client under the /www subpath):

yarn build:sandpack
LC_ALL=C find . -type f -exec sed -i '' 's/\/static/\/www\/static/g' {} +
LC_ALL=UTF-8 find . -type f -exec sed -i '' 's/\/babel-transpiler.e23522c3.worker.js/\/www\/babel-transpiler.e23522c3.worker.js/g' {} +

I'd imagine as I use more features (e.g. scss compilers) I'd have to run more sed commands which isn't ideal. Is there something I'm missing on how to do this? If not, could a way be added to host the sandpack client under a subdomain?

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the yarn build:sandpack entry point and inspect how publicPath and CODESANDBOX_ROOT affect generated asset and worker URLs. Verify the built client can be hosted under a relative subpath such as /www without the reported sed replacements, including the babel-transpiler worker path.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
build-system, devtools
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.