Set Up Your React Dev Environment

To build and test your Kinetic front-end portal locally, you’ll use the @kineticdata/react library. This setup enables you to develop using live data from your Kinetic instance while leveraging modern React tooling.

1. Install the React Library

You can install the Kinetic React library using either npm or Yarn:

via npm npm install @kinticdata/react
via yarn yarn add @kineticdata/react

2. Wrap Your App with `KineticLib`

The KineticLib component manages authentication, connects your app to the Kinetic Platform, and exposes useful context for routing and data fetching.

Here’s a basic example:

/**
 * /src/App.js
 */
import React from 'react';
import { KineticLib } from '@kineticdata/react';
import { Router, Route, Switch } from 'react-router-dom';
import Space from './Space';
import Kapp from './Kapp'; // see the Kapp component defined in `API` example below
const App = () => (
  <KineticLib>
    {({ initialized, loggedIn, loginProps }) => (
      <Router>
        {!initialized ? (
          <LoginLoading />
        ) : !loggedIn ? (
          <LoginScreen {...loginProps} />
        ) : (
          <Switch>
            <Route path="/" component={Space} />
            <Route path="/kapps/:kappSlug" component={Kapp} />
          </Switch>
        )}
      </Router>
    )}
  </KineticLib>
);
export default App;

3. Enable Local Development Access

To test locally using real data, you’ll need to configure your Space Security Settings.

In the Kinetic Space Console:

Navigate to Space > Settings > Security
Under Trusted Resource Domains, add: http://localhost:3000
Under Trusted Frame Domains, add: localhost:3000

This configuration allows your local dev server to securely access Kinetic APIs and support embedded authentication.

4. Configure OAuth for Local Login

To authenticate your app locally, set up an OAuth Client in your space:

Go to Space > Settings > OAuth
Click Add OAuth Client
Use the following configuration:

Name: Local Dev
Client ID: dev-client
Redirect URI: http://localhost:3000/#/OAuthCallback

Then, make sure your React app’s authentication config references the same Client ID.

Start Your Dev Server

Use yarn or npm to start your React app:

yarn start
# or
npm start

Your app should now be accessible at http://localhost:3000

It will connect to your Kinetic Platform using the OAuth settings you've configured.