Prepare your project
Before you start
Before adding AppKit, you need a JavaScript project with a module bundler. If you already have one, skip the scaffold step. The Buffer polyfill is required either way — AppKit's dependencies (@ton/core and @ton/crypto) use Node.js' Buffer global, which browsers don't expose and bundlers (Vite, esbuild, Rollup, Parcel) don't polyfill automatically. Without it, the first call into @ton/core — usually address parsing — throws ReferenceError: Buffer is not defined.
The polyfill must run before any AppKit import. Load it from a dedicated module in the HTML entry, ahead of the application script — relying on import order inside the entry file alone is fragile.
The steps below use Vite. The same pattern applies to any module-based bundler (Webpack, Parcel, Rollup): a dedicated polyfill module referenced from the HTML entry, before the application script.
Steps
Scaffold a project (skip if you already have one)
Create a new Vite project with the React + TypeScript template.
pnpm create vite my-app --template react-ts
cd my-app
pnpm installSwap pnpm for npm create or yarn create if you don't use pnpm.
Install the polyfill package
npm i bufferCreate a polyfill module
Add a file that imports buffer and exposes it on window. Use .ts for TypeScript projects, .js otherwise.
// src/buffer.ts
import { Buffer } from 'buffer';
window.Buffer = Buffer;Load it before the application entry
In index.html, reference the polyfill from a <script type="module"> placed above the application entry. Module scripts execute in document order, so the polyfill resolves before any application import.
<!-- index.html -->
<body>
<div id="root"></div>
<script type="module" src="/src/buffer.ts"></script>
<script type="module" src="/src/main.tsx"></script>
</body>Next steps
Last updated on