JavaScript client library for web browsers
- Tokens in production applications
Before you begin
Use with module bundlers
Use bundled distributions with browsers and module loaders
Get started with the example app
- Related

JavaScript client library for web browsers

Use the InfluxDB JavaScript client library to interact with the InfluxDB v2 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.

Tokens in production applications

The examples below configure the authentication token in source code for demonstration purposes only. To protect your data, take the following steps:

Avoid sending tokens to public clients such as web browsers and mobile apps. Regard any application secret sent to client devices as public and not confidential.
Use short-lived, read-only tokens whenever possible to prevent unauthorized writes and deletes.

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

Before you begin

Install Node.js to serve your front-end app.
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.

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.

Use bundled distributions with browsers and module loaders

Configure InfluxDB properties for your script.

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

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

ESM UMD

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

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

After you’ve imported the client library, you’re ready to write data to InfluxDB.

Get started with the example app

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

Clone the influxdb-client-js repo.
Navigate to the examples directory:
```
cd examples
```
Update ./env_browser.js with your InfluxDB url, bucket, organization, and token
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.

client libraries JavaScript