How to Integrate Bolt.new with JFrog Artifactory

Before configuring Artifactory, your Bolt project needs to be on your local machine. Bolt.new's WebContainer runs inside a browser tab and has no access to local filesystem or custom registry configurations — all Artifactory setup happens in the exported project environment. Export your Bolt project using one of two methods: the ZIP download (click the download icon in Bolt's toolbar) or GitHub integration (use Bolt's Git panel to push to GitHub, then clone locally). The GitHub route is recommended if you plan to have ongoing development — it gives you a proper Git history and enables bidirectional sync between Bolt and your local environment. After extracting or cloning the project, run npm install to install dependencies from the public npmjs.com registry. This establishes a working baseline before you reconfigure npm to use Artifactory. Verify the project builds by running npm run build. A clean build here confirms the export was successful and the project is in a valid state before you start modifying registry configuration. Note that you are not changing how Bolt.new itself works — Bolt will continue to use the public npm registry for any future prompt-driven package installations in the browser. The Artifactory configuration you add here applies only to your local development and CI/CD environments. If Bolt adds new packages in future sessions, you export the updated project and those packages will come from npmjs.com — which is fine for public packages. Only your organization's private packages need the Artifactory registry configuration.

1# After cloning or extracting the Bolt project:
2cd your-bolt-project
3
4# Install standard dependencies first:
5npm install
6
7# Verify the build works before adding Artifactory config:
8npm run build
9
10# Confirm which Node.js version is being used:
11node --version
12npm --version

The .npmrc file controls npm's behavior for a specific project when placed in the project root, or globally when placed in the home directory (~/.npmrc). For Bolt projects, a project-level .npmrc is the right approach — it applies only when working in this specific directory and gets committed to Git alongside the code, making it available to all developers and CI/CD pipelines working with the project. Artifactory supports two common npm authentication methods: basic authentication (username and hashed password) and token-based authentication (API token or identity token). Token-based is simpler and more secure for CI/CD use. Artifactory's npm repository URL follows a standard pattern: https://your-instance.jfrog.io/artifactory/api/npm/your-repo-name/ For scoped packages (recommended pattern for private packages — e.g., @yourorg/design-system), you configure Artifactory only for that scope and keep npmjs.com for all public packages. This is cleaner than routing all npm traffic through Artifactory and avoids slowing down installation of public packages. IMPORTANT: The API token value in .npmrc must never be committed to a public Git repository. The .npmrc file with authentication tokens should either be in .gitignore (if it contains the actual token), or use environment variable references instead of literal token values. The approach using environment variables (${NPM_TOKEN}) keeps the .npmrc safe to commit while requiring the token to be set as an environment variable in each developer's shell or CI/CD system.

1# .npmrc configuration for Artifactory npm registry:
2# Option 1: Scope-specific registry (recommended - only @yourorg packages use Artifactory):
3@yourorg:registry=https://your-instance.jfrog.io/artifactory/api/npm/your-npm-repo/
4//your-instance.jfrog.io/artifactory/api/npm/your-npm-repo/:_authToken=${NPM_TOKEN}
5
6# Option 2: Set Artifactory as default registry for ALL packages (route all npm traffic through Artifactory):
7registry=https://your-instance.jfrog.io/artifactory/api/npm/your-npm-repo/
8//your-instance.jfrog.io/artifactory/api/npm/your-npm-repo/:_authToken=${NPM_TOKEN}
9
10# Set the environment variable before running npm install:
11export NPM_TOKEN=your-artifactory-api-token
12
13# Then install private packages:
14npm install @yourorg/design-system
15npm install @yourorg/auth-utilities

With .npmrc configured, installing private packages from Artifactory works the same as installing any public npm package — you just specify the scoped package name and npm routes the request to Artifactory based on the scope configuration. Before installing, set the NPM_TOKEN environment variable in your terminal session so npm can authenticate with Artifactory. This token should come from your user profile in Artifactory (Edit Profile > Generate Identity Token). Never hardcode this value directly in .npmrc — use the environment variable pattern shown in the previous step. After installing private packages from Artifactory, you may want to update your Bolt project to use these packages instead of (or alongside) whatever Bolt generated. For example, if your organization has a design system package (@yourorg/ui), you could replace Bolt-generated shadcn/ui components with your organization's components. This is done by editing the component files locally — you are now working in a standard local Node.js environment where you can make any changes. If you want these private packages available the next time you work in Bolt, you have a few options. You can push your local changes (including the updated package.json with the private package dependencies) back to GitHub, and Bolt will show the updated package.json — though Bolt will not be able to install private packages in its WebContainer environment, meaning prompts that try to use these packages may produce code that works locally but fails in Bolt's preview. The practical approach is to use Bolt for generating new components and UI logic, then integrate them locally with the private packages.

1# Set authentication token (do this in your shell before npm install):
2export NPM_TOKEN=your-artifactory-identity-token
3
4# Install private packages from Artifactory:
5npm install @yourorg/design-system @yourorg/api-client
6
7# Verify the package was installed from Artifactory (check the version source):
8npm info @yourorg/design-system
9
10# If the install fails with authentication error, verify the token:
11curl -H "Authorization: Bearer $NPM_TOKEN" \
12  https://your-instance.jfrog.io/artifactory/api/npm/your-repo/
13# Should return JSON with repository info, not a 401 error

If you want to share components built in Bolt across multiple projects within your organization, you can package them as private npm packages and publish to Artifactory. This is the reverse of the previous steps — instead of consuming packages from Artifactory, you are producing them. First, identify what you want to package. Common candidates from Bolt projects are custom hook sets, utility functions, a collection of themed components, or an API client module. Create a separate directory for the package (or use the entire Bolt project if it is itself a library). Update the package.json with the required publishing fields: the package name with your organization's npm scope (@yourorg/package-name), a version number following semantic versioning, the main entry point (usually dist/index.js after building), and an exports map if you want to support both CommonJS and ESM imports. Add a prepare script that builds the package before publishing. Publish to Artifactory using npm publish. npm reads the .npmrc registry configuration and routes the publish request to Artifactory instead of npmjs.com. After publishing, the package appears in the Artifactory web UI under your npm repository and is installable by anyone in your organization who has Artifactory access.

1// package.json additions for publishing to Artifactory:
2{
3  "name": "@yourorg/bolt-components",
4  "version": "1.0.0",
5  "description": "Reusable components extracted from Bolt.new projects",
6  "main": "dist/index.js",
7  "module": "dist/index.esm.js",
8  "types": "dist/index.d.ts",
9  "files": [
10    "dist/",
11    "README.md"
12  ],
13  "exports": {
14    ".": {
15      "import": "./dist/index.esm.js",
16      "require": "./dist/index.js",
17      "types": "./dist/index.d.ts"
18    }
19  },
20  "scripts": {
21    "build": "tsc && vite build --mode library",
22    "prepare": "npm run build"
23  },
24  "publishConfig": {
25    "registry": "https://your-instance.jfrog.io/artifactory/api/npm/your-npm-repo/"
26  }
27}
28
29// Publish command:
30// npm publish --registry https://your-instance.jfrog.io/artifactory/api/npm/your-npm-repo/