Documentation: How to self-host everything on an internal network

[GrossDesignCo]

Hey folks, starting this as a docs request since I think what we're running into is just a lack of knowledge.

We have an internal documentation site and packages, and have a hard requirement to keep everything in our internal network.

We've tried setting up Sandpack locally with a self-hosted bundler pointing to our (also internal) npm registry (specifically on Artifactory by JFrog), but keep running into either:

Unable to establish connection with the sandpack bundler. Make sure you are online or try again later. If the problem persists, please report it via [email](mailto:[email protected]?subject=Sandpack%20Timeout%20Error) or submit an issue on [GitHub.](https://github.com/codesandbox/sandpack/issues)

if we use our bundler hosted at https://localhost:1234 or

Could not fetch dependencies, please try again in a couple seconds: 

if we use the default. Obv we want to stick with the self-hosted on because of the 100% internal requirement, but just for reference.

I have the bundler up on localhost:1337, just seeing a white page when navigating to it, but it's there & was created following the Hosting the Bundler instructions.

We're using SandpackProvider like so:

<SandpackProvider
      files={files}
      options: {
        externalResources: ['https://our.internal.cdn.com/design-system/index.css'],
        bundlerURL: 'https://localhost:1234',
      }
      customSetup={{
        dependencies: { '@company/design-system-react': '^8.0.0', classnames: '^2.x.x' },
        npmRegistries: [
          {
            enabledScopes: ['@company/design-system-react'],
            limitToScopes: true,
            registryUrl:
              'https://our.internal.registry.com/design-system',
          },
        ],
      }}
      ...
    >
    ...

Everything else is working smoothly, it's just the private packages that we're running into a brick wall with.

I've seen bits and pieces in the Sandpack docs like Hosting the Bundler and Private Packages.

A docs page for this use case, or an example repo would be pretty awesome.

Also for this use-case, are we missing anything obvious?

[GrossDesignCo]

As a followup, are there any standalone ways to test the bundler & make sure it's working, and that it can connect to the private registry?

[GrossDesignCo]

Additional update, if I remove the npmRegistries and our private dependency, the self-hosted bundler appears to work normally (it properly imports public packages like classnames & runs just fine), so it seems like the missing link is figuring out how to get our internal registry and the bundler to talk to each other.

[PeanutQAQ]

Similarly, as a staff member in my company, I was trying to plug in sandpack to our team's front-end component library, and the biggest problem I encountered was how to access the company's own npm registry。

[danilowoz]

I'll follow up as soon as I can. Currently, we're making a few changes to the private-package mechanism, which might solve this issue.

[GrossDesignCo]

Thanks Dan! Any timeline?

The main issue for us right now is that the errors & testability are really opaque, so it's hard to tell what's working & what's not. Currently I want to work with our team that maintains the internal repository, but I don't know what to ask them about or how to articulate the problems we're running into.

Any advice there?

[GrossDesignCo]

I guess another angle on this question, what should folks do when their registry is private & requires a login/auth token?

[GrossDesignCo]

Another interesting chunk, one set of errors we've been seeing are CORS errors, is there any way to pass headers in with the registryUrl?

[danilowoz]

Here we go, let me try to clarify each question you asked here.

From the original issue description I can spotted a mistake on the snippet provided:

<SandpackProvider
    customSetup={{
      dependencies: { '@company/design-system-react': '^8.0.0', classnames: '^2.x.x' },
      npmRegistries: [
        {
--        enabledScopes: ['@company/design-system-react'],
++        enabledScopes: ['@company'], // this must include only the dependency scope
          limitToScopes: true,
          registryUrl: 'https://our.internal.registry.com/design-system',
        },
      ],
    }}
  >

are there any standalone ways to test the bundler

You can run a simple sandbox pointing to your bundler. Actually, I think you already did it, right?

<Sandpack options={{ bundlerURL: "https://localhost:1234/" }} />

what should folks do when their registry is private & requires a login/auth token?

npmRegistries prop also supports a registryAuthToken property, and this will be attached to the registry request as an authorization header. Recently, we introduced a new way to consume private-packages using CodeSandbox infrastructure, and you can find all the details here

Another interesting chunk, one set of errors we've been seeing are CORS errors, is there any way to pass headers in with the registryUrl?

Interesting. Currently, there is no way to pass a header, but this is very curious because it most of the CORS issues I have seen so far were caused by the registry host. Can you check that?

---

Sorry for the late answer. I was working on some priorities issues, but I hope I will be more responsive now.

[GrossDesignCo]

TY for the followup! Y'all are awesome people.

I updated the scope, ty for that callout. And yep, we do have just a local docker container running the bundler.

Interestingly, I stopped seeing CORS errors after updating the scope, now I only see an error on our one package coming from the internal registry, and it's an ERR_CONNECTION_RESET, which I'm chatting through with the team that maintains that.

Updated config for reference:

<SandpackProvider
      files={files}
      options: {
        externalResources: ['https://our.internal.cdn.com/design-system/index.css'],
        bundlerURL: 'https://localhost:1234',
      }
      customSetup={{
        dependencies: { '@company/design-system-react': '^8.0.0', classnames: '^2.x.x' },
        npmRegistries: [
          {
            enabledScopes: ['@company'],
            limitToScopes: true,
            registryUrl:
              'https://our.internal.registry.com/design-system',
          },
        ],
      }}
      ...
    >
    ...

Also worth noting, when we set this registry via an .npmrc file & npm i locally and in ci, it works without issue.

[GrossDesignCo]

Also the new flow for private packages is really neat, but we have a hard requirement to not let anything leave the internal network (our infosec team is pretty paranoid), so I don't think we can take advantage of any pro team features in codesandbox directly.

[GrossDesignCo]

This is probably a silly note, but if I change the request's mode to no-cors it goes through.

Here I've just copied the request as a fetch & dumped it back into the console:

[PeanutQAQ]

@danilowoz Thank you so much for the timely follow-up questions, this is so cool.

The new private repository solution looks cool, but it's still hard to get it off the ground in the enterprise, is it the internal implementation of sandpack that makes it impossible to use private repositories directly?

Looking forward to making some adjustments.

[danilowoz]

is it the internal implementation of sandpack that makes it impossible to use private repositories directly?

Sure, you can learn more about it here

[zhang-stone]

I encountered a similar issue. I followed the steps for Self-host private packages and configured "Self-host the proxy" using the example demo. Everything seemed to work fine, but I received the following error. If I remove the npmRegistries configuration, everything works normally.我遇到了类似的问题。我按照自托管私有包的步骤进行了配置，并使用示例演示来配置“自托管代理”。一切似乎都正常工作，但是我收到了以下错误。如果我删除 npmRegistries 配置，一切都正常工作。 We're using Sandpack so: 我们正在使用 Sandpack，所以：

 const Index = (): JSX.Element => (
  <div className="container-box">
    <Sandpack
      customSetup={{
        dependencies: {
           "antd": "latest",
         },
        npmRegistries: [
          {
            limitToScopes: true,
            registryUrl: "http://localhost:4000/",
            proxyEnabled: false,
            enabledScopes: ["antd"],
          },
        ],
      }}
  files={{
    "/App.js": `import { Button, Flex  } from 'antd';
        export default function App() {

  return (
    <Flex gap="small" wrap>
    <Button type="primary">Primary Button</Button>
    <Button>Default Button</Button>
    <Button type="dashed">Dashed Button</Button>
    <Button type="text">Text Button</Button>
    <Button type="link">Link Button</Button>
  </Flex>
  );
}
`
  }}
  template="react"
    />
  </div>
);

export default Index;

report errors 报告错误

This means sandpack cannot connect to the runtime or your network is having some issues. Please check the network tab in your browser and try again. If the problem persists, report it via email or submit an issue on [GitHub.](https://github.com/codesandbox/sandpack/issues)
ENV: create-react-app
ERROR: TIME_OUT

2.18.2 has this problem, I'm using 2.14.3 and everything works fine!