How to Deploy SPA Apps (Vite, Next.js, Laravel Inertia) to cPanel

If you're building modern web apps using tools like Vite, Next.js, or Laravel with Inertia.js, you might hit a wall when it's time to deploy to cPanel. The main issue? cPanel doesn't support build tools like Vite or Webpack out of the box.

But don't worry — if you're on a budget and stuck with cPanel shared hosting, there are still ways to get your app deployed in production. Here’s how.

Why Build Outside cPanel?

Shared hosting environments like cPanel typically do not support Node.js environments or terminal access required to run npm install or npm run build. That’s why you need to build your app outside of cPanel — either locally or using CI/CD tools like GitHub Actions.

🖥 Deploy Automatically Using GitHub Actions (Recommended)

Requirements

• SSH access to your cPanel server
• Private key for SSH authentication
• A GitHub repository

Step-by-Step

1. Understand GitHub Actions first
   You can start with their official docs.

2. Generate an SSH key pair locally:

   ssh-keygen -t ed25519 -C "[email protected]"

3. Add the public key to your cPanel server:

   cat ~/.ssh/id_ed25519.pub >> ~/.ssh/authorized_keys
   chmod 644 ~/.ssh/authorized_keys

4. Add Secrets to your GitHub repo
   Navigate to:
   https://github.com/your-username/your-repo-name/settings/secrets/actions

   Add the following secrets:

   • SSH_HOST — your server IP or domain
   • SSH_USERNAME — your cPanel username
   • SSH_PASSWORD — optional if using key-based auth
   • SSH_PORT — usually 22, but check with your hosting provider
   • SSH_PRIVATE_KEY — your private key content from step 2

5. Add variables to GitHub Actions
   Navigate to:
   https://github.com/your-username/your-repo-name/settings/variables/actions

   • DEPLOY_PATH — the path to your public folder on cPanel (e.g., /home/username/public_html)

6. Example GitHub Actions Workflow
   Add this file as .github/workflows/deploy.yml:

   name: Deploy to cPanel
    
   on:
     push:
       branches:
         - main
    
   jobs:
     deploy:
       runs-on: ubuntu-latest
    
       steps:
         - name: Checkout code
           uses: actions/checkout@v3
    
         - name: Install dependencies
           run: npm install
    
         - name: Build project
           run: npm run build
    
         - name: Upload build to server
           uses: appleboy/scp-action@master
           with:
             host: ${{ secrets.SSH_HOST }}
             username: ${{ secrets.SSH_USERNAME }}
             key: ${{ secrets.SSH_PRIVATE_KEY }}
             port: ${{ secrets.SSH_PORT }}
             source: "public/build"
             target: "${{ vars.DEPLOY_PATH }}/public/build"

7. Done!
   Now whenever you push to the main branch, GitHub will build and deploy your app automatically to your cPanel server 🎉

📃 Manual Deployment (Copy-Paste Build Files)

If you don’t want to set up GitHub Actions, you can always build the app locally and manually upload the output.

Requirements

• Node.js installed locally
• FTP/SSH access to your cPanel server

Step-by-Step

1. Run:

   npm install
   npm run build

2. Upload the contents of your /public/build folder to the corresponding folder in your cPanel (e.g., /public_html/public/build).

This is the easiest approach if you’re only making occasional changes.

⚠️ Committing Build Files to Git (Not Recommended)

This method is strongly discouraged, but in case it's your only option, here’s how to do it.

Why It's Bad

• Bloats your Git history
• Makes pull/push operations slower
• Not a scalable or clean workflow

Step-by-Step

1. Remove public/build from .gitignore (if listed)

2. Build your app:

   npm install
   npm run build

3. Add the build output to Git:

   git add public/build
   git commit -m "chore: add build files"
   git push origin main

Only use this as a last resort.

💡 Budget-Friendly Tips for Production

• GitHub Actions is free for public repos and quite generous for private ones.
• If you're not using SSR/SSG features in Next.js, consider exporting your app as static HTML (next export) — easier to host and faster to load.
• Compare shared hosting vs cloud platforms — providers like Vercel, Netlify, or Render often provide free tiers with better dev experience than traditional cPanel.

Final Thoughts

Deploying modern frontend apps to cPanel may not be ideal, but with the right setup, it’s very much doable — even if you're on a tight budget. If you ever need more flexibility, you can consider switching to affordable VPS providers like DigitalOcean, Hetzner, or Fly.io.

Good luck, and happy shipping 🚀