Installation
tari.js
consists of a set of packages.
Usually, you will need to install the base package and at least one package that implements a concrete provider.
Prerequisites
Before you begin with the above, however, you will need to have at minimum a default web project template set up in your IDE of choice. We have provided instructions for creating a base React + Vite project below in your IDE of choice, but you are not limited to React.
Tari.js is useable in any Typescript or Javascript application and framework, so you have full flexibility to choose whichever technology and framework suits you.
Create a React project
The quickest way to set up a new React project is to leverage vite
to do so.
In the terminal, run the following command below, and select Y
to continue
npm create vite@latest
When you run this command, you'll be likely asked to install the following. Select Y
to continue
Need to install the following packages:
create-vite@6.3.1
Ok to proceed? (y)
You'll be asked to enter a project name. You can call it what you like but to make it easy to follow along, let's call it the 'base-app
.
> npx
> create-vite
✔ Project name: … base-app
Next, select React
from the list of options:
? Select a framework: › - Use arrow-keys. Return to submit.
Vanilla
Vue
❯ React
Preact
Lit
Svelte
Solid
Qwik
Angular
Others
Lastly, choose the Typescript
variant:
? Select a variant: › - Use arrow-keys. Return to submit.
❯ TypeScript
TypeScript + SWC
JavaScript
JavaScript + SWC
React Router v7 ↗
Once this is done, you'll be instructed to enter the following commands. Do so in the same terminal:
cd latest
npm install
npm run dev
The above will install all the necessary dependencies and then run the template Vite + React application. When running the application, you'll see the following message:
VITE v6.2.1 ready in 123 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show help
The localhost:port
address indicates that you have the app running locally at that address. Entering the address in your browser will open up the stock app. You'll see something equivalent to the below:
You can view the project and its associated files on the left-hand side of VS Code
We'll be modifying this app to get your Hello Ootle app up and running. For now, you can proceed to the next step.
Install the base package
Use the below commands to install the tari.js base package.
- npm
- Yarn
- pnpm
npm install @tari-project/tarijs
yarn add @tari-project/tarijs
pnpm add @tari-project/tarijs
Install a provider or signer.
In order to use the wallet, you will need to connect either to an Ootle indexer or a signer that allows you to interact with the Ootle via several clients. We explain more about providers and signers in the following section, but in short:
- You will use an indexer when you simply want to obtain information from the Ootle.
- A signer is used when you wish to modify, interact with or create on the Ootle.
Quick Install Commands
For most use cases, install both provider and signer packages:
- npm
- Yarn
- pnpm
# Complete installation with indexer provider and wallet daemon signer
npm install @tari-project/tarijs @tari-project/indexer-provider @tari-project/wallet-daemon-signer
# Complete installation with indexer provider and wallet daemon signer
yarn add @tari-project/tarijs @tari-project/indexer-provider @tari-project/wallet-daemon-signer
# Complete installation with indexer provider and wallet daemon signer
pnpm add @tari-project/tarijs @tari-project/indexer-provider @tari-project/wallet-daemon-signer
For specific wallet types:
- npm
- Yarn
- pnpm
# MetaMask integration
npm install @tari-project/tarijs @tari-project/metamask-signer
# Tari Universe wallet
npm install @tari-project/tarijs @tari-project/tari-universe
# WalletConnect integration
npm install @tari-project/tarijs @tari-project/walletconnect
# MetaMask integration
yarn add @tari-project/tarijs @tari-project/metamask-signer
# Tari Universe wallet
yarn add @tari-project/tarijs @tari-project/tari-universe
# WalletConnect integration
yarn add @tari-project/tarijs @tari-project/walletconnect
# MetaMask integration
pnpm add @tari-project/tarijs @tari-project/metamask-signer
# Tari Universe wallet
pnpm add @tari-project/tarijs @tari-project/tari-universe
# WalletConnect integration
pnpm add @tari-project/tarijs @tari-project/walletconnect
Verification
After installation, verify everything works:
import { TariProvider } from '@tari-project/tarijs';
// This should not throw any import errors
console.log('tari.js installed successfully!');
Common Installation Issues
❌ Package not found errors
Problem: Module '@tari-project/tarijs' not found
Solution:
# Clear package manager cache
npm cache clean --force
# or for pnpm
pnpm store prune
# Reinstall
rm -rf node_modules package-lock.json
npm install
❌ TypeScript compilation errors
Problem: TypeScript can't find type definitions
Solution:
# Install TypeScript and Node types
npm install --save-dev typescript @types/node
# Ensure your tsconfig.json includes:
{
"compilerOptions": {
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"esModuleInterop": true
}
}
❌ Version compatibility issues
Problem: Conflicting dependency versions
Solution:
# Check for peer dependency warnings during install
npm install --legacy-peer-deps
# or use exact versions
npm install @tari-project/tarijs@latest
❌ Build tool configuration
Problem: Vite/Webpack build errors with tari.js
Solution:
For Vite, add to vite.config.ts
:
export default defineConfig({
optimizeDeps: {
include: ['@tari-project/tarijs']
},
define: {
global: 'globalThis',
}
});
For Webpack, add to config:
module.exports = {
resolve: {
fallback: {
"buffer": require.resolve("buffer"),
"crypto": require.resolve("crypto-browserify")
}
}
};
❌ Node.js polyfill errors in browser
Problem: Buffer is not defined
or similar Node.js polyfill errors
Solution:
# Install polyfills
npm install --save-dev buffer crypto-browserify
# For Vite projects, also install:
npm install --save-dev @esbuild-plugins/node-globals-polyfill
Next Steps
Once installation is complete:
- 📖 Read about Provider vs Signer concepts
- 🚀 Follow our Getting Started Tutorial
- 🔧 Set up your wallet connections
- 💼 Learn about transaction building
Need Help?
- 📚 Check our Troubleshooting Guide
- 💬 Ask questions in GitHub Discussions
- 🐛 Report bugs in GitHub Issues