Create React App Installation

CodeSee supports Create React App 2.x or newer. If you're not sure what version you are using, you can check your package.json for the react-scripts dependency: its version is the same as your Create React App version.

You need to add React App Rewired to your project. Note that these instructions are slightly different to the ones on the react-app-rewired site. If you already have react-app-rewired installed, you can skip to Step 2: Create a config-overrides.js file in the root directory.

Install the CodeSee package in your JavaScript or TypeScript app

In the terminal, run the install command for your package manager:

=== "npm"

```shell
npm install --save-dev @codesee/tracker@latest @codesee/babel-plugin-instrument@latest
```

=== "yarn"

```shell
yarn add --dev @codesee/tracker@latest @codesee/babel-plugin-instrument@latest
```

Install react-app-rewired

$ npm install react-app-rewired --save-dev

Create a config-overrides.js file in the root directory

The configuration differs slightly based on the version of Create React App you are running.

=== "Version 4.x"

```js
module.exports = function override(config, env) {
  // add CodeSee babel plugin
  if (env === 'development') {
    const babelLoaderConfig = config.module.rules[1].oneOf[2];
    babelLoaderConfig.options.plugins.push(["@codesee/instrument", { hosted: true }]);
  }

  return config;
}
```

=== "Version 3.x and 2.x"

```js
module.exports = function override(config, env) {
  // add CodeSee babel plugin
  if (env === 'development') {
    const babelLoaderConfig = config.module.rules[2].oneOf[1];
    babelLoaderConfig.options.plugins.push(["@codesee/instrument", { hosted: true }]);
  }

  return config;
}
```

Your project root should now look like this:

+-- your-project
|   +-- config-overrides.js
|   +-- node_modules
|   +-- package.json
|   +-- public
|   +-- README.md
|   +-- src

Edit the calls to react-scripts in the scripts field of your package.json

In your package.json, your scripts field should currently look similar to this:

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
}

Change the start and build fields to use react-app-rewired like this:

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
}

!!! Note
Do not use react-app-rewired for the eject and test scripts.

Optional: configuration for large or high data applications

verbose: boolean

By default, CodeSee instruments your code in order to record the data value of every expression. This always results in the application running slower while recording, and in rare circumstances, it can cause a noticeable slow down even when not recording. If this slowdown is happening in your application, you can configure CodeSee to use verbose: false (or terse) mode. CodeSee will instrument your code less and capture less data (just the inputs and outputs of functions), but continue to provide the same tracing, side effects, and visualizations as always.

• Verbose mode (default): gets all of the runtime data but in some applications or recordings can cause a noticeable slowdown.
• Terse mode: captures less runtime data, but your recordings will be more performant. If you have a high data application, or are noticing slowdown, we recommend you try setting verbose: false.

"plugins": [
   ["@codesee/instrument", { "hosted": true, "verbose": false }],
   /* ... other dev plugins ... */
]

!!! note
This setting affects all developers working on the application. It requires a clean build.

Rebuild and run your app locally

Rebuild your app, wait a few seconds, and you should see the CodeSee button towards the top right of your screen. Congrats, you're ready to start using CodeSee!