bantam.hostbantam.host
Back to all frameworks
CLI Guide

Deploy Solid.js with Bantam CLI

Deploy reactive UI applications with fine-grained reactivity

Install Bantam CLI:

npm install -g @bantamhq/cli

View on NPM: @bantamhq/cli

Quick start:

# Build your Solid.js app
npm run build

# Deploy it
bantam deploy dist

Quick Start

1

Install dependencies

Install your Solid.js project dependencies

npm install
2

Build for production

Creates an optimized production build

npm run build
Vite bundles your Solid.js app into the dist directory
3

Deploy with Bantam

Your Solid.js app is now live!

bantam deploy dist
Get an instant URL like https://my-solid-app-abc123.bantam.site

Framework Details

Vite Configuration

Solid.js uses Vite by default. Customize your build configuration:

vite.config.js:

import { defineConfig } from 'vite';
import solidPlugin from 'vite-plugin-solid';

export default defineConfig({
  plugins: [solidPlugin()],
  build: {
    target: 'esnext',
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true
      }
    }
  }
});
Solid.js compiles away, resulting in tiny bundle sizes compared to other frameworks.

Routing Setup

For client-side routing with @solidjs/router, configure redirects:

public/_redirects:

/*    /index.html   200
Without this redirect rule, direct navigation to routes will return 404.

Build Output

Vite generates these in the dist directory:

  • index.html - Entry point with module scripts
  • assets/ - JavaScript bundles and CSS
  • Hashed filenames for optimal caching
  • Minimal runtime overhead
Solid's reactive system compiles to vanilla JS, no virtual DOM overhead.

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 JSX errors?

Ensure your Vite config includes the Solid plugin:

npm install -D vite-plugin-solid

// vite.config.js
import solidPlugin from 'vite-plugin-solid';

export default {
  plugins: [solidPlugin()]
};

02.Lazy loaded routes not working?

Configure Vite to handle code splitting properly:

// Use lazy imports
import { lazy } from 'solid-js';

const About = lazy(() => import('./pages/About'));

// In your router
<Route path="/about" component={About} />

03.Environment variables not available?

Use Vite's environment variable system:

// .env
VITE_API_URL=https://api.example.com

// In your app
const apiUrl = import.meta.env.VITE_API_URL;

// TypeScript support
/// <reference types="vite/client" />
interface ImportMetaEnv {
  readonly VITE_API_URL: string
}

04.Hydration errors with SSR?

For static deployment, disable SSR and use client-only rendering:

// index.jsx
import { render } from 'solid-js/web';
import App from './App';

render(() => <App />, document.getElementById('root'));

05.Large bundle size?

Optimize your build with rollup options:

// vite.config.js
export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          'solid-vendor': ['solid-js', '@solidjs/router'],
          'ui-vendor': ['@kobalte/core', '@solid-primitives/utils']
        }
      }
    },
    // Enable tree-shaking
    treeshake: {
      preset: 'recommended',
      moduleSideEffects: false
    }
  }
};