Skip to content
deploy-shot-client-next logo

Deploy shot-client-next to Fly.io

deploy-shot-client-next

Deploy the shot-client-next Next.js frontend application to Fly.io. Use this skill when deploying UI changes, updating environment variables, or releasing new versions to production.

SKILL.md

Full skill instructions

Deploy shot-client-next to Fly.io

Instructions

  1. Navigate to the shot-client-next directory
  2. Run npm run build to verify the build succeeds locally
  3. Verify all changes are committed to git
  4. Execute the deployment using fly deploy
  5. Monitor the deployment logs for build or startup errors
  6. Verify the application is running on Fly.io
  7. Test critical user flows in production (login, campaign management, fight creation)

Deployment Steps

# Navigate to shot-client-next
cd /​Users/​isaacpriestley/​tech/​isaacpriestley/​chi-war/​shot-client-next

# Verify build succeeds
npm run build

# Verify git status
git status

# Deploy to Fly.io
fly deploy

# Monitor deployment
fly logs

# Verify health
curl https://[your-app-name].fly.dev

Examples

  • User: "Deploy the latest frontend changes"
  • User: "Release the new UI updates to Fly.io"
  • User: "Push the Next.js updates to production"
  • User: "Deploy the client"
  • User: "Update the production frontend"
  • User: "Deploy shot-client-next"

Guidelines

  • Always verify the build succeeds locally before deploying
  • Ensure API endpoint URLs are correct for production environment
  • Monitor deployment logs for build or startup errors
  • Test responsive design and critical flows after deployment
  • Clear browser cache when testing UI changes
  • Verify WebSocket connections work properly
  • Deployment typically takes 3-5 minutes (includes Docker build)

Pre-Deployment Checklist

  • All changes committed to git
  • npm run build succeeds locally
  • No TypeScript errors
  • Environment variables configured in Fly.io
  • API base URL points to correct backend

Post-Deployment Checks

  • Test user login/​registration
  • Verify campaign switching works
  • Test WebSocket real-time updates
  • Check fight creation and management
  • Test character creation with AI image generation
  • Verify autocomplete components work
  • Test drawer forms and modals
  • Check responsive design on mobile

Environment Variables

Ensure these are set on Fly.io:

  • NEXT_PUBLIC_API_URL - Backend API URL (https://shot-elixir.fly.dev)
  • NEXT_PUBLIC_WS_URL - WebSocket URL
  • Any other required environment variables

Troubleshooting

If deployment fails:

  • Check fly logs for build errors
  • Verify Next.js build succeeds locally
  • Check environment variables with fly secrets list
  • Review recent git commits for breaking changes
  • Test API connectivity from production environment
  • Rollback if needed: fly releases rollback

Docker Build Notes

  • Uses Node.js 18+ base image
  • Multi-stage build for optimized image size
  • Production build with npm run build
  • Deployment process caches layers for faster rebuilds

More skills from majiayu000

xiaohongshu logo
majiayu000/claude-arsenal

xiaohongshu

xiaohongshu

286 148
View
agent-task-conductor logo
majiayu000/claude-skill-registry

agent-task-conductor

Conduct multi-agent task orchestration and workflow coordination.

663 1
View
conductor-setup logo
majiayu000/claude-skill-registry

conductor-setup

Initialize project with Conductor artifacts (product definition,

663 1
View
animation-designer logo
majiayu000/claude-skill-registry

animation-designer

Expert in web animations, transitions, and motion design using Framer Motion and CSS

663 1
View
diagramming logo
majiayu000/claude-skill-registry

diagramming

Creates Mermaid and ASCII diagrams for flowcharts, architecture, ERDs, state machines, mindmaps, and more. Use when user mentions diagram, flowchart, mermaid, ASCII diagram, text diagram, terminal diagram, visualize, C4, mindmap, architecture diagram, sequence diagram, ERD, or needs visual docume...

663 1
View
h3-pg logo
majiayu000/claude-skill-registry-data

h3-pg

PostgreSQL bindings for H3 hexagonal grid system. Use when working with H3 cells in Postgres, including spatial indexing, geometry/geography integration, and raster analysis.

23 1
View
conductor-development logo
majiayu000/claude-skill-registry

conductor-development

Context-Driven Development skill for projects using Conductor. Use this skill when you detect a `conductor/` directory in the project, when working on tasks defined in a `plan.md` file, or when the user asks about tracks, specs, or plans. Automatically applies TDD workflow, tracks task completion...

663 1
View
conductor-status logo
majiayu000/claude-skill-registry

conductor-status

Display project status, active tracks, and next actions

663 1
View
dockerization logo
majiayu000/claude-skill-registry

dockerization

Official Stakpak application containerization standard operating procedure, a step-by-step guidline to properly dockerize applications. This is a rule book curated by the Stakpak Team.

663 1
View

Popular AI tools

Kaiber logo
Video

Kaiber

Generate, edit, and beat-sync AI video with leading models in one workspace.

Paid
View
Vimcal logo
Productivity

Vimcal

The world's fastest calendar for remote work

Free
View

Transform Your Design with AI Designer by ImgCreator.ai

Freemium
View
Akool AI logo
Content & writing

Akool AI

Revolutionizing Video Production with AI-Powered Creativity

Paid
View

Extend an image past the frame and let AI fill the new aspect ratio.

Freemium
View
StarByFace logo
Security

StarByFace

Discover your celebrity doppelgänger with StarByFace!

Free
View
C

ChainClarity explains 700+ crypto whitepapers in plain English, with layered summaries, comparisons, research tools, alerts, and a $4.99 Pro plan.

Freemium
View
Opus Clip logo
Coding & apps

Opus Clip

Opus.ai: Revolutionize Your Web Experience

Free
View