Injective | TS & dApps Docs
DocumentationInjective TS
  • Overview
  • Getting Started
    • Technical Concepts
    • Application Concepts
      • Calculations
        • Min Price Tick Size
        • Min Quantity Tick Size
      • Networks
      • CosmJs Support
    • Assets
      • Creating Tokens
      • Denom Client (deprecated)
      • Injective Lists
    • Running examples
  • Wallets
    • Getting Started
    • Accounts
    • Wallet Connections
    • Wallet Strategy
    • Offchain (Arbitrary) Data
  • Querying
    • Getting Started
    • Chain
      • Auction
      • Auth
      • Bank
      • Distribution
      • Exchange
      • Governance
      • IBC
      • Mint
      • Insurance Funds
      • Oracle
      • Peggy
      • Permissions
      • Staking
      • Tendermint
      • Wasm
      • WasmX
      • Token Factory
    • Indexer
      • Account
      • Auction
      • Derivatives
      • Explorer
      • Insurance Funds
      • Markets
      • Leaderboard
      • Mito
      • Oracle
      • Portfolio
      • Spot
      • Web3Gw Transactions
      • Streaming
        • Account
        • Auction
        • Derivatives
        • Oracle
        • Portfolio
        • Spot
        • Explorer
    • Ethereum (GraphQL)
  • Transactions
    • Getting Started
    • Cosmos
      • Ledger through Keplr Wallet
    • Ethereum
      • Ethereum Ledger
    • MsgBroadcaster
    • Private Key
    • Web3 Gateway
  • Core Modules (& examples)
    • Getting Started
    • Auction
    • AuthZ
    • Bank
    • Distribution
    • Exchange
    • Feegrant
    • Governance
    • IBC
    • Insurance
    • Peggy
    • Permissions
    • Staking
    • Tokenfactory
    • Wasm
  • Smart Contracts
    • Cosmwasm
      • Injective Name Service
      • Neptune Service
      • CW20 to Bank & Market Order in One Transaction
  • Bridges
    • Getting Started
    • Ethereum
    • IBC
    • Wormhole
  • Building Dapps
    • Getting Started
    • Configuring Nuxt
    • Configuring React
    • dApps Examples
      • Smart Contract
      • DEX
      • Bridge
      • Simple HTML example with Webpack
Powered by GitBook
On this page
  • React - Library for building user interfaces
  • 1. Installing React
  • 2. Installing @injectivelabs packages
  • 3. Configuring Vite and adding polyfills
  • 4. Using a state management
  • 5. vite.config.ts
  • 8. Booting our app
  1. Building Dapps

Configuring React

PreviousConfiguring NuxtNextdApps Examples

Last updated 2 months ago

React - Library for building user interfaces

React is currently one of the most popular UI Frameworks. We are going to help you configure React + the Vite builder with the @injectivelabs packages and some polyfills since you'll need them to interact with Crypto wallets.

1. Installing React

Follow the Getting Started guide at and setup your application.

$ npm create vite@latest

2. Installing @injectivelabs packages

You can install the @injectivelabs packages using yarn.

$ yarn add @injectivelabs/sdk-ts @injectivelabs/networks @injectivelabs/ts-types @injectivelabs/utils

## If you need Wallet Connection
$ yarn add @injectivelabs/wallet-strategy

These are the most commonly used packages from the injective-ts monorepo.

3. Configuring Vite and adding polyfills

First, add the needed polyfill packages

$ yarn add @bangjelkoski/vite-plugin-node-polyfills

4. Using a state management

React has a lot of different state managers, pick the one you are going to use and install it. You can use the build in Context API for state management without the need to install a third-party solution. The preferred third-party state managers are Redux and Zustand.

$ yarn add zustand

5. vite.config.ts

The last step is to configure Vite to use the node-polyfills that we installed earlier.

Open up vite.config.ts and add node-polyfills inside the plugins array.

Your config should look like this:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import { nodePolyfills } from "@bangjelkoski/vite-plugin-node-polyfills";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), nodePolyfills({ protocolImports: true })],
});

8. Booting our app

Finally, you can start your app locally using yarn dev or build for production using yarn build which you can deploy to any static page hosting like Netlify, Vercel, etc.

Vite Docs