Installing Recordings in your project

This section describes how to install CodeSee into your project. The instructions assume you have an existing project that you want to add CodeSee to.

Following these instructions, you will:

1. Install two npm packages.
2. Configure Babel so that CodeSee instruments your code when running in development.
3. Rebuild and run your app locally.

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
```

Configure your project for CodeSee

Follow the links below to set up CodeSee for your specific project environment:

• Create React App
• Typescript, but without Babel
• Next
• Nuxt
• Storybook
• Gatsby
• Ember

Or, select Generic Setup if you use Typescript with Babel, or another framework not listed above.

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!

Browser compatibility and setup

Supported browsers

Currently, for CodeSee to work properly, you need to run your application in Chrome.

Third-party cookies

If third-party cookies are blocked, our authentication process does not work.

If you have disabled cross-site cookies, you need to add the following to the Sites that can always use cookies list in Chrome settings::

app.codesee.io
[*.]okta.com