Skip to content

Update private packages docs to reflect current team/workspace terminology #1257

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Update private packages docs to reflect current team/workspace terminology #1257

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 15 additions & 16 deletions website/docs/src/pages/getting-started/private-packages.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import { Callout } from 'nextra-theme-docs'
import { Callout } from "nextra-theme-docs";

# Private packages

With Sandpack, you can securely consume private npm registries (GitHub packages, npm private registry, custom registries, etc.) within just a few steps. A CodeSandbox internal proxy provides the interface to communicate with a custom private npm registry and retrieve npm packages from any npm registry.
With Sandpack, you can securely consume private npm registries (GitHub packages, npm private registry, custom registries, etc.) within just a few steps. A CodeSandbox internal proxy provides the interface to communicate with a custom private npm registry and retrieve npm packages from any npm registry.

You can access the settings [here](https://codesandbox.io/dashboard/settings/npm-registry).

<Callout emoji="⚠️">
This setting is only available on enterprise plans.
This setting is only available on enterprise plans.
</Callout>

## Configuration
Expand All @@ -18,29 +18,31 @@ This setting is only available on enterprise plans.

2. **Trusted domains:** Set a list of trusted domains on the [Dashboard](https://codesandbox.io/dashboard/).

<small>This will ensure that no one but you can use and render these sandboxes</small>
<small>
This will ensure that no one but you can use and render these sandboxes
</small>

<img src="/docs/private-package-dashboard.png" />

3. **Sandpack:** Provide a team ID and your custom setup for your Sandpack sandboxes.
3. **Sandpack:** Provide your Enterprise workspace ID and your custom setup for your Sandpack sandboxes.

<small>You can find your team ID on the dashboard URL at [codesandbox.io/dashboard](https://codesandbox.io/dashboard/)</small>
<small>
You can find your Enterprise workspace ID in the dashboard URL at
[codesandbox.io/dashboard](https://codesandbox.io/dashboard/)
</small> starting with ws_

<br />
<br />

```jsx
<Sandpack
template="react"

// This is an identifier for your sandboxes and private npm registry
teamId="YOUR_TEAM_ID"

// Set the dependencies; for example, this is a private package from GitHub packages
customSetup={{
dependencies: { "@codesandbox/test-package": "latest" },
}}

// Consume dependencies as usual
files={{
"App.js": `import { Button } from "@codesandbox/test-package";
Expand All @@ -50,7 +52,6 @@ export default function App() {
}`,
}}
/>

```

4. **Sign-in:** When Sandpack loads, you will be asked to sign in; after doing that, it's done.
Expand All @@ -59,8 +60,6 @@ export default function App() {

<img src="/docs/private-package-loaded.png" />



## Exporting sandboxes

Once Sandpack is configured, you can use the "Open in CodeSandbox" button to export sandboxes to CodeSandbox effortlessly. However in order to seamless export the sandbox, you need to provide a CodeSandbox API key that will be used to create a sandbox inside your workspace.
Expand All @@ -69,18 +68,19 @@ Once Sandpack is configured, you can use the "Open in CodeSandbox" button to exp
2. Use the generate token to setup your Sandpack instance:

```jsx
<Sandpack
<Sandpack
customSetup={{
exportOptions: {
apiToken: "<API-TOKEN>",
privacy: "private", // "public" | "private"
}
},
}}
/>
```

<Callout emoji="⭐️">
This sandbox will be created inside the given workspace and can be shared with team members.
This sandbox will be created inside the given workspace and can be shared with
team members.
</Callout>

## Security
Expand All @@ -102,4 +102,3 @@ If they want to retrieve a package from the private npm registry, they will have
Sandpack uses the HTTP Content-Security-Policy (CSP) frame-ancestors directive to validate parents' window that may embed the given sandpack iFrame.

With this extra security layer, only websites you trust (and provide to us) can render and fetch private packages from your registry. This can avoid phishing websites and the potential leakage of private data.

Loading