> ## Documentation Index
> Fetch the complete documentation index at: https://docs.appsignal.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Installing AppSignal for JavaScript

Please follow the [installation guide](/guides/new-application) first, when adding a new application to AppSignal.

## Creating a Push API Key

Before you begin, you'll need to find your Push API key on the ["Push and deploy" section](https://appsignal.com/redirect-to/app?to=info) of your App settings page. You'll be able to find your API key under the "Front-end error monitoring". Once you have your key, follow the instructions under the [Installation](#installation) section to use it in your application.

## Installation

### With npm or yarn

First, add the `@appsignal/javascript` package to your `package.json`. Then, run `yarn install`/`npm install`. You'll also need a Front-end error monitoring key from the ["Push and deploy" section](https://appsignal.com/redirect-to/app?to=info) of your App settings page.

You can also add these packages to your `package.json` on the command line:

<CodeGroup>
  ```bash Bash theme={null}
  yarn add @appsignal/javascript
  npm install @appsignal/javascript
  ```
</CodeGroup>

### With JSPM.dev

<Warning>
  It is not recommended to use the JSPM.dev CDN in production. For
  a production-ready setup without a build step, we recommend using
  [JSPM.io import maps](#with-jspmio-import-maps).
</Warning>

Thanks to the JSPM CDN, it is possible to use the AppSignal for JavaScript integration without a front-end asset build step. Your application can import packages directly from the CDN:

<CodeGroup>
  ```js JavaScript theme={null}
  import Appsignal from "https://jspm.dev/@appsignal/javascript";
  ```
</CodeGroup>

### With JSPM.io import maps

Using the [JSPM.io import map generator](https://generator.jspm.io/), you can generate an import map for your application's dependencies.

Add `@appsignal/javascript` to the dependencies list, then add the generated import map and ES module shims to your application's code.

### With `rails-importmap`

Use the following command to add these packages to your Rails application's import maps:

<CodeGroup>
  ```sh Shell theme={null}
  ./bin/importmap pin @appsignal/javascript
  ```
</CodeGroup>

## Usage

Create an `appsignal.js` file to require and configure AppSignal. From this file, we export the instance of the `Appsignal` object that we will use from our application. For more information about the configuration, see our [configuration section](/front-end/configuration).

<CodeGroup>
  ```javascript JavaScript theme={null}
  // For ES Module via npm/yarn, or with import maps
  import Appsignal from "@appsignal/javascript";
  // For CommonJS module via npm/yarn
  const Appsignal = require("@appsignal/javascript").default;
  // With the JSPM.dev CDN
  import Appsignal from "https://jspm.dev/@appsignal/javascript";

  export const appsignal = new Appsignal({
    key: "YOUR FRONTEND API KEY",
  });
  ```
</CodeGroup>

You can then import and use the `Appsignal` object in your app:

<CodeGroup>
  ```javascript JavaScript theme={null}
  // Place this at the top
  // Import the file created in the previous step
  import { appsignal } from "./appsignal";

  // Place your app code below this
  ```
</CodeGroup>

<Warning>
  **NOTE:** If you are running a CDN in front of your assets, you'll need to
  make [two changes](/front-end/troubleshooting) for error reporting to
  be able to send errors to our API endpoint. Read more about the [required
  changes](/front-end/troubleshooting).

  If you use Content Security Policy, make sure to add the correct headers as
  [described
  here](/front-end/troubleshooting#content-security-policy-csp).
</Warning>

## Add integrations

Your application may be using a framework or library that AppSignal supports.
Please check out the [integrations](/front-end/integrations) section for any library our application uses and follow the instructions to add instrumentation for those libraries.

[Add integrations to your application](/front-end/integrations).

## Add plugins

AppSignal also offers some plugins for JavaScript functionality in the browser.
Please check out the [plugins](/front-end/plugins) section for any additional instrumentation you would like to add to your application.

[Add plugins to your application](/front-end/plugins).

## Custom error reporting

Not using a framework or library but would like to report JavaScript errors manually?
Use our [Span API](/front-end/span) to create spans on which to report errors, add tags and more metadata.
Then read our [error handling guide](/front-end/error-handling) on how to report errors to AppSignal.

***

<Note>
  📖 Continue with our [installation guide](/guides/new-application).
</Note>

## Uninstall

Uninstall AppSignal from your app by following the steps below. When these steps are completed your app will no longer send data to the AppSignal servers.

1. In the `package.json` of your app, delete all lines referencing an `appsignal` package: `"*appsignal/*": "*"`.

2. Run `npm install` or `yarn install` to update your `package.lock`/`yarn.lock` with the removed packages state.
   * Alternatively, run `npm uninstall @appsignal/<package name>` or `yarn remove @appsignal/<package name>` to uninstall an AppSignal package.

3. Remove any AppSignal [configuration](/front-end/configuration/) from your app.

4. Commit, deploy and restart your app.
   * This will make sure the AppSignal servers won't continue to receive data from your app.

5. Finally, [remove the app](/guides/application/deleting-applications) on AppSignal.com.

<Note>
  📖 Continue with our [uninstall
  guide](/guides/application/deleting-applications).
</Note>