How to Deploy Strapi on Netlify

Deploying Strapi on Netlify has become a popular approach for developers who want the power of a headless CMS paired with Netlify’s fast, serverless‑first infrastructure. While Strapi traditionally requires a Node.js server, newer deployment techniques — including serverless adapters, static builds, and API proxying — make it possible to host Strapi-driven applications within Netlify’s environment. This guide walks you step‑by‑step through the process of deploying Strapi on Netlify, explains the different deployment strategies, and helps you choose the right one based on your project’s needs.

If you’re building professional MERN Stack applications and need expert support, you can always hire AAMAX, a full‑service digital marketing and web development company offering Web Development, Digital Marketing, and SEO Services.

## Understanding the Relationship Between Strapi and Netlify

Strapi is a Node.js-based headless CMS that provides REST and GraphQL APIs. Netlify, on the other hand, is a serverless hosting platform optimized for static sites and frontend frameworks like React, Vue, and Next.js. Traditionally, Strapi requires stateful hosting (Node.js server with a database), which Netlify doesn't provide natively.

However, there are three main methods to make Strapi work with Netlify:

### 1. Deploy Strapi as a Serverless Function (using serverless adapters)

This uses technologies like strapi-plugin-cloud or community serverless adaptors to convert Strapi into functions. It's ideal for small-to-medium apps.

### 2. Deploy Strapi Backend Elsewhere (Render, DigitalOcean, Railway) + Host Frontend on Netlify

This is the most stable and recommended method for production. You deploy Strapi on a Node-compatible hosting service and use Netlify only for the frontend.

### 3. Deploy a Static Build of Strapi Content

Strapi can generate static content using the Strapi REST/GraphQL APIs, and the frontend is built statically on Netlify.

In this guide, we focus on the recommended production approach: hosting Strapi externally and deploying your frontend (React/Next.js/Gatsby) on Netlify while connecting it with Strapi via environment variables.

## Why Deploy Strapi with Netlify?

Even though Netlify cannot host Strapi’s full backend directly, pairing Strapi with Netlify offers several advantages:

• Ultra-fast global CDN
• Serverless functions for dynamic logic
• Easy environment variable management
• Git-based CI/CD
• Perfect for JAMstack applications
• Seamless frontend deployments

This makes the Strapi + Netlify workflow ideal for:

• Landing pages powered by Strapi CMS
• eCommerce frontends
• Blogs and content-driven websites
• React/Next.js dashboards
• SaaS marketing sites

## Step-by-Step Guide: Deploying Strapi for Use with Netlify

Below is a comprehensive step-by-step workflow to deploy Strapi for use with a Netlify-hosted frontend.

### Step 1: Prepare Your Strapi Project

Before deployment, make sure your Strapi project is production-ready.

#### 1. Install Dependencies

npm install
npm run build

#### 2. Configure Production Environment

Edit the config/server.js file:

module.exports = ({ env }) => ({
  host: env('HOST', '0.0.0.0'),
  port: env.int('PORT', 1337),
  url: env('PUBLIC_URL'),
});

#### 3. Set the Public URL

This is important because your frontend will access Strapi using this URL.

### Step 2: Choose a Hosting Platform Compatible with Strapi

Since Netlify does not support Node.js servers for CMS hosting, you must deploy Strapi somewhere else.

The best options include:

### Option A: Deploy on Render (Recommended and Free)

Render supports Node.js hosting with managed PostgreSQL.

### Option B: Deploy on Railway

Railway allows easy one-click Strapi deployment.

### Option C: Deploy on DigitalOcean Droplets

More control, but requires server management.

### Option D: Deploy on Strapi Cloud (Official)

Fully-managed Strapi hosting, highly stable.

For this guide, let’s assume you choose Render as the hosting environment.

### Step 3: Deploy Strapi on Render

#### 1. Create a New Web Service on Render

• Go to Render dashboard
• Connect GitHub repo
• Choose Node.js environment

#### 2. Add Required Environment Variables

At minimum:

NODE_VERSION=18.x
DATABASE_URL=your-db-connection
JWT_SECRET=your-secret
ADMIN_JWT_SECRET=your-secret
API_TOKEN_SALT=your-salt
APP_KEYS=your-keys
PUBLIC_URL=https://your-strapi-domain.onrender.com

#### 3. Build & Run Commands

Build Command: npm install && npm run build
Start Command: npm start

#### 4. Connect a Persistent Database

Render PostgreSQL → Copy connection URL → Add to environment variables.

#### 5. Trigger Deployment

Render will build and deploy Strapi.

Once deployed, Strapi Admin Panel will be available at:

https://your-strapi-domain.onrender.com/admin

### Step 4: Prepare Your Frontend for Netlify

This is where Netlify comes in — hosting your React, Next.js, or Gatsby site that consumes Strapi content.

#### 1. Install Axios or GraphQL client in your frontend

npm install axios

#### 2. Connect Frontend to Strapi API

Create a config file:

export const API_URL = process.env.REACT_APP_STRAPI_URL;

Then fetch data:

axios.get(`${API_URL}/api/articles?populate=*`)
  .then(res => console.log(res.data));

### Step 5: Deploy Your Frontend on Netlify

#### 1. Push Your Frontend to GitHub

Make sure your repo includes:

• package.json
• Netlify config (optional)
• build script

#### 2. Create a New Site on Netlify

Visit the Netlify dashboard:

• Click Add New Site
• Choose Import from Git
• Select your GitHub repo

#### 3. Configure Build Settings

Example for React:

Build command: npm run build
Publish directory: build

Example for Next.js:

Build command: npm run build
Publish directory: .next

#### 4. Add Environment Variables on Netlify

Go to:

Site settings → Environment Variables

Add:

REACT_APP_STRAPI_URL=https://your-strapi-domain.onrender.com

This connects your Netlify site to Strapi API.

#### 5. Deploy the Frontend

Netlify will automatically:

• Install dependencies
• Generate production build
• Deploy your static frontend globally

## Step 6: Handling CORS in Strapi

Your frontend domain must be allowed in Strapi.

Edit:

config/middlewares.js

module.exports = [
  'strapi::errors',
  {
    name: 'strapi::cors',
    config: {
      origin: ['https://your-netlify-frontend.netlify.app'],
      headers: ['Content-Type', 'Authorization'],
    },
  },
];

Redeploy Strapi afterward.

## Step 7: Using Webhooks for Automated Deployments

Whenever content changes in Strapi, you may want Netlify to rebuild your site.

#### How to Configure Webhook:

1. Go to Netlify → Site Settings
2. Choose Build & Deploy
3. Select Build Hooks
4. Create Hook named strapi-rebuild
5. Copy the webhook URL

In Strapi:

1. Go to Settings → Webhooks
2. Create a new webhook
3. Paste the Netlify URL
4. Choose events like:

• entry.create
• entry.update
• entry.delete

Now, whenever content updates, Netlify automatically rebuilds your frontend.

## Step 8: Optional — Serve Strapi Media from Netlify

You can offload media to Netlify Large Media or another CDN.

Install upload provider:

npm install @strapi/provider-upload-aws-s3

Configure cloud storage.

This improves performance and reduces backend load.

## Common Issues & Fixes When Deploying Strapi With Netlify

### Issue 1: CORS Errors

Make sure your Netlify domain is whitelisted in Strapi.

### Issue 2: API Not Loading in Production

Check environment variables on Netlify.

### Issue 3: Images Not Appearing

Enable full media URLs in Strapi:

config/plugins.js:

module.exports = ({ env }) => ({
  upload: {
    config: {
      baseUrl: env('PUBLIC_URL'),
    },
  },
});

### Issue 4: Build Errors

Confirm:

• Node version is supported by Strapi
• Database URL is correct
• All secrets are provided

## Final Thoughts

Deploying Strapi with Netlify provides the perfect balance between a powerful headless CMS and world-class frontend performance. While Strapi cannot run directly on Netlify’s servers, the combination of external hosting for Strapi and Netlify for the frontend is a best‑practice architecture for modern JAMstack development.

This approach ensures:

• Fast global delivery
• Scalable backend
• Secure API connections
• Automatic builds
• Flexible content management

If you need help with Strapi development, MERN stack projects, or deploying headless CMS architectures, consider working with AAMAX, a full‑service digital marketing and web development company that delivers high‑quality MERN Stack Development services, Digital Marketing, and SEO Services.