> ## Documentation Index
> Fetch the complete documentation index at: https://docs.raze.bot/llms.txt
> Use this file to discover all available pages before exploring further.

# Locally Install

> Get Raze running on your local machine

## Prerequisites

Before installing Raze, ensure you have the following:

<CardGroup cols={2}>
  <Card title="Node.js" icon="node-js">
    Version 18 or later recommended
  </Card>

  <Card title="npm" icon="npm">
    Comes bundled with Node.js
  </Card>
</CardGroup>

<Check>
  Verify your Node.js version by running `node --version` in your terminal
</Check>

## Quick Start

### 1. Clone the Repository

```bash theme={null}
git clone https://github.com/razedotbot/solana-ui.git
cd solana-ui
```

### 2. Install Dependencies

```bash theme={null}
npm install
```

### 3. Start Development Server

```bash theme={null}
npm run dev
```

<Info>
  The development server will start at `http://localhost:5173`
</Info>

## One-Click Deployment

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

<CardGroup cols={2}>
  <Card title="Deploy with Vercel" icon="triangle" href="https://vercel.com/new/git/external?repository-url=https://github.com/razedotbot/solana-ui">
    Zero-config deployment
  </Card>

  <Card title="Deploy with Netlify" icon="n" href="https://app.netlify.com/start/deploy?repository=https://github.com/razedotbot/solana-ui">
    Continuous deployment
  </Card>
</CardGroup>

## Production Build

### Build for Production

```bash theme={null}
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

```bash theme={null}
npm run preview
```

### Deploy the `dist` Folder

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

## Available Scripts

| Command                 | Description                              |
| ----------------------- | ---------------------------------------- |
| `npm run dev`           | Start development server with hot reload |
| `npm run build`         | Build for production                     |
| `npm run preview`       | Preview production build locally         |
| `npm run lint`          | Run ESLint for code quality              |
| `npm run typecheck`     | Run TypeScript type checking             |
| `npm run analyze`       | Analyze bundle size                      |
| `npm run generate-html` | Regenerate 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:

<ParamField path="RPC Endpoints" type="array">
  Configure multiple RPC endpoints with weighted load balancing
</ParamField>

<ParamField path="Trading Server" type="string">
  Optional self-hosted [trading server](/resources/trading-server) URL
</ParamField>

<ParamField path="API Key" type="string">
  Data stream API key for real-time market data
</ParamField>

### Brand Configuration

Customize branding by editing `brand.json`:

```json theme={null}
{
  "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:

```bash theme={null}
npm run generate-html
```

### Theme Customization

Edit `green.css` or create a new theme file:

```css theme={null}
: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

<AccordionGroup>
  <Accordion title="Port 5173 already in use">
    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:

    ```bash theme={null}
    npm run dev -- --port 3000
    ```
  </Accordion>

  <Accordion title="Node.js version errors">
    Ensure you're using Node.js 18 or later:

    ```bash theme={null}
    node --version
    # Should output v18.x.x or higher
    ```

    Consider using [nvm](https://github.com/nvm-sh/nvm) to manage Node.js versions.
  </Accordion>

  <Accordion title="Build fails with TypeScript errors">
    Run type checking separately to see detailed errors:

    ```bash theme={null}
    npm run typecheck
    ```
  </Accordion>

  <Accordion title="RPC connection issues">
    Configure multiple RPC endpoints in Settings for redundancy. The app will automatically rotate between endpoints if one fails.
  </Accordion>
</AccordionGroup>

## Next Steps

<CardGroup cols={2}>
  <Card title="Technical Integration" icon="code" href="/solana-ui/how-to-use/technical-integration">
    Embed Raze in your application
  </Card>

  <Card title="Key Features" icon="sparkles" href="/solana-ui/solana-multi-wallet/key-features">
    Explore all features
  </Card>
</CardGroup>