---
title: "Create React App"
description: "Upload source maps using Create React App and Sentry CLI."
url: https://docs.sentry.io/platforms/javascript/guides/react/sourcemaps/uploading/create-react-app/
---

# Create React App | Sentry for React

##### Create React App Status

Create React App (CRA) is [no longer recommended](https://react.dev/learn/start-a-new-react-project) by the React team for new projects. For new React applications, consider:

* **[Vite](https://docs.sentry.io/platforms/javascript/guides/react/sourcemaps/uploading/vite.md)** — Fast, modern build tool (recommended for SPAs)
* **[Next.js](https://docs.sentry.io/platforms/javascript/guides/nextjs.md)** — Full-stack React framework

This guide remains available for existing CRA projects.

In this guide, you'll learn how to upload source maps for Create React App using our `sentry-cli` tool.

This guide assumes the following:

* `sentry-cli` version >= `2.17.0`
* Sentry JavaScript SDK version >= `7.47.0`

## [Automatic Setup](https://docs.sentry.io/platforms/javascript/guides/react/sourcemaps/uploading/create-react-app.md#automatic-setup)

The easiest way to configure source map uploading using the Sentry CLI is with Sentry's Wizard:

```bash
npx @sentry/wizard@latest -i sourcemaps
```

The wizard will guide you through the following steps:

* Logging into Sentry and selecting a project
* Installing the necessary Sentry packages
* Configuring your build tool to generate and upload source maps
* Configuring your CI to upload source maps

If you'd rather manually configure source map uploading with the CLI, follow the steps below.

## [Manual Setup](https://docs.sentry.io/platforms/javascript/guides/react/sourcemaps/uploading/create-react-app.md#manual-setup)

### [1. Generate Source Maps](https://docs.sentry.io/platforms/javascript/guides/react/sourcemaps/uploading/create-react-app.md#1-generate-source-maps)

Verify that you are generating source maps when building your React app. This should already be the case, unless you set the `GENERATE_SOURCEMAPS` environment variable to "false".

**Make sure to run a production build.** In the next steps we will modify and upload the artifacts that were generated during the build. Running a development build will not emit the necessary files.

### [2. Configure Sentry CLI](https://docs.sentry.io/platforms/javascript/guides/react/sourcemaps/uploading/create-react-app.md#2-configure-sentry-cli)

Install Sentry CLI as a dev-dependency with the package manager of your choice:

```bash
npm install @sentry/cli --save-dev
```

For more info on `sentry-cli` configuration visit the [Sentry CLI configuration docs](https://docs.sentry.io/cli/configuration.md).

Use the below environment variables to make sure `sentry-cli` is configured for your project:

`.env`

```bash
SENTRY_ORG=___ORG_SLUG___
SENTRY_PROJECT=___PROJECT_SLUG___
SENTRY_AUTH_TOKEN=___ORG_AUTH_TOKEN___
```

### [3. Inject Debug IDs Into Build Artifacts](https://docs.sentry.io/platforms/javascript/guides/react/sourcemaps/uploading/create-react-app.md#3-inject-debug-ids-into-build-artifacts)

Debug IDs are used to match the stack frame of an event with its corresponding minified source and source map file. Visit [What are Debug IDs](https://docs.sentry.io/platforms/javascript/sourcemaps/troubleshooting_js/debug-ids.md) if you want to learn more about Debug IDs.

To inject Debug IDs, use the following command **every time after building your application**:

```bash
sentry-cli sourcemaps inject /path/to/build
```

Make sure to replace `/path/to/build` with the actual path where your build output is generated. In a Create React App application, this is usually the `build` folder.

#### [Verify Debug IDs Were Injected Into Build Artifacts](https://docs.sentry.io/platforms/javascript/guides/react/sourcemaps/uploading/create-react-app.md#verify-debug-ids-were-injected-into-build-artifacts)

After running the `sentry-cli sourcemaps inject` command, minified source files should contain a `debugId` comment at the end:

`exampleMinifiedFile.js`

```javascript
...
//# debugId=<debug_id>
//# sourceMappingURL=<sourcemap_url>
```

Source maps should now contain a field named `debug_id`:

`exampleSourceMap.js.map`

```json
{
    ...
    "debug_id":"<debug_id>",
    ...
}
```

### [4. Upload Artifacts](https://docs.sentry.io/platforms/javascript/guides/react/sourcemaps/uploading/create-react-app.md#4-upload-artifacts)

After you've injected Debug IDs into your artifacts, upload them using the following command:

```bash
sentry-cli sourcemaps upload /path/to/build
```

#### [Verify That Artifact Bundles Were Uploaded](https://docs.sentry.io/platforms/javascript/guides/react/sourcemaps/uploading/create-react-app.md#verify-that-artifact-bundles-were-uploaded)

Open up Sentry and navigate to **Project Settings > Source Maps**. If you choose “Artifact Bundles” in the tabbed navigation, you'll see all the artifact bundles that have been successfully uploaded to Sentry.

### [5. Deploy Your Application](https://docs.sentry.io/platforms/javascript/guides/react/sourcemaps/uploading/create-react-app.md#5-deploy-your-application)

If you're following this guide from your local machine, then you've successfully:

1. Generated minified source and source map files (artifacts) by running your application's build process
2. Injected Debug IDs into the artifacts you've just generated
3. Uploaded those artifacts to Sentry with our upload command

The last step is deploying a new version of your application using the generated artifacts you created in step one. **We strongly recommend running everything you've configured above inside your CI/CD pipeline** to ensure each subsequent deploy will have readable stack traces in Sentry error events.