CodeSee is offered as a hosted service, but you can also run it locally on your machine as a Docker container. Please [get in touch with us](mailto:[email protected]?subject=CodeSee Local Access) for access.

Account setup

Get access to docker codeseeio/app_node, make sure to have Docker installed, and that you are logged in.
Get access to github.com/codesee-io/codesee-alpha, and git clone it locally. We recommend putting this repo outside of your app directory. For example:

src/
- my-app/
- codesee-alpha/

git clone [email protected]:Codesee-io/codesee-alpha.git --depth=1

CodeSee Local setup

From the local, cloned codesee-alpha directory, run docker compose:
docker-compose up
Wait for postgres to report it's ready to receive requests, then hit Control C to stop the server
When you're ready, run docker-compose up and your CodeSee server should be good to go. You'll know everything is working when you see the message: server started at http://localhost:5198

From now on, you can run docker-compose up in the codesee-alpha directory anytime to start up the CodeSee server, and <ctrl>+c to bring the server back down.

Setting up CodeSee on your codebase

Please follow our instructions on installing CodeSee, with the added
instruction of setting hosted to false, or removing the option entirely.

Changing from local to hosted CodeSee

If you're running CodeSee locally but want to use the hosted option instead, you'll need to upgrade your version of CodeSee in slightly different ways, depending on what file your Babel intergration is in.

While this process will not delete any previous CodeSee recordings, you'll need to switch back to the local hosted option to access recordings previously recorded with CodeSee Local.

Update the CodeSee dependencies

Update the devDependencies in your packages.json file to reflect the current CodeSee version. You can run either of these commands to update:

npm

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

yarn

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

Update the CodeSee tooling declaration

Updating with Create React App

If you're using CodeSee with a Create React App application, you'll make these changes in the config-overrides.js file. Before updating, your config-overrides.js file should look something like this:

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");
  }
  return config;
}

Alter this text to add {hosted: true} to your CodeSee plugin. If “@codesee/instrument” is not currently wrapped in its own array in your file, you will need to do so, as shown below. If it is already wrapped in its own array as shown here [“@codesee/instrument”], please add {hosted: true} to the array as shown below.

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;
}

Updating other application types

Navigate to the file that you've added your CodeSee plugin to. You can search for "@codesee/instrument" to quickly find the correct file. For example, if you've added CodeSee to your .babelrc file, open your .babelrc file. It should contain text that looks similar to this.

  "env": {
    "development": {
      "plugins": [
        /* other plugins may be listed here */
        "@codesee/instrument"
      ],
    }
  }

  "env": {
    "development": {
      "plugins": [
        /* other plugins may be listed here */
        ["@codesee/instrument", {"hosted": true}]
      ],
    }
  }

Reset localStorage

You'll next need to clear localStorage. Open your application in your browser, making sure that the CodeSee floating action button is visible.

Right-click on any point of your application in your browser and select inspect, to open Chrome development tools.

Click on the Application option in your Chrome development tools. Then navigate to your local storage option in the left hand navigation menu.

Look for http://localhost:5198, right click on it and choose clear.

If you'd like CodeSee to run on the backend, CodeSee needs to be configured to start recording immediately. This is how:

Two options, either:

set the env variable CODESEE_RECORD_ON_START to true
use webpack's DefinePlugin (or similar) to set up a find-replace for "CODESEE_RECORD_ON_START": "true" or "process.env.CODESEE_RECORD_ON_START": "true"

For example, on the command line:

CODESEE_RECORD_ON_START=true node codesee/index.js

For example, in webpack:

const webpack = require('webpack');

module.exports = {
  ...
  plugins: [
    new webpack.DefinePlugin({
      CODESEE_RECORD_ON_START: "true"
    })
  ]
};

Upgrading local to the latest version

In your local codesee-alpha directory, git pull the latest changes from this repo
Restart your docker compose by shutting down the docker container (Ctrl-C), and then running docker-compose up again.

From the root of your app, install the latest CodeSee packages:

=== "npm"

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

=== "yarn"

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

Rebuild and restart your application

TROUBLESHOOTING ADVICE: If it appears that nothing has changed, your application may be cacheing its babel artifacts. If you can do a clean build, try that. Or, if not, try removing your node_modules/.cache directory, or even remove your entire node_modules directory.