Vite Installation

Vite Installation Guide for Squid Widget

This guide will help you integrate the Squid Widget into your Vite + TypeScript project.

For a complete working example, check out our full Vite example.

Prerequisites

Ensure you have the following installed:

• Node.js

• Yarn or npm

• Git (for cloning the example repository)

Installation Steps

Step 1: Install Dependencies

First, install the Squid Widget and necessary dependencies:

yarn add @0xsquid/widget@^3.0.10

Step 2: Add Polyfills

Squid requires some polyfills for browser compatibility. Follow these steps to add them:

1. Install the vite-plugin-node-polyfills plugin:

yarn add vite-plugin-node-polyfills -D

1. Update your vite.config.ts file:

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

export default defineConfig({
  plugins: [
    react(),
    nodePolyfills()
  ]
})

Step 3: Integrate the Widget

Add the Squid Widget to your desired component. For example, in src/App.tsx:

import { SquidWidget } from "@0xsquid/widget";

function App() {
  return (
    <div>
      <SquidWidget
        config={{
          integratorId: "<your-integrator-id>",
          apiUrl: "https://apiplus.squidrouter.com",
          // Add other configuration options here
        }}
      />
    </div>
  );
}

export default App;

Replace <your-integrator-id> with the Integrator ID you received from Squid.

Running Your Vite App

After setting up the widget, you can start your Vite development server:

yarn dev

Example Project

For a full working example, you can clone our example repository:

# Clone the repo
git clone https://github.com/0xsquid/widget-integrations.git

# Move to the Vite example folder
cd packages/squid-v2/vite/vite-5.5-typescript

# Install dependencies
yarn install

# Start the development server
yarn dev

Customization

To customize the widget's appearance and behavior:

1. Use the Squid Widget Studio to generate a custom configuration.
2. Copy the generated config and paste it into your config prop in the SquidWidget component.

Troubleshooting

If you encounter any issues:

1. Ensure you're using the latest version of the widget (^3.0.10).

2. Verify that you've correctly configured the vite.config.ts file with the polyfills.

3. Check that you've added the correct integratorId and apiUrl in the widget config.

4. Make sure all dependencies are properly installed.