CLI Guide

Deploy Parcel with Bantam CLI

The zero configuration build tool for the web

Install Bantam CLI:

npm install -g @bantamhq/cli

View on NPM: @bantamhq/cli

Quick start:

# Build your Parcel app
parcel build src/index.html

# Deploy it
bantam deploy dist

Quick Start

Install dependencies

Install project dependencies

npm install

Build with Parcel

Bundle your application for production

parcel build src/index.html

Creates optimized files in the dist directory

Deploy with Bantam

Your Parcel app is now live!

bantam deploy dist

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

Framework Details

Parcel Configuration

Parcel works with zero configuration, but you can customize with package.json:

package.json:

{
  "name": "my-parcel-app",
  "source": "src/index.html",
  "scripts": {
    "start": "parcel",
    "build": "parcel build"
  },
  "targets": {
    "default": {
      "distDir": "./dist"
    }
  },
  "browserslist": "> 0.5%, last 2 versions, not dead"
}

Parcel automatically detects and installs dependencies as you import them.

Multiple Entry Points

Build multiple pages or apps:

Multiple HTML entries:

# Build multiple entry points
parcel build src/index.html src/about.html src/app.html

# Or use glob patterns
parcel build 'src/**/*.html'

Configure in package.json:

{
  "targets": {
    "app": {
      "source": "src/index.html",
      "distDir": "dist"
    },
    "admin": {
      "source": "src/admin.html",
      "distDir": "dist/admin"
    }
  }
}

Build Output

Parcel generates optimized bundles in dist:

index.html - Entry HTML with hashed assets
index.[hash].js - Bundled JavaScript
index.[hash].css - Compiled CSS
Automatic code splitting
Optimized images and assets

Parcel handles TypeScript, JSX, SCSS, and more without configuration.

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 failing with module errors?

Clear cache and rebuild:

# Clear Parcel cache
rm -rf .parcel-cache

# Reinstall and build
npm install
parcel build src/index.html

02.Assets not loading with correct paths?

Set the public URL for deployment:

# Build with specific public URL
parcel build src/index.html --public-url /

# Or configure in package.json
{
  "targets": {
    "default": {
      "publicUrl": "/"
    }
  }
}

03.TypeScript or JSX not working?

Parcel handles these automatically. Just ensure correct extensions:

// .ts or .tsx files work automatically
import React from 'react';

const App: React.FC = () => {
  return <div>Hello Parcel!</div>;
};

// No config needed!

For custom configs, create tsconfig.json or .babelrc

04.Environment variables not working?

Use .env files with Parcel:

# .env
API_URL=https://api.example.com

# .env.production
API_URL=https://api.production.com

// In your code
console.log(process.env.API_URL);

05.Want to analyze bundle size?

Use Parcel's bundle analyzer:

# Install bundle analyzer
npm install -D @parcel/reporter-bundle-analyzer

# Add to .parcelrc
{
  "extends": "@parcel/config-default",
  "reporters": ["...", "@parcel/reporter-bundle-analyzer"]
}

# Build with analysis
parcel build src/index.html