Loading source
Pulling the file list, source metadata, and syntax-aware rendering for this listing.
Source from repo
Build complex multi-component claude.ai HTML artifacts using React, TypeScript, Tailwind CSS, and shadcn/ui
Files
Skill
Size
Entrypoint
Format
Open file
Syntax-highlighted preview of this file as included in the skill package.
scripts/bundle-artifact.sh
1#!/bin/bash2set -e34echo "๐ฆ Bundling React app to single HTML artifact..."56# Check if we're in a project directory7if [ ! -f "package.json" ]; then8echo "โ Error: No package.json found. Run this script from your project root."9exit 110fi1112# Check if index.html exists13if [ ! -f "index.html" ]; then14echo "โ Error: No index.html found in project root."15echo " This script requires an index.html entry point."16exit 117fi1819# Install bundling dependencies20echo "๐ฆ Installing bundling dependencies..."21pnpm add -D parcel @parcel/config-default parcel-resolver-tspaths html-inline2223# Create Parcel config with tspaths resolver24if [ ! -f ".parcelrc" ]; then25echo "๐ง Creating Parcel configuration with path alias support..."26cat > .parcelrc << 'EOF'27{28"extends": "@parcel/config-default",29"resolvers": ["parcel-resolver-tspaths", "..."]30}31EOF32fi3334# Clean previous build35echo "๐งน Cleaning previous build..."36rm -rf dist bundle.html3738# Build with Parcel39echo "๐จ Building with Parcel..."40pnpm exec parcel build index.html --dist-dir dist --no-source-maps4142# Inline everything into single HTML43echo "๐ฏ Inlining all assets into single HTML file..."44pnpm exec html-inline dist/index.html > bundle.html4546# Get file size47FILE_SIZE=$(du -h bundle.html | cut -f1)4849echo ""50echo "โ Bundle complete!"51echo "๐ Output: bundle.html ($FILE_SIZE)"52echo ""53echo "You can now use this single HTML file as an artifact in Claude conversations."54echo "To test locally: open bundle.html in your browser"