Deploy a React App in 5 Minutes with PandaStack

# Deploy a React App in 5 Minutes with PandaStack

Deploying a React app should take five minutes, not five hours. PandaStack's GitHub integration and static site hosting make it genuinely that fast. Here is the complete process.

Prerequisites

• A React app (created with Create React App, Vite, or any build tool) pushed to a GitHub repository
• A free PandaStack account at [dashboard.pandastack.io](https://dashboard.pandastack.io)

Method 1: Dashboard Deployment (Recommended for First Deploy)

Step 1: Log In to PandaStack

Go to [dashboard.pandastack.io](https://dashboard.pandastack.io) and sign in with your GitHub account.

Step 2: Create a New Static Deployment

Click New Deployment → Static Site.

Step 3: Connect Your GitHub Repository

Click Connect GitHub, authorize PandaStack, and select your repository. PandaStack will list your repositories — find and select your React app.

Step 4: Configure Build Settings

If your React app uses Vite, change the output directory to dist.

Step 5: Add Environment Variables (Optional)

Click Add Environment Variable for each variable your app needs:

REACT_APP_API_URL=https://api.yourbackend.com
REACT_APP_FIREBASE_API_KEY=your-key-here

Note: Environment variables prefixed with REACT_APP_ are embedded at build time. Vite uses VITE_ prefix.

Step 6: Deploy

Click Deploy. PandaStack builds your app and deploys it to a *.pandastack.io subdomain. Total time: 2-4 minutes.

Method 2: CLI Deployment

# Install the PandaStack CLI
npm install -g @pandastack/cli

# Authenticate
panda login

# Deploy from your project directory
panda deploy --type static --build-cmd "npm run build" --output build

Method 3: Deploy Button

Add a one-click deploy button to your README:

[![Deploy to PandaStack](https://pandastack.io/deploy-button.svg)](https://dashboard.pandastack.io/deploy?repo=your-github-username/your-react-app)

Anyone clicking the button gets a copy of your app deployed to their own PandaStack account in one click.

Automatic Deploys on Push

After your initial setup, every push to the main branch (or your configured branch) triggers an automatic rebuild and deployment. No additional configuration required.

Connecting a Custom Domain

1. 1Go to your deployment in the dashboard
2. 2Click Domains → Add Domain
3. 3Enter app.yourdomain.com
4. 4Add a CNAME record pointing to your PandaStack deployment hostname
5. 5SSL certificate is provisioned automatically (Let's Encrypt)

DNS propagation typically takes a few minutes to a few hours.

Handling Client-Side Routing

React Router (and other client-side routers) require all paths to serve the same index.html. PandaStack handles this automatically for static site deployments — no Nginx config required.

Performance Tips

• Enable gzip compression (automatic on PandaStack)
• Use code splitting (React.lazy + Suspense) to reduce initial bundle size
• Optimize images before deployment
• Cache API responses where appropriate

Troubleshooting

Build fails: Check the build logs in the dashboard. Common issues: missing environment variables, wrong Node.js version, missing dependencies.

404 on refresh: PandaStack handles SPA routing automatically for static deployments.

Slow first load: Check bundle size with npm run build && npx source-map-explorer build/static/js/*.js.

Full documentation: [docs.pandastack.io](https://docs.pandastack.io).