---
title: "Nx CLI"
description: "Upload your source maps using the Nx CLI and the Sentry webpack plugin."
url: https://docs.sentry.io/platforms/javascript/guides/angular/sourcemaps/uploading/angular-nx/
---

# Nx CLI | Sentry for Angular

If you're using [`@nx/angular`](https://nx.dev/packages/angular), you can use the Nx CLI together with one of our bundler plugins (such as Webpack or esbuild) to automatically upload source maps to Sentry when building your app (with `nx build`, for example).

Due to `@nx/angular`'s architecture, you'll first need to configure an executor that allows registering bundler plugins. In the end, you'll be able to automatically upload source maps whenever you're creating a production build of your app.

Configure your app to upload source maps in three steps.

## [1. Configure `project.json`](https://docs.sentry.io/platforms/javascript/guides/angular/sourcemaps/uploading/angular-nx.md#1-configure-projectjson)

Before you register the Sentry bundler plugin, first ensure that you can register plugins (such as webpack or esbuild plugins) with your current executor (or Angular builder). Typically, this is possible if you have access to a `webpack.config.js` or a similar configuration file. If this already is the case, skip to [step 2](https://docs.sentry.io/platforms/javascript/guides/angular/sourcemaps/uploading/angular-nx.md#2-register-the-sentry-webpack-plugin).

If you can't register a plugin, you'll need to change the executor in your `project.json` to a custom executor that allows you to register it (such as [`@nx/angular:webpack-browser`](https://nx.dev/nx-api/angular/executors/webpack-browser) or [`@nx/angular:browser-esbuild`](https://nx.dev/nx-api/angular/executors/browser-esbuild)).

Check out the example below: in your `project.json`, replace the default executor (`@angular-devkit/build-angular:browser`) with `@nx/angular:webpack-browser`:

`project.json`

```javascript
{
  "targets": {
    "build": {
      "executor": "@nx/angular:webpack-browser",
      "options": {
        "customWebpackConfig": {
          "path": "./webpack.config.js" // path to your webpack.config.js
        },
        "sourceMap": { // enable source maps generation
            "scripts": true,
         }
        // ... other options
      },
      // ... other options
    }
  }
}
```

## [2. Register the Sentry Bundler Plugin](https://docs.sentry.io/platforms/javascript/guides/angular/sourcemaps/uploading/angular-nx.md#2-register-the-sentry-bundler-plugin)

This guide assumes you are using a Sentry SDK on version `7.47.0` or higher.

If you are on an older version and you want to upload source maps we recommend upgrading your SDK to the newest version.

To upload source maps you have to configure an [Organization Token](https://sentry.io/orgredirect/organizations/:orgslug/settings/auth-tokens/).

Alternatively, you can also use a [Personal Token](https://sentry.io/orgredirect/organizations/:orgslug/settings/account/api/auth-tokens/), with the "Project: Read & Write" and "Release: Admin" permissions.

Auth tokens can be passed to the plugin explicitly with the `authToken` option, with a `SENTRY_AUTH_TOKEN` environment variable, or with an `.env.sentry-build-plugin` file (don't forget to add it to your `.gitignore` file, as this is sensitive data) in the working directory when building your project. We recommend you add the auth token to your CI/CD environment as an environment variable.

`.env.sentry-build-plugin`

```bash
SENTRY_AUTH_TOKEN=___ORG_AUTH_TOKEN___
```

### [Webpack](https://docs.sentry.io/platforms/javascript/guides/angular/sourcemaps/uploading/angular-nx.md#webpack)

Install the Sentry Webpack plugin:

```shell
npm install @sentry/webpack-plugin --save-dev
```

Register the Sentry webpack plugin in your `webpack.config.js`:

`webpack.config.js`

```javascript
const { sentryWebpackPlugin } = require("@sentry/webpack-plugin");

module.exports = {
  // ... other config above ...

  devtool: "hidden-source-map", // Source map generation must be turned on ("hidden-source-map", "source-map", etc.)
  plugins: [
    sentryWebpackPlugin({
      org: "___ORG_SLUG___",
      project: "___PROJECT_SLUG___",
      authToken: process.env.SENTRY_AUTH_TOKEN,

      sourcemaps: {
        // As you're enabling client source maps, you probably want to delete them after they're uploaded to Sentry.
        // Set the appropriate glob pattern for your output folder - some glob examples below:
        filesToDeleteAfterUpload: [
          "./**/*.map",
          ".*/**/public/**/*.map",
          "./dist/**/client/**/*.map",
        ],
      },
    }),
  ],
};
```

Generating source maps **may expose them to the public**, potentially causing your source code to be leaked. You can prevent this by configuring your server to deny access to `.js.map` files, or by using [Sentry Webpack Plugin's `sourcemaps.filesToDeleteAfterUpload`](https://www.npmjs.com/package/@sentry/webpack-plugin#sourcemapsfilestodeleteafterupload) option to delete source maps after they've been uploaded to Sentry.

Learn more about configuring the plugin in our [Sentry webpack plugin documentation](https://www.npmjs.com/package/@sentry/webpack-plugin).

### [esbuild](https://docs.sentry.io/platforms/javascript/guides/angular/sourcemaps/uploading/angular-nx.md#esbuild)

Install the Sentry esbuild plugin:

```shell
npm install @sentry/esbuild-plugin --save-dev
```

Then, follow the [official Nx documentation](https://nx.dev/nx-api/angular/executors/browser-esbuild#examples) to register the Sentry esbuild plugin (`@sentry/esbuild-plugin`) in your `project.json` file. For example:

`project.json`

```json
{
  "targets": {
    "build": {
      "executor": "@nx/angular:browser-esbuild",
      "options": {
        "plugins": [
          {
            "path": "@sentry/esbuild-plugin",
            "options": {
              "org": "___ORG_SLUG___",
              "project": "___PROJECT_SLUG___",
              "authToken": "___SENTRY_AUTH_TOKEN___"
            }
          }
        ]
      }
    }
  }
}
```

Generating source maps **may expose them to the public**, potentially causing your source code to be leaked. You can prevent this by configuring your server to deny access to `.js.map` files, or by using [Sentry Esbuild Plugin's `sourcemaps.filesToDeleteAfterUpload`](https://www.npmjs.com/package/@sentry/esbuild-plugin#sourcemapsfilestodeleteafterupload) option to delete source maps after they've been uploaded to Sentry.

## [3. Upload](https://docs.sentry.io/platforms/javascript/guides/angular/sourcemaps/uploading/angular-nx.md#3-upload)

To upload the source maps, build your Angular application:

```bash
nx build
```

The Sentry webpack plugin doesn't upload source maps in watch-mode/development-mode. We recommend running a production build to test your implementation.