CLI Guide

Deploy Vite with Bantam CLI

Deploy lightning-fast Vite apps with zero configuration

Install Bantam CLI:

npm install -g @bantamhq/cli

View on NPM: @bantamhq/cli

Quick start:

# Build your Vite app
npm run build

# Deploy it
bantam deploy ./dist

Quick Start

Build your Vite app

Vite's lightning-fast build creates optimized assets

npm run build

Output is generated in the ./dist directory by default

Preview locally (optional)

Test the production build locally before deploying

npm run preview

Deploy with Bantam

Your Vite app is live in seconds!

bantam deploy ./dist

Add --permanent for a permanent URL

Framework Details

Build Configuration

Customize Vite's build output for deployment:

vite.config.js - Basic configuration:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  build: {
    // Customize output directory (default: dist)
    outDir: 'build',
    // Generate source maps for debugging
    sourcemap: true,
    // Adjust chunk size warnings
    chunkSizeWarningLimit: 1000,
  }
})

Vite automatically handles code splitting, tree-shaking, and asset optimization.

Base Path Configuration

If deploying to a subdirectory, configure the base path:

Set base path for subdirectory deployment:

// vite.config.js
export default defineConfig({
  base: '/my-app/',
  // Or use relative paths
  base: './',
})

Ensure your routing library (React Router, Vue Router) is also configured for the base path.

Environment Variables

Vite exposes env variables prefixed with VITE_:

.env.production:

VITE_API_URL=https://api.production.com
VITE_APP_TITLE="My Production App"
VITE_ENABLE_ANALYTICS=true

Access in your app:

// Available as import.meta.env.VITE_*
const apiUrl = import.meta.env.VITE_API_URL
const isProd = import.meta.env.PROD

// TypeScript support
interface ImportMetaEnv {
  readonly VITE_API_URL: string
  readonly VITE_APP_TITLE: string
}

Asset Handling

Vite optimizes assets automatically:

Images under 4kb are inlined as base64
Larger assets get hashed filenames for caching
CSS is extracted and minified
Dynamic imports create separate chunks

Import assets for optimization:

import logo from './assets/logo.png'
import styles from './styles.module.css'

// Dynamic import for code splitting
const HeavyComponent = lazy(() => import('./HeavyComponent'))

Advanced Usage

Custom Domain

Deploy directly to your own domain

bantam deploy ./dist --domain myapp.com

Permanent Deployment

Keep your site online forever (requires login)

bantam deploy ./dist --permanent

Custom Expiry

Set how long your deployment stays online

bantam deploy ./dist --expiry-days 7

Custom Subdomain

Choose your own subdomain on bantam.site

bantam deploy ./dist --subdomain my-project

CI/CD Integration

Add Bantam to your continuous deployment pipeline:

# GitHub Actions example
- name: Deploy to Bantam
  run: |
    npm install -g @bantamhq/cli
    bantam login --token ${{ secrets.BANTAM_TOKEN }}
    bantam deploy ./dist --domain myapp.com --permanent

Troubleshooting

Common Issues & Solutions

Quick fixes for deployment challenges

01.Build fails with 'Cannot find module' errors

Ensure all dependencies are installed and check your import paths:

# Clean install dependencies
rm -rf node_modules package-lock.json
npm install

# Check for case-sensitive imports (common on CI/CD)
// ❌ Wrong case
import Component from './component'
// ✅ Correct case
import Component from './Component'

02.Assets not loading after deployment

This usually happens with incorrect base path configuration:

// For root deployment
export default defineConfig({
  base: '/',
})

// For subdirectory deployment
export default defineConfig({
  base: '/my-app/',
})

// For relative paths (works anywhere)
export default defineConfig({
  base: './',
})

03.Large bundle size warnings

Vite provides tools to analyze and reduce bundle size:

# Install bundle analyzer
npm i -D rollup-plugin-visualizer

// vite.config.js
import { visualizer } from 'rollup-plugin-visualizer'

export default defineConfig({
  plugins: [
    visualizer({
      open: true,
      gzipSize: true,
    })
  ],
  build: {
    // Enable minification
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,
      },
    },
  }
})

04.How to handle client-side routing?

For SPAs with client-side routing, configure fallback to index.html:

// Create public/_redirects file for Bantam
/*    /index.html   200

// Or configure in vite.config.js for dev server
export default defineConfig({
  server: {
    historyApiFallback: true
  }
})

This ensures all routes load your app's entry point.

05.Build performance optimization

Speed up Vite builds with these configurations:

export default defineConfig({
  build: {
    // Use esbuild for faster minification
    minify: 'esbuild',
    // Skip source maps in production
    sourcemap: false,
    // Increase the inline limit
    assetsInlineLimit: 10240,
  },
  // Pre-bundle dependencies
  optimizeDeps: {
    include: ['react', 'react-dom'],
  }
})