using private NPM packages

[souporserious]

First, just want to say this is an amazing project! 🙏 I'm curious if there is an idiomatic way to include private NPM dependencies? Would this just require hosting them in a custom registry or possibly bundling the code somehow alongside in a hidden file? Appreciate any help or guidance!

[ensorrow]

You need to customize 3 places to support private npm registry:

1. An unpkg alike service to reach your private npm files' content directly by api
2. Change the registry of dependency-packager and self host it
3. Change the default cloudflare unpkg service and depencency-packager service to your customize service in codesandbox-client project and self host the dist code

[imcuttle]

unpkg is open-source and could self-host, but How to self host depencency-packager service?

[alexnm]

We talked about supporting private/local packages in sandpack, but the problem is a bit more complicated, with the bundler being pretty old at this stage and requiring a lot of changes.

CodeSandbox has support for private packages on the Pro accounts, so it would be an option to allow sandpack users to connect to their codesandbox accounts. However, sandpack is intended to be a public code editor with a built-in bundler, so we're not sure on the use cases for private packages.

Finally, it is possible to pass the bundled code, as if you were passing a files inside node_modules, so /node_modules/<library>/index.js: . It is not ideal, as you move around a lot of code (depending on the size of the package) through the sandpack components, and it takes some time to create your setup

[jmakGH]

Finally, it is possible to pass the bundled code, as if you were passing a files inside node_modules

@alexnm I'm curious to try this out and looking for some clarification. Do I pass /node_modules/<library>/index.js as a dependency using the customSetup prop or somewhere else?

[souporserious]

Just a heads up there was a tweet posted showing an example of how to do this :)

<Sandpack
  customSetup={{
    files: {
      "/App.js": APP_CODE,
      "/node_modules/fake-library/package.json": JSON.stringify({
        name: "fake-library",
        main: "./index.js"
      }),
      "/node_modules/fake-library/index.js": `module.exports = {
        hello: (name) => "Hello " + name
      }`
    }
  }}
  template="react"
/>

[gpbl]

👋 I tried this solution above, but there's something off the codesandbox linked in the example:

https://codesandbox.io/s/z09xs

The file:///sandbox/node_modules/fake-library/index.js can't be opened, and since the dependency is not installed also it doesn't work well with typescript. Any idea to debug that? Thanks.

[danilowoz]

Hey @gpbl, I'm sorry you're having trouble getting it to work, but I can see here two misunderstandings:

• Loading files: CodeSandbox is not able to load local files and you need a bundler to properly load it, for example: https://codesandbox.io/s/private-npm-packages-uuzv2?file=/src/App.js;
• TypeScript: Sandpack doesn't support any LSP server (which is responsible for generating the types), but currently there is an exploration in progress, feel free to leave your thoughts here

Hope it makes it clearer for you 😀

[danilowoz]

Hey, for those who are interested in this feature, we recently released a new possible way to consume private packages, but it requires self-hosting another server: https://sandpack.codesandbox.io/docs/guides/private-packages#self-host-the-proxy

Meanwhile, we're working on an enterprise solution that will make it easier to consume those packages without any extra service, but fees might be expected.

🚀

[aha2mao]

Hey, I'm glad to see that this is still being paid attention to..

But when I tried the above solution, I got the following error. Why?

My private registries is driven by verdaccio. Do I need to register as a codesandbox member to enjoy this service?

[danilowoz]

Hey, could you please open an issue in this repository for support? I'd leave this thread only for discussions, suggestions, and feature requests.

Thanks

[christopanayotovvia]

I know I'm late to the party, but here is a simple script:

import fs from "fs";
import path from "path";

export function* readAllFiles(dir) {
  const files = fs.readdirSync(dir, { withFileTypes: true });

  for (const file of files) {
    if (file.isDirectory()) {
      yield* readAllFiles(path.join(dir, file.name));
    } else {
      yield path.join(dir, file.name);
    }
  }
}

// Your build package
const targetPackage = "target-lib/package/";
const sandPackManifest = {};

for (const file of readAllFiles(targetPackage)) {
  try {
    const data = fs.readFileSync(file, "utf8");
    sandPackManifest[file.replace("target-lib/package/", "/node_modules/YOUR-PACKAGE/")] = {
      hidden: true,
      code: data,
    };
  } catch (err) {
    console.error(err);
  }
}

fs.writeFileSync('sandPackManifest.json', JSON.stringify(sandPackManifest))

What it will do it basically is take files from target-lib/package/ and create a JSON with keys the node_modules/YOUR-PACKAGE/file.ext: strigified code

Then in the sandpack:

import sandpackManifest from "../sandPackManifest.json";
const files = {
  "/App.tsx": `
  import {DSButton} from "YOUR-PACKAGE";
  export default function App() {
    return (<>
      <h1>Hello DS</h1>
      <DSButton>DS Button</DSButton>
      </>)
  }`,
  ...sandpackManifest,
};

If tour library depends on some external packages:

const DSPackageJSON = JSON.parse(sandpackManifest["/node_modules/YOUR-PACKAGE/package.json"]["code"]);
export const dependencies = {
  ...DSPackageJSON.dependencies,
};

It's slow but it's working