How to Deploy Strapi on Vercel

Vercel does not support persistent processes or local file storage, hence, deploying Strapi directly on it is not practical. The best approach is to host Strapi on a backend provider of your choice (e.g., Strapi Cloud, Heroku, DigitalOcean) and connect your Vercel frontend to it.

Prerequisites

• Install Node.js: For running Strapi locally and during Vercel builds
• Create a Strapi project: To generate a new project for local development
• Initialize Git for version control: Use a Git provider account (GitHub, GitLab, or Bitbucket) since Vercel deploys directly from Git repositories.
• Create a Vercel account: To connect your Git repository and deploy the Strapi project.
• Prepare a production database: PostgreSQL, MySQL, or MongoDB

Choose a Backend Platform for Strapi

Use Strapi Cloud for managed hosting or deploy on providers like Heroku, DigitalOcean, Railway, Render, or AWS EC2. Configure a managed Postgres database (Railway, Supabase, AWS RDS) instead of SQLite or local storage, and keep the connection URI ready for Strapi.

Configure Strapi Environment Variables

Configuring environment variables keeps database credentials secure and makes Strapi portable across different environments. Instead of hardcoding values, Strapi reads them from the server’s environment so the same codebase works seamlessly in development, staging, and production.

module.exports = ({ env }) => ({

connection: {

client: 'postgres',

connection: {

	host: env('DATABASE_HOST'),

	port: env.int('DATABASE_PORT'),

	database: env('DATABASE_NAME'),

	user: env('DATABASE_USERNAME'),

	password: env('DATABASE_PASSWORD')

}

}

});

Explanation:

• module.exports : Exports the configuration so Strapi can use it.
• { env } : Function parameter that lets you access environment variables securely.
• client : 'postgres' : Specifies PostgreSQL as the database client.
• connection : Holds all the database connection details.

Deploy Strapi Backend

Deploy your project to the chosen provider, the exact steps differ per service, but the outcome is obtaining the public API URL (e.g., https://your-strapi-instance.herokuapp.com).

Configure CORS in Strapi

CORS configuration is required so your Vercel-hosted frontend can securely request data from Strapi. By specifying the allowed origin, you prevent unauthorized domains from accessing your API.

module.exports = {

settings: {

cors: {

	enabled: true,

	origin: ['https://your-vercel-domain.vercel.app'],

},

},

};

Explanation:

• module.exports : Exports the configuration so Strapi can read it.
• cors : Defines the CORS (Cross-Origin Resource Sharing) policy.
• origin : ['https://your-vercel-domain.vercel.app'] : Only allows requests from this specific frontend domain (your Vercel app).

Set API Permissions or Tokens

In the Strapi admin panel, configure role permissions under Settings > Roles & Permissions. Allow access only to the required content types. For added security or automation, generate API tokens under Settings > API Tokens.

Build the Frontend Application

Create a frontend project (Next.js, Astro, etc.) and configure routes to fetch data from Strapi. Store your API URL in environment variables (.env.local):

NEXT_PUBLIC_STRAPI_API_URL=https://your-strapi-instance.com

Example in Next.js:

export async function getStaticProps() {

const res = await fetch(`${process.env.NEXT_PUBLIC_STRAPI_API_URL}/api/articles`);

const data = await res.json();

return { props: { articles: data } };

}

Explanation:

• export async function getStaticProps() : A Next.js data-fetching function that runs at build time.
• const res = await fetch(...) : Sends a request to your Strapi API endpoint using the environment variable NEXT_PUBLIC_STRAPI_API_URL.
• const data = await res.json() : Converts the API response into JSON format.
• return { props : { articles : data } } : Passes the fetched articles as props to your page component.

Push Frontend Code to GitHub

Initialize a Git repository and push the frontend code to GitHub, GitLab, or Bitbucket.

Example (GitHub):

# Initialize a Git repository

git init

# Add all files

git add .

# Commit the code

git commit -m "Initial commit"

# Add your GitHub repo as remote

git remote add origin https://github.com/username/my-frontend-app.git

# Push the code

git push -u origin main

Note: If you’re using GitLab or Bitbucket, the commands are almost identical; just replace the remote URL with the one from your repository.

Deploy Frontend on Vercel

In Vercel, create a new project, import the GitHub repository, and select the correct framework preset. Add environment variables such as NEXT_PUBLIC_STRAPI_API_URL. Deploy the project and use the assigned public URL.

Automate Deployments with Hooks (Optional)

Create a Deploy Hook in Vercel and copy the URL. In Strapi, add a webhook under Settings > Webhooks pointing to the Vercel Deploy Hook. Select events such as create, update, or publish to trigger redeployment automatically.