How to Deploy Strapi on Vercel

How to Deploy Strapi on Vercel

Strapi is one of the most popular open-source headless CMS platforms, known for its flexibility, powerful customization options, and developer-friendly architecture. Whether you are developing a MERN, JAMstack, or any modern web application, Strapi is an excellent option for managing content efficiently. Meanwhile, Vercel has become a leading hosting platform for dynamic and serverless applications, offering easy deployments, auto-scaling, and global CDN support.

Combining Strapi with Vercel allows developers to ship fast, scalable, and enterprise-grade applications without worrying about server configuration and deployment complexities. This article provides a complete, step-by-step guide on how to deploy Strapi on Vercel, from project preparation to launch, domain setup, database integration, and production optimization.

If you need expert assistance in building scalable MERN applications, you can also hire AAMAX for professional MERN Stack Development services. AAMAX is a full-service digital marketing company providing Web Development, SEO, and Digital Marketing solutions.

Why Deploy Strapi on Vercel?

Before we start the deployment process, let’s look at why Vercel is an ideal hosting environment for Strapi:

Benefits of Hosting on Vercel

• Serverless and scalable: Your API automatically scales based on usage.
• Fast deployment process: One-click deployment with Git integration.
• Global CDN ensures requests are served from the nearest location.
• Automatic builds and redeployments on code changes.
• Environment variables support for secure configuration.
• Free tier availability for development and testing.
• Simple domain and SSL setup for professional launches.

Strapi normally works on a Node.js server, and Vercel supports Node.js functions, making the deployment workflow seamless with proper configuration.

Preparing Your Strapi Project for Deployment

Before deploying, ensure your Strapi application is:

• Running without errors on your local system.
• Using a production-ready database (e.g., PostgreSQL, PlanetScale, MongoDB Atlas).
• Configured for environment-based variables.
• Built using Node.js LTS version.

Step 1 – Install Strapi Locally

You can create a new Strapi project using:

npx create-strapi-app my-project --quickstart

Once installed, run:

cd my-project
npm run develop

This opens your Strapi project at:

http://localhost:1337

Confirm everything works before deployment.

Step 2 – Push Your Project to GitHub (or GitLab/Bitbucket)

Vercel deploys applications directly from Git repositories.

1. Initialize your repository:

git init

2. Add and commit files:

git add .
git commit -m "Initial commit"

3. Push to GitHub:

git remote add origin https://github.com/username/repository.git
git push -u origin main

Once uploaded, your project is ready for Vercel deployment.

Step 3 – Configure a Production Database

Strapi requires persistent storage. For production deployments, avoid SQLite and use a cloud database such as:

• PostgreSQL (Supabase, Render, Neon, DigitalOcean, etc.)
• MongoDB Atlas
• PlanetScale (MySQL)
• CockroachDB
• Amazon RDS

Configuring Database Environment Variables

Inside Strapi, navigate to:

config/database.js

Modify your configuration to use environment variables:

module.exports = ({ env }) => ({
  connection: {
    client: 'postgres',
    connection: {
      host: env('DB_HOST'),
      port: env.int('DB_PORT'),
      database: env('DB_NAME'),
      user: env('DB_USER'),
      password: env('DB_PASSWORD'),
      ssl: {
        rejectUnauthorized: false,
      },
    },
  },
});

These will later be added inside Vercel’s environment variable settings.

Step 4 – Install the Vercel Adapter for Strapi

Vercel automatically deploys serverless Node.js functions, but Strapi needs to be packaged as a serverless deployment. Install the serverless adapter:

npm i @vercel/node

Also, ensure you have a vercel.json file in the project root.

Step 5 – Configure Vercel Deployment Settings

Create a vercel.json file to control how Vercel handles deployment:

{
  "version": 2,
  "builds": [
    { "src": "server.js", "use": "@vercel/node" }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "server.js"
    }
  ]
}

This tells Vercel to forward all HTTP requests to your Strapi server.

Production Build Command

Strapi needs to be built before deployment. Make sure your build command in package.json includes:

"scripts": {
  "build": "strapi build",
  "develop": "strapi develop",
  "start": "strapi start"
}

Step 6 – Add a Server Handler (server.js)

In the project root, create a server.js file that launches Strapi:

const strapi = require('@strapi/strapi');
strapi().start();

This enables Strapi to boot correctly in the Vercel serverless environment.

Step 7 – Deploy to Vercel

Now you’re ready to deploy.

Deployment Method 1 – Vercel Web Dashboard

1. Go to Vercel and create a new project.
2. Select your GitHub repository.
3. Define the following:

Build Command:

npm run build

Output Directory:

./

Environment Variables:

Add the database credentials you created earlier:

DB_HOST=
DB_PORT=
DB_NAME=
DB_USER=
DB_PASSWORD=
NODE_ENV=production
APP_KEYS=
API_TOKEN_SALT=
ADMIN_JWT_SECRET=
JWT_SECRET=

Click Deploy and wait for Vercel to compile the project.

Deployment Method 2 – Deploy Using Vercel CLI

Install the CLI:

npm i -g vercel

Then run:

vercel

Follow the prompts, connect your project, and deploy.

Step 8 – Configure the Admin Panel URL

In Strapi, set the public hostname by editing:

config/server.js

module.exports = ({ env }) => ({
  url: env('PUBLIC_URL', 'https://your-vercel-domain.vercel.app'),
  host: '0.0.0.0',
  port: env.int('PORT', 1337),
});

After redeploying, Strapi will serve correct admin URLs.

Step 9 – Configure Domain and SSL

Vercel makes custom domain setup extremely simple.

1. Go to Vercel Dashboard
2. Select your project
3. Click Domains
4. Add your custom domain
5. Update your DNS settings as instructed

Vercel generates free SSL certificates automatically, making your API production-ready.

Step 10 – Testing Your Deployment

Once live, test:

1. Strapi Admin Panel

https://your-domain.com/admin

2. Public API Endpoint

https://your-domain.com/api/articles

3. Media Uploads

Check if uploads successfully store in persistent storage. For production, local filesystem is not recommended.

Optional – Configure Cloud Storage for Media

Since Vercel does not maintain a persistent file system, use:

• AWS S3
• DigitalOcean Spaces
• Cloudinary
• UploadCare

Example Cloudinary configuration:

Install provider:

npm install strapi-provider-upload-cloudinary

Add configuration:

config/plugins.js

module.exports = ({ env }) => ({
  upload: {
    config: {
      provider: 'cloudinary',
      providerOptions: {
        cloud_name: env('CLOUDINARY_CLOUD'),
        api_key: env('CLOUDINARY_KEY'),
        api_secret: env('CLOUDINARY_SECRET'),
      },
    },
  },
});

Add the variables in Vercel and redeploy.

Performance Optimization Tips

1 – Enable Caching

Use server caching and API-level caching wherever possible.

2 – Use a CDN for Media

Cloudinary or S3 ensures fast delivery.

3 – Limit Large Plugins

Disable unused plugins, especially heavy admin-side plugins.

4 – Monitor Logs

Vercel dashboard logs help catch deployment issues.

Common Deployment Issues & Fixes

“Build Failed: Out of Memory”

Increase Node.js memory allocation:

NODE_OPTIONS=--max_old_space_size=4096

Database Connection Errors

Ensure:

• SSL is enabled
• Credentials are correct
• Networking rules allow external access

Admin Panel Shows Wrong URLs

Update:

config/server.js

with correct url variable.

Uploads Not Saving

Switch to a cloud upload provider immediately.

Final Thoughts

Deploying Strapi on Vercel brings modern serverless deployment power to one of the most flexible headless CMS platforms. With proper configuration, cloud database setup, and media storage integration, you can run a fully scalable, secure, and fast Strapi backend in production.

This guide covered:

• Preparing a Strapi project for deployment
• Configuring cloud database and environment variables
• Setting up Vercel serverless configuration
• Deploying through dashboard or CLI
• Managing SSL, domain, admin URLs, and media storage
• Optimizing Strapi for production

Whether you're building a complete web application, a mobile backend, or a headless content solution, a Strapi + Vercel deployment delivers high performance without DevOps overhead. And if you need professional development assistance, you can hire AAMAX for scalable MERN Stack Development services and full-service digital solutions.