Forem: kristiansnts

Deploy Laravel on Vercel for Free — Even Heavy Filament Apps

kristiansnts — Thu, 05 Mar 2026 13:48:28 +0000

How I bypassed Vercel's 250MB limit using a Go serverless proxy, compressed vendor, and a bundled PHP-FPM binary

The Problem

I wanted to deploy a Laravel + Filament app on Vercel's free Hobby plan. Two walls hit me immediately:

250MB size limit — Vercel serverless functions have a hard 250MB unzipped cap. My vendor/ directory alone was over 200MB with Filament, Dompdf, and other packages.
HTTP 494 errors — Using SESSION_DRIVER=cookie (the only stateless option) caused "Request Header Too Large" because Filament stuffs too much data into the session cookie, exceeding Vercel's ~8KB header limit.

vercel-php is a great project, but it couldn't solve the size problem for heavy apps.

The Solution: A Go Proxy + Compressed Vendor

I built vercel-laravel-go — a Go serverless function that wraps PHP-FPM and compresses vendor from ~200MB down to ~30MB.

Here's what happens at a high level:

HTTP Request → Vercel → Go Handler → FastCGI → PHP-FPM → Laravel

The Go function handles the entire PHP lifecycle:

Bundles a static PHP-FPM binary at build time (no runtime download needed)
Extracts vendor.tar.gz to /tmp/vendor on cold start (~30MB compressed vs 200MB+ raw)
Creates symlinks so Composer's autoloader resolves classes correctly
Redirects storage to writable /tmp/storage (since /var/task is read-only on Vercel)
Starts PHP-FPM on a Unix socket and proxies every request via FastCGI

Why Go?

Vercel's @vercel/go runtime compiles everything into a single binary. This lets me:

Embed PHP-FPM and vendor.tar.gz into the function package
Use sync.Once for one-time cold start initialization
Keep PHP-FPM alive across warm invocations (container reuse)
Handle FastCGI protocol directly without extra dependencies

The Technical Deep Dive

Vendor Compression

The pack.sh script runs composer install --no-dev --optimize-autoloader, then compresses vendor/ into a tarball, excluding tests and docs:

# Run locally before deploy
bash scripts/pack.sh

This typically gets a 200MB+ vendor directory down to ~30MB.

Build-Time Preparation

During Vercel's build phase, vercel-prepare.sh runs automatically:

Copies Laravel source files (app/, config/, routes/, etc.) into api/laravel/
Downloads the static PHP-FPM 8.4 binary from static-php-cli

These get bundled with the Go function — no network calls at runtime.

Cold Start Bootstrap

When the first request hits, the Go handler:

Extracts the PHP-FPM binary to /tmp/php-fpm-bin
Extracts vendor.tar.gz to /tmp/vendor
Creates writable directories under /tmp/storage/
Creates symlinks: /tmp/app → /var/task/laravel/app, /tmp/config → /var/task/laravel/config, etc.
Generates a PHP entry point that overrides PackageManifest::$vendorPath and storagePath
Starts PHP-FPM and waits for the socket

Subsequent requests on the same container skip all of this — PHP-FPM stays running.

Why the Symlinks?

This is the trickiest part. Composer's autoloader calculates $baseDir as two directories up from vendor/composer/. When vendor lives at /tmp/vendor/, it looks for app classes at /tmp/app/, /tmp/config/, etc. But our source files are at /var/task/laravel/. Symlinks bridge that gap.

Sessions with Redis

Cookie sessions are out (HTTP 494). File sessions are out (each invocation gets a fresh /tmp). The solution: Upstash Redis (free tier).

SESSION_DRIVER=redis
REDIS_CLIENT=predis
REDIS_URL=rediss://default:password@host:port

Getting Started

It's a one-liner install. Run this in your Laravel project root:

curl -fsSL https://raw.githubusercontent.com/kristiansntsdev/vercel-laravel-go/main/install.sh | bash

Then:

# 1. Compress vendor
bash scripts/pack.sh

# 2. Deploy
vercel deploy --prod

Environment Variables

Set these in the Vercel dashboard:

Variable	Value
`APP_KEY`	`php artisan key:generate --show`
`DB_*`	Your database credentials
`REDIS_URL`	Upstash Redis URL

Everything else (cache paths, session config, log channel) is pre-configured in vercel.json.

CI/CD with GitHub Actions

The installer also sets up .github/workflows/deploy.yml. Add three secrets to your repo:

VERCEL_TOKEN — from vercel.com → Settings → Tokens
VERCEL_ORG_ID — your Vercel user/team ID
VERCEL_PROJECT_ID — from your project settings

Push to main and it deploys automatically.

Performance

Metric	Value
Cold start	~2–3 seconds
Warm request	Fast (PHP-FPM stays alive)
Bundle size	~50–80MB compressed
PHP version	8.4 (static binary)

Reducing Cold Starts

Use a free external pinger to keep your container warm:

cron-job.org — ping every 5 minutes, free
UptimeRobot — monitor every 5 minutes, free

Limitations

Be aware of the trade-offs:

No persistent filesystem — use a managed database
No queue workers — run those on Railway, Fly.io, or similar
No cron — use an external scheduler or Vercel Pro cron
60s max request duration on Hobby plan
No static IP — use a serverless-friendly database (Neon, Supabase, PlanetScale)

Wrapping Up

If you've been stuck trying to deploy a heavy Laravel app on Vercel, give vercel-laravel-go a try. It works with Laravel 11 and 12, handles Filament apps without breaking a sweat, and deploys on Vercel's free tier.

The key insight: compress vendor, bundle PHP-FPM, and let Go handle the plumbing.

Star the repo if it helps: github.com/kristiansntsdev/vercel-laravel-go

Building a Blog CMS with ShadPanel: A Step-by-Step Guide

kristiansnts — Tue, 02 Dec 2025 16:40:55 +0000

description: "Build a complete blog CMS from scratch in less than 10 minutes with ShadPanel"

Building a Blog CMS with ShadPanel: A Step-by-Step Guide

I spent the last hour building a complete blog CMS from scratch. No boilerplate copy-pasting, no hours of configuration. Just straight development. Here's how I did it with ShadPanel.

What We're Building

A functional blog CMS with:

User management (authors)
Post creation with relationships
Admin dashboard with data tables
Form validation and error handling

Total setup time: Less than 10 minutes.

Step 1: Install ShadPanel CLI

First, install ShadPanel globally:

npm install -g shadpanel

Then initialize your project:

cd blog-app
shadpanel init

ShadPanel will prompt you with several questions:

✓ What is your project name? … blog-app
✓ What do you want to install? › Full Panel with Auth
✓ Which package manager do you want to use? › pnpm
✓ Which authentication providers do you want? › Email/Password (Credentials), Google OAuth
✓ Do you want to include demo pages? (recommended for learning) … no
✓ Initialize a git repository? … no

Choose your preferences based on your needs. It handles dependency installation automatically.

This scaffolds a Next.js 15 project with everything pre-configured:

Authentication (NextAuth.js)
UI components (shadcn/ui)
Form builders
Data tables
Sidebar navigation

No need to manually install components. No configuration hell.

Step 2: Database Setup

Initialize the database:

shadpanel db init

This prompts you to select a database driver. I chose PostgreSQL.

It automatically:

Creates .env with database URL
Installs @prisma/client and prisma
Generates initial Prisma schema

Using Neon (Serverless Postgres)

I used Neon for this project. It's serverless PostgreSQL with a generous free tier. Perfect for prototyping.

Create a new project on Neon and copy the connection string.

Edit .env:

DATABASE_URL="postgresql://user:password@ep-xxx.region.aws.neon.tech/dbname?sslmode=require"

Alternative: Local PostgreSQL with Docker

If you prefer local development:

docker run --name postgres \
  -e POSTGRES_PASSWORD=password \
  -e POSTGRES_DB=blog_db \
  -p 5432:5432 \
  -d postgres:15

Then use:

DATABASE_URL="postgresql://postgres:password@localhost:5432/blog_db"

Don't forget to set your NextAuth configuration:

NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your-secret-here

Step 3: Generate Initial Prisma Client

Before defining your schema, generate the Prisma client:

shadpanel db generate

This creates the initial Prisma client from the default schema.

Step 4: Define Your Schema

Edit prisma/schema.prisma:

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

generator client {
  provider = "prisma-client-js"
}

model User {
  id        Int      @id @default(autoincrement())
  email     String   @unique
  name      String?
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
  posts     Post[]
}

model Post {
  id        Int      @id @default(autoincrement())
  title     String
  content   String?
  authorId  Int
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
  author    User     @relation(fields: [authorId], references: [id])
}

Two models. One relationship. Keep it simple.

Step 5: Create Database Migration

Create the migration:

shadpanel db migrate make create_user_and_post_tables

This generates a migration file in prisma/migrations/ based on your schema diff.

Apply the migration:

shadpanel db migrate run

Tables created. Schema synced.

Now you have type-safe database access throughout your app.

Step 6: Generate Resources with ShadPanel

This is where ShadPanel shines. Instead of manually creating CRUD pages, use the resource generator:

shadpanel resource user
shadpanel resource post

This automatically generates:

List page with data table (app/admin/dashboard/users/page.tsx)
Create page with form (app/admin/dashboard/users/create/page.tsx)
Edit page with form (app/admin/dashboard/users/edit/[id]/page.tsx)
Server actions for CRUD operations (app/admin/dashboard/users/actions.ts)

Each resource comes with:

Searchable, sortable data tables
Form validation
Toast notifications
Loading states
Error handling

The generator reads your Prisma schema and creates TypeScript interfaces automatically.

Step 7: Create Prisma Client Utility

Create lib/prisma.ts:

import { PrismaClient } from "@prisma/client";

const globalForPrisma = globalThis as unknown as {
  prisma: PrismaClient | undefined;
};

const prisma = globalForPrisma.prisma ?? new PrismaClient();

if (process.env.NODE_ENV !== "production") {
  globalForPrisma.prisma = prisma;
}

export default prisma;

This prevents multiple Prisma instances during development hot reload.

Step 8: Fix Create and Edit Pages

The generated forms need some adjustments for the relationship between posts and users.

Update Posts Create Page

Edit app/admin/dashboard/posts/create/page.tsx:

Add user fetching at the top:

import { getUsers } from "@/app/admin/dashboard/users/actions";

const [users, setUsers] = useState<any[]>([]);

useEffect(() => {
  async function fetchUsers() {
    try {
      const rows = await getUsers();
      const normalized = (rows || []).map((r: any) => ({
        id: r.id,
        email: r.email ?? "",
        name: r.name ?? "",
      }));
      setUsers(normalized);
    } catch (err: any) {
      toast.error("Failed to load users");
    }
  }
  fetchUsers();
}, []);

Update the author field in the form:

<FormSelect
  accessor="authorId"
  label="Author"
  options={users.map((r) => ({
    value: r.id,
    label: r.name || r.email,
  }))}
/>

Update the submit handler to convert authorId to integer:

const result = await createPost({
  title: values.title,
  content: values.content,
  authorId: parseInt(values.authorId), // Convert to integer
  createdAt: now.toISOString(),
  updatedAt: now.toISOString(),
});

Update Posts Edit Page

Edit app/admin/dashboard/posts/edit/[id]/page.tsx with the same changes:

Fetch users on mount
Update FormSelect with user options
Convert authorId to integer on submit

Update Config Menu

Edit config/menu.ts to organize your navigation:

import { Users, House, StickyNote } from "lucide-react";

export const defaultMenuConfig = {
  navMain: [
    {
      title: "My Blog",
      items: [
        { title: "Dashboard", url: "/admin/dashboard", icon: House },
        { title: "Posts", url: "/admin/dashboard/posts", icon: StickyNote },
        { title: "Users", url: "/admin/dashboard/users", icon: Users },
      ],
    },
  ],
};

Step 9: Run the Application

Start the dev server:

pnpm dev

Navigate to http://localhost:3000/admin/dashboard

You now have:

Complete user CRUD operations
Post management with author relationships
Searchable data tables
Form validation
Toast notifications

The Generated Code Structure

Here's what ShadPanel creates:

app/admin/dashboard/
├── users/
│   ├── actions.ts          # Server actions (getUsers, createUser, etc.)
│   ├── page.tsx            # List page with data table
│   ├── create/
│   │   └── page.tsx        # Create form
│   └── edit/
│       └── [id]/
│           └── page.tsx    # Edit form
└── posts/
    ├── actions.ts
    ├── page.tsx
    ├── create/
    │   └── page.tsx
    └── edit/
        └── [id]/
            └── page.tsx

Each actions file includes:

getResources() - Fetch all records
getResourceById(id) - Fetch single record
createResource(data) - Create new record
updateResource(id, data) - Update existing record
deleteResource(id) - Delete record

All type-safe. All using server actions. No API routes needed.

Key Commands Reference

Here's the complete workflow:

# Install ShadPanel
npm install -g shadpanel

# Initialize project
shadpanel init blog-app

# Database setup
shadpanel db init
shadpanel db generate

# After defining schema
shadpanel db migrate make create_user_and_post_tables
shadpanel db migrate run

# Generate resources
shadpanel resource user
shadpanel resource post

# Development
pnpm dev

# Other useful commands
shadpanel db push              # Quick push without migrations
shadpanel db studio            # Open Prisma Studio
shadpanel db migrate status    # Check migration status

Why This Workflow Works

Resource generator eliminates boilerplate: One command creates CRUD pages, forms, and server actions.

Server actions replace API routes: Type-safe by default. No REST endpoints to maintain.

Prisma handles data access: Define schema once. Get TypeScript types automatically.

Form builder manages state: No manual validation. No react-hook-form setup.

Tables are powerful out of the box: Sorting, filtering, pagination. Zero configuration.

You own the code: Everything lives in your project. Customize anything.

What I Learned

The shadpanel resource command is the killer feature. In Laravel, I'd use php artisan make:model with migrations and controllers. ShadPanel brings that workflow to Next.js.

The generated code is clean. No magic. Just TypeScript, React Server Components, and Prisma. You can read it, understand it, modify it.

The form builder components are flexible. Use FormInput, FormTextarea, FormSelect, FormToggle, FormMarkdownEditor, etc. They handle validation automatically.

Tables use TanStack Table under the hood. You get all the power without the setup.

Common Fixes

Issue: Relationship Fields

Generated forms don't automatically populate relationship fields. You need to:

Fetch related records (like we did with users)
Map them to FormSelect options
Convert IDs to correct type (parseInt for integers)

Issue: Timestamps

Prisma manages createdAt and updatedAt automatically. You don't need to set them in forms, but the generated code includes them. You can remove them from the create/update calls.

The Bottom Line

I've built three admin panels with ShadPanel now. Setup time dropped from hours to minutes.

The shadpanel resource command is a game changer. One command generates everything you need for CRUD operations.

The stack is solid:

Next.js 15 with App Router
Prisma for database access
TanStack Table for data tables
shadcn/ui for components
NextAuth.js for authentication

No black boxes. No vendor lock-in. You own the code.

If you're building internal tools, dashboards, or CMS systems, ShadPanel is worth trying. It brings Laravel-style productivity to Next.js.

The only manual work was fixing the relationship fields in the post forms. Everything else was generated.

That's a complete blog CMS in under 10 minutes of actual work.

referrence:
https://shadpanel-docs.vercel.app/blog/building-admin-panels

This tool help me build next js admin only 5-minutes

kristiansnts — Mon, 03 Nov 2025 03:41:01 +0000

So, I've been building admin panels, management systems, and information systems for companies for about 2 years now. You know the struggle - you need to show clients something quickly, but setting up everything from scratch takes forever.

I was using FilamentPHP for a while. It's honestly great - super easy to set up, fast to build with, and has tons of features. But here's the annoying part: every time I needed to show a client a demo, I had to publish it to my VPS. That meant paying for hosting just to show them a few pages. It was eating into my margins.

I kept thinking, "Wouldn't it be nice if we had something like Filament, but for JavaScript? Then I could just deploy demos to Vercel for free." So... I built it. Let me show you what I came up with.

Meet ShadPanel

ShadPanel is basically a CLI tool that scaffolds a complete Next.js admin panel for you. Think of it like FilamentPHP, but for the JavaScript world.

Here's what you get out of the box:

🎨 50+ UI Components - Full shadcn/ui component library
📝 Form Builder - Filament-style declarative forms (this is the good stuff)
📊 Data Tables - Sorting, filtering, pagination built right in
🔐 Authentication - NextAuth.js with Google, GitHub, or email/password
🎯 TypeScript - Everything's typed, which saves you from so many headaches
🌙 Dark Mode - Built in, because who doesn't want dark mode?
📱 Responsive - Works on mobile, tablet, desktop
⚡ Zero Config - It just works

I built it to feel familiar if you've used Filament, but made for the Next.js/React ecosystem.

Let's Build One - It Takes 5 Minutes

Seriously, that's all it takes.

First, install it

You can install it globally:

npm install -g shadpanel

Or just use it with npx (no installation needed):

npx shadpanel init my-admin-panel

Then run the init command

shadpanel init my-admin-panel

The CLI will ask you a few questions:

Which package manager do you want? (npm, pnpm, yarn, bun)
What do you want to install? (Full panel, auth + components, or just components)
Authentication providers? (Google, GitHub, or email/password)
Include demo pages? (I usually say yes - they're helpful)
Initialize git? (Up to you)

Answer the questions, wait for it to finish, and you're done.

Start it up

cd my-admin-panel
npm run dev

Open http://localhost:3000 and boom - you've got a working admin panel with a dashboard, login page, sidebar navigation... the whole thing. That's literally it.

What You Actually Get

After running the init command, you'll have:

✅ Complete admin panel structure - Authentication, dashboard, the works

✅ 50+ UI components - All the shadcn/ui components, ready to use

✅ Form builder - Build forms without the headache

✅ Data tables - Full-featured tables with zero config

✅ Dark mode - Toggle it on/off, it just works

✅ TypeScript - Everything's typed from the start

✅ Tailwind CSS v4 - Latest version, already configured

All set up and working in about 30 seconds. No joke.

The Form Builder - This is the Good Part

The form builder is inspired by FilamentPHP. You just describe what you want, and it handles all the messy stuff - validation, styling, state management. No more writing useState for every field or handling validation errors manually.

Here's what it looks like:

'use client'

import { Form, FormInput, FormSelect, FormSection } from '@/components/ui'
import { Button } from '@/components/ui'

export default function UserForm() {
  return (
    <Form
      initialValues={{ name: '', email: '', role: 'user' }}
      onSubmit={(values) => console.log(values)}
    >
      <FormSection title="User Information" description="Enter user details">
        <FormInput accessor="name" label="Name" required />
        <FormInput accessor="email" label="Email" type="email" required />
        <FormSelect
          accessor="role"
          label="Role"
          options={[
            { label: 'User', value: 'user' },
            { label: 'Admin', value: 'admin' },
          ]}
        />
      </FormSection>
      <Button type="submit">Submit</Button>
    </Form>
  )
}

That's it. Validation happens automatically, styling is consistent, state is managed for you. It's honestly a game changer.

You've got FormInput, FormTextarea, FormSelect, FormCheckbox, FormToggle, FormDatePicker, FormFileUpload, and more. Plus layout components like FormSection and FormGrid to organize everything nicely.

Data Tables - Also Pretty Nice

Tables are dead simple too. Just pass in your data and tell it what columns you want:

'use client'

import { Table, TableTextColumn, TableActionsColumn, TableAction } from '@/components/ui'
import { Edit, Trash } from 'lucide-react'

export default function UsersTable({ users }) {
  return (
    <Table data={users}>
      <TableTextColumn accessor="name" header="Name" sortable searchable />
      <TableTextColumn accessor="email" header="Email" searchable />
      <TableTextColumn accessor="role" header="Role" sortable />
      <TableActionsColumn>
        <TableAction icon={Edit} label="Edit" onClick={(row) => handleEdit(row)} />
        <TableAction icon={Trash} label="Delete" onClick={(row) => handleDelete(row)} />
      </TableActionsColumn>
    </Table>
  )
}

That's it. You get sorting, searching, filtering, pagination, row selection, bulk actions... all without writing a single line of table logic. It's wild how much time this saves.

Database Stuff (If You Need It)

Need a database? There's a CLI command for that too:

shadpanel db init

It'll ask you:

Which database do you want? (MySQL, PostgreSQL, SQLite, or MongoDB)
Then it creates your .env file
Sets up Prisma for you
Installs all the packages

After that, you just define your models and run migrations:

shadpanel db migrate make create_users
shadpanel db migrate run

It's optional though - only set it up if you actually need it.

The Resource Generator - This Blew My Mind

Okay, so here's where it gets really cool. Once you have Prisma set up, you can generate entire CRUD pages from your models with a single command. Like, the whole thing - list view, create form, edit form, delete actions... everything.

Let's say you have a Post model in your Prisma schema:

model Post {
  id        Int      @id @default(autoincrement())
  title     String
  content   String?
  published Boolean  @default(false)
  createdAt DateTime @default(now())
}

Just run:

shadpanel resource posts

Or the short version:

shadpanel r posts

That's it. One command and you get:

✅ List page - Data table with all your posts, searchable, sortable
✅ Create page - Form to create new posts
✅ Edit page - Form to update existing posts
✅ Delete functionality - Built right into the table
✅ Server actions - All the backend CRUD operations
✅ Menu integration - Automatically added to your sidebar

All the code is generated for you. The forms use the Form Builder, the tables use the Data Table component, everything is typed and ready to go. You just customize it if you need to.

This is honestly the feature that saves the most time. I can go from "I need a posts management page" to "here's your working CRUD interface" in like 30 seconds. It's wild.

The resource generator is smart too - it detects field types and uses the right form inputs (text for strings, checkboxes for booleans, date pickers for DateTime fields, etc.). Relations are automatically excluded from forms (which makes sense).

It's Flexible - You Own the Code

One thing I really wanted to get right is flexibility. ShadPanel isn't some locked-down framework - it's just Next.js code that gets generated for you. You can change anything.

Want to customize a component? Go ahead, change the className, add your own styles, modify the logic - it's your code. The components are just starting points, not locked templates.

// Generated code, but you can change it however you want
<FormInput 
  accessor="name" 
  label="Name" 
  className="my-custom-class"  // Add your own classes
  required 
/>

Need to change how forms work? Modify the Form component. Want to customize the data table? It's all right there in your components/ui folder. Everything follows Next.js conventions, so if you know Next.js, you know how to customize everything.

The only opinionated part is the built-in components themselves - they have sensible defaults. But once they're in your project, they're just components in your codebase. Change them, extend them, replace them - whatever you need.

It's like how Next.js works - opinionated about the file structure and conventions, but you control everything else. That's exactly how I wanted ShadPanel to feel.

Deploying to Vercel - This is Why I Built It

Since it's a Next.js app, deploying to Vercel is trivial:

Push your code to GitHub
Import it in Vercel
Add your environment variables (if you're using auth or database)
Hit deploy

That's it. No VPS, no server management, and it's free. This is the whole reason I built this thing - I can spin up a demo, send the client a link, and not worry about server costs.

How I Used It Last Week

Last week, a client asked me to show them what an admin panel would look like. I ran:

shadpanel init client-admin

Selected Google OAuth, added demo pages, and within minutes I had:

A working login with Google
A dashboard
A user management form
A users table with data

I added a couple of custom fields, pushed to GitHub, deployed to Vercel, and sent them the link. They could see it the same day.

No setting up servers, no configuring databases on a VPS - just Next.js deploying to Vercel. It's beautiful.

Why I Built This

Look, I just wanted:

Speed - Set up in minutes, not hours
Cost-effective - Free demos on Vercel
Familiar - Feels like Filament, but for JavaScript
Modern - Next.js, TypeScript, Tailwind
Flexible - Works standalone or merge into existing projects

And honestly, it does all of that. I'm pretty happy with how it turned out.

Try It Out

If you're building admin panels or internal tools, give it a shot. Setup takes like 5 minutes, and you'll have something working immediately.

📚 Documentation: https://shadpanel-docs.vercel.app
💻 GitHub: https://github.com/kristiansnts/shadpanel
📦 NPM: Just run npm install -g shadpanel or npx shadpanel init

That's it. If you try it out, let me know what you think. Happy building!

Tags: #nextjs #react #typescript #adminpanel #shadcn #webdev #javascript