How to Integrate JFrog Artifactory with V0

Before configuring Artifactory, export your V0 project to a GitHub repository where you can edit files. In V0, click the Git panel in the left sidebar (the branching icon). If you have not connected GitHub yet, click 'Connect' and authorize V0 to access your GitHub account. Once connected, V0 will create a repository and push your project code. The repository will include the standard Next.js file structure: app/ directory, package.json, next.config.ts, and tsconfig.json. After the push completes, you can clone the repository locally or edit files directly in the GitHub web interface. You will need to add two configuration files to the repository: .npmrc (for registry configuration) and potentially update .gitignore to ensure you do not commit credentials. If you already have a Vercel project connected to the GitHub repo, any changes you push will automatically trigger a new Vercel deployment. Take note of your project root — that is where you will add the .npmrc file.

Your Vercel build needs credentials to authenticate with Artifactory when downloading private packages. The recommended credential type is an Artifactory Identity Token (also called an API Key in older versions). Log in to your Artifactory instance — for Artifactory Cloud, go to yourcompany.jfrog.io. Click your username in the top right, then 'Edit Profile' or 'Set Me Up'. In the profile page, find the 'Identity Tokens' section (or 'API Key' in older Artifactory versions). Click 'Generate a Token' or 'Generate API Key'. Copy the token value — it will look like a long alphanumeric string. This token grants the same access to Artifactory repositories as your user account, so it should be treated as a secret password. You will add this token as a Vercel environment variable in the next step, not in any file in your repository. If you have an npm-specific virtual repository in Artifactory (which aggregates multiple local and remote npm repos), note its URL — it will look like https://yourcompany.jfrog.io/artifactory/api/npm/npm-virtual/.

The .npmrc file in your project root tells npm (and Vercel's build system) where to find packages and how to authenticate. You need to create this file in the root of your exported V0 project. The configuration varies depending on whether all packages come from Artifactory or only scoped packages. For fully private enterprise environments where all packages are proxied through Artifactory, you set Artifactory as the default registry. For mixed scenarios where only specific packages (like @company/* scoped packages) come from Artifactory and the rest come from the public npm registry, you configure only the scoped registry. The authentication token uses a special format in .npmrc: the registry URL without the https: prefix, followed by :_authToken. The actual token value should come from an environment variable reference (${ARTIFACTORY_TOKEN}) rather than being hardcoded — this is critical for security. The .npmrc file with environment variable references is safe to commit to Git because it contains no actual credentials, only variable names.

1# .npmrc — commit this file to your repository
2# Option A: All packages from Artifactory (full proxy)
3registry=https://yourcompany.jfrog.io/artifactory/api/npm/npm-virtual/
4//yourcompany.jfrog.io/artifactory/api/npm/npm-virtual/:_authToken=${ARTIFACTORY_TOKEN}
5
6# Option B: Only scoped packages from Artifactory (mixed)
7@company:registry=https://yourcompany.jfrog.io/artifactory/api/npm/npm-local/
8//yourcompany.jfrog.io/artifactory/api/npm/npm-local/:_authToken=${ARTIFACTORY_TOKEN}

Vercel automatically reads .npmrc during the build process and substitutes environment variable references like ${ARTIFACTORY_TOKEN} with their actual values. This means you only need to set ARTIFACTORY_TOKEN once in the Vercel Dashboard, and it will be available for every deployment. Navigate to your Vercel project at vercel.com, click on the project, go to Settings → Environment Variables. Add a new variable named ARTIFACTORY_TOKEN and paste the Identity Token you generated from Artifactory as the value. Set it for the Production, Preview, and Development environments. Since this token is used during the build process (not at runtime), it does not need the NEXT_PUBLIC_ prefix — Vercel makes all environment variables available to the build environment regardless of prefix. If you have separate Artifactory repositories for development and production (which is common in enterprise setups), you can create two different tokens and configure them per environment scope in Vercel. Click Save after adding the variable.

1# Vercel environment variable to configure:
2# Name:  ARTIFACTORY_TOKEN
3# Value: your-artifactory-identity-token
4# Environments: Production, Preview, Development

Trigger a new Vercel deployment to test the Artifactory configuration. The easiest way is to push a small change to your GitHub repository — edit a comment in any file and push. Vercel will automatically detect the push and start a new deployment. Watch the build logs in the Vercel dashboard (click the deployment → View Build Logs). During the npm install step, you will see Vercel downloading packages. If Artifactory is correctly configured, packages from your private registry will appear in the install log alongside public npm packages. If authentication fails, you will see errors like 'E403 Forbidden' or '401 Unauthorized' with the Artifactory registry URL. Common causes include a typo in the registry URL in .npmrc, a token with insufficient permissions in Artifactory, or the environment variable name not matching exactly what is referenced in .npmrc (case-sensitive). If you need to install a private package in your V0 project, add it to package.json dependencies like any other npm package — the registry configuration handles where npm looks for it. For teams managing complex multi-tenant Artifactory setups with virtual repositories spanning multiple organizations, RapidDev can help structure the .npmrc configuration for Vercel compatibility.

1// Verify private package access locally before deploying:
2// 1. Create .env.local with ARTIFACTORY_TOKEN=your-token
3// 2. Run: npm install
4// If private packages install successfully, Vercel will work the same way.
5
6// Example package.json entry for private package:
7{
8  "dependencies": {
9    "@company/design-system": "^2.1.0",
10    "@company/api-client": "^1.5.3"
11  }
12}