Documentation: How to import dependencies from private registry?

[WangJiaoJo]

Hi,

Thanks for this amazing product which helping me to build an online code IDE.

I have some questions about the registry. We want to include the dependencies from our private registry of JFrog and we normally use .npmrc to set the auth_token and registry link for our local development. But we hope to add these dependencies from JFrog to the sandbox and I have checked all the documentation when setting the registry and could you please provide some help?

I referred to the guideline page about how to set the private registry and checked the issue of #553 . So my questions are

1. Do I need to use Verdaccio? If yes, I got the error of Error: config_path is required even if there is theconfig_path: "./config.yaml",. Do you know the possible reasons?
2. After referring to the issue of #553 and upgrade to 1.5.4, I am not sure the correct configuration for the 'npmRegistries' because I need to delete the proxyEnabled key which report an error.

customSetup={{ dependencies: { "@scope/package-name": "4.2.0" }, npmRegistries: [ {

        enabledScopes: ["@scope"],
        limitToScopes: true,
        registryUrl: "https://url", 
        registryAuthToken: "token"
      },
    ],
  }}

I am looking forward to your reply. Thank you!

[danilowoz]

Hey @WangJiaoJo

1. Do I need to use Verdaccio?

Not really; we could achieve the same result by building your own server and proxy the dependencies. However, we recommend Verfaccio because it's the easiest way to go once it already implements the proxy and supports GitHub packages and NPM as default.

Unfortunately, I can't help to debug without a reproducible example. But you can try to use the following example project, which we use internally for testing, and it should be the straightforward sample to follow https://github.com/codesandbox/sandpack/tree/main/examples/custom-npm-registry

2. After referring to the issue of

The correct configuration is without the proxyEnabled key, which was deployed by mistake. So, this piece of documentation is the correct one, and it should be used as the reference.

Hope it helps.

[WangJiaoJo]

Hi, @danilowoz , thanks so much for your quick response!

Yes, currently I just set the

<SandpackProvider 
      template='angular'
      customSetup={{
        dependencies: { "@scope/package-name": "4.2.0" },
        npmRegistries: [
          {
            enabledScopes: ["@scope"],
            limitToScopes: true,
            registryUrl: "//url/", 
            registryAuthToken: "token"
          },
        ],
      }}>

But I still got this CORS error with v1.5.4, Access to fetch at 'https://registry-url' from origin 'https://1-5-4-sandpack.codesandbox.io' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. Do you know what reason it might be? Thank you a lot!

[danilowoz]

Hey, would you mind direct me a message on Discord and share the registry URL? Because given the information available in this issue, I can't figure out what's going on. All the CORS problems have been solved on the latest version, so my guess is that there is something wrong with the proxy server, but I can't make sure without checking it.

Thanks

[WangJiaoJo]

Hi, @danilowoz, sure, how I can connect with you on Discord? My digit tag is #3501. Sorry it is the first for me to use it. Thanks.

[Sprit3Dan]

Hi @danilowoz, @WangJiaoJo did you solve this cors issue? Could you share your findings please? I'm looking at exact same issue when using private npm registry

[danilowoz]

Sorry, but I wasn't able to reproduce it internally. My best guess is that your Custom Registry host has CORS limitations, and this's blocking Sandpack from consuming it.

If you're still facing this issue and don't want to share private information, feel free to reach out to me on Discord and share a minimal reproducible example.

Thanks