docs-v2/content/influxdb/v2.1/api-guide/client-libraries/browserjs.md

title	seotitle	list_title	description	menu	influxdb/v2.1/tags	weight	aliases	related
JavaScript client library for web browsers	Use the InfluxDB JavaScript client library for web browsers	JavaScript for browsers	Use the InfluxDB JavaScript client library to interact with InfluxDB in web clients.	influxdb_2_1 name identifier parent JavaScript for browsers client_js_browsers Client libraries	client libraries JavaScript	201	/influxdb/v2.1/reference/api/client-libraries/browserjs/ /influxdb/v2.1/api-guide/client-libraries/browserjs/write /influxdb/v2.1/api-guide/client-libraries/browserjs/query	/influxdb/v2.1/api-guide/client-libraries/nodejs/write/ /influxdb/v2.1/api-guide/client-libraries/nodejs/query/

Use the InfluxDB JavaScript client library to interact with the InfluxDB API in browsers and front-end clients. This library supports both front-end and server-side environments and provides the following distributions:

• ECMAScript modules (ESM) and CommonJS modules (CJS)
• Bundled ESM
• Bundled UMD

This guide presumes some familiarity with JavaScript, browser environments, and InfluxDB. If you're just getting started with InfluxDB, see [Get started with InfluxDB](/{{% latest "influxdb" %}}/get-started/).

{{% warn %}}

Tokens in production applications

{{% api/browser-token-warning %}} {{% /warn %}}

• Before you begin
• Use with module bundlers
• Use bundled distributions with browsers and module loaders
• Get started with the example app

Before you begin

1. Install Node.js to serve your front-end app.

2. Ensure that InfluxDB is running and you can connect to it. For information about what URL to use to connect to InfluxDB OSS or InfluxDB Cloud, see [InfluxDB URLs](/{{% latest "influxdb" %}}/reference/urls/).

Use with module bundlers

If you use a module bundler like Webpack or Parcel, install @influxdata/influxdb-client-browser. For more information and examples, see [Node.js](/{{% latest "influxdb" %}}/api-guide/client-libraries/nodejs/).

Use bundled distributions with browsers and module loaders

1. Configure InfluxDB properties for your script.

   <script>
     window.INFLUX_ENV = {
       url: 'http://localhost:8086',
       token: 'YOUR_AUTH_TOKEN'
     }
   </script>
   

2. Import modules from the latest client library browser distribution. @influxdata/influxdb-client-browser exports bundled ESM and UMD syntaxes.

   {{< code-tabs-wrapper >}} {{% code-tabs %}} ESM UMD {{% /code-tabs %}} {{% code-tab-content %}}

   <script type="module">
     import {InfluxDB, Point} from 'https://unpkg.com/@influxdata/influxdb-client-browser/dist/index.browser.mjs'
   
     const influxDB = new InfluxDB({INFLUX_ENV.url, INFLUX_ENV.token})
   </script>
   

   {{% /code-tab-content %}} {{% code-tab-content %}}

   <script src="https://unpkg.com/@influxdata/influxdb-client-browser"></script>
   <script>
     const Influx = window['@influxdata/influxdb-client']
   
     const InfluxDB = Influx.InfluxDB
     const influxDB = new InfluxDB({INFLUX_ENV.url, INFLUX_ENV.token})
   </script>
   

   {{% /code-tab-content %}} {{< /code-tabs-wrapper >}}

After you've imported the client library, you're ready to [write data](/{{% latest "influxdb" %}}/api-guide/client-libraries/nodejs/write/?t=nodejs) to InfluxDB.

Get started with the example app

This library includes an example browser app that queries from and writes to your InfluxDB instance.

1. Clone the influxdb-client-js repo.

2. Navigate to the examples directory:

   cd examples
   

3. Update ./env_browser.js with your InfluxDB [url](/{{% latest "influxdb" %}}/reference/urls/), [bucket](/{{% latest "influxdb" %}}/organizations/buckets/), [organization](/{{% latest "influxdb" %}}/organizations/), and [token](/{{% latest "influxdb" %}}/security/tokens/)

4. Run the following command to start the application at http://localhost:3001/examples/index.html

   npm run browser
   

   index.html loads the env_browser.js configuration, the client library ESM modules, and the application in your browser.