Biconomy SDK

Initialize Frontend

Now it is time to work on our Frontend. We will be using React and Vite to build this to keep our frontend simple and the default React and Vite template actually gives us a nice Counter button UI to connect with our contract.
You can learn more about how to set up this frontend here or just follow the instructions below.
With NPM:
With Yarn:
yarn create vite
With PNPM:
pnpm create vite
You can follow the prompts to receive the scaffolding for your React application. You can use any of the package managers of your choice, but to keep things simple we will be using Yarn from this point.
Install the following dependencies:
yarn add @biconomy/core-types @biconomy/smart-account @biconomy/web3-auth [email protected]
We will use these tools to build out our front end. In addition, lets also install the following:
yarn add @esbuild-plugins/node-globals-polyfill rollup-plugin-polyfill-node stream-browserify
After installing the above dependencies update you vite.config.ts to the following:
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";
import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'
export default defineConfig({
plugins: [react()],
optimizeDeps: {
esbuildOptions: {
define: {
global: "globalThis",
plugins: [
buffer: true
resolve: {
alias: {
process: "process/browser",
stream: "stream-browserify",
util: "util",
This configuration deals with a few breaking changes introduced by webpack 5. You can learn more about these changes here.