Skip to main content

​
Prerequisites

Before installing Raze, ensure you have the following:

Node.js

Version 18 or later recommended

npm

Comes bundled with Node.js
Verify your Node.js version by running node --version in your terminal

​
Quick Start

​
1. Clone the Repository

git clone https://github.com/razedotbot/solana-ui.git
cd solana-ui

​
2. Install Dependencies

npm install

​
3. Start Development Server

npm run dev
The development server will start at http://localhost:5173

​
One-Click Deployment

Prefer not to run locally? Deploy instantly to the cloud:

Deploy with Vercel

Zero-config deployment

Deploy with Netlify

Continuous deployment

​
Production Build

​
Build for Production

npm run build
This command will:
  1. Run TypeScript type checking
  2. Generate HTML from templates
  3. Bundle and optimize the application

​
Preview Production Build

npm run preview

​
Deploy the dist Folder

After building, deploy the contents of the dist folder to your hosting provider.

​
Available Scripts

CommandDescription
npm run devStart development server with hot reload
npm run buildBuild for production
npm run previewPreview production build locally
npm run lintRun ESLint for code quality
npm run typecheckRun TypeScript type checking
npm run analyzeAnalyze bundle size
npm run generate-htmlRegenerate HTML from template

​
Project Structure

solana-ui/
├── src/
│   ├── components/       # Reusable UI components
│   │   ├── modals/       # Modal dialogs
│   │   └── tools/        # Trading tools & automation
│   ├── contexts/         # React contexts
│   ├── pages/            # Page components
│   │   ├── HomePage.tsx
│   │   ├── WalletsPage.tsx
│   │   ├── AutomatePage.tsx
│   │   ├── DeployPage.tsx
│   │   └── SettingsPage.tsx
│   └── utils/            # Utility functions
├── docs/                 # Documentation
├── scripts/              # Build scripts
├── brand.json            # Brand configuration
├── green.css             # Default theme
└── package.json

​
Configuration

​
Environment Setup

Raze uses a configuration system stored in the browser. Key settings include:
​
RPC Endpoints
array
Configure multiple RPC endpoints with weighted load balancing
​
Trading Server
string
Optional self-hosted trading server URL
​
API Key
string
Data stream API key for real-time market data

​
Brand Configuration

Customize branding by editing brand.json: 
{
  "brand": {
    "name": "Your Brand",
    "displayName": "YOUR BRAND",
    "domain": "yourdomain.com",
    "appUrl": "https://app.yourdomain.com",
    "docsUrl": "https://docs.yourdomain.com",
    "theme": {
      "name": "green"
    }
  }
}
After editing, regenerate HTML: 
npm run generate-html

​
Theme Customization

Edit green.css or create a new theme file: 
:root {
  /* Primary Colors */
  --color-primary: #02b36d;
  --color-primary-light: #04d47c;
  --color-primary-dark: #01a35f;
  
  /* Background Colors */
  --color-bg-primary: #050a0e;
  --color-bg-secondary: #0a1419;
  
  /* And many more... */
}

​
Troubleshooting

The dev server defaults to port 5173. If it’s in use, Vite will automatically try the next available port. You can also specify a port:
npm run dev -- --port 3000
Ensure you’re using Node.js 18 or later:
node --version
# Should output v18.x.x or higher
Consider using nvm to manage Node.js versions.
Run type checking separately to see detailed errors:
npm run typecheck
Configure multiple RPC endpoints in Settings for redundancy. The app will automatically rotate between endpoints if one fails.

​
Next Steps

Technical Integration

Embed Raze in your application

Key Features

Explore all features