Configuration

Webflow Cloud is designed to handle most of your deployment configuration, so you can focus on building your app. This page explains what’s configured automatically and what you need to know if you want to understand or troubleshoot the process.

For step-by-step setup use the following guides:

Getting Started

Get started with Webflow Cloud by following our step-by-step guide.

Bring your own app

Migrate an existing app to Webflow Cloud.

Deployment details

Webflow Cloud hosts your app on Cloudflare Workers, running it at a base path within your Webflow Cloud environment (for example, /app). This base path serves as the mount point for your application.

When you deploy your environment, Webflow Cloud uses Wrangler, Cloudflare’s official CLI, to deploy your app to the Workers platform with a standard configuration.

Default configuration

When you deploy an environment in Webflow Cloud, Webflow uses the necessary configuration for deployment to the Workers platform.

During deployment, Webflow Cloud uses a wrangler.json configuration file based on the framework specified in your webflow.json file. This file includes recommended defaults for:

• Asset handling
• Node.js API compatibility
• Observability (for example, logging and metrics)

For more details on Wrangler configuration, see the Wrangler documentation.

Here are examples of wrangler.json files for Next.js and Astro:

1
{
2
  "$schema": "node_modules/wrangler/config-schema.json",
3
  "name": "nextjs",
4
  "main": ".open-next/worker.js",
5
  "compatibility_date": "2025-03-01",
6
  "compatibility_flags": [
7
    "nodejs_compat"
8
    ],
9
  "assets": {
10
    "binding": "ASSETS",
11
    "directory": ".open-next/assets"
12
  },
13
  "observability": {
14
    "enabled": true
15
  },
16
17
  "kv_namespaces": [
18
    {
19
      "binding": "KV",
20
      "id": "1234567890" // Webflow Cloud will automatically generate an ID for your environment
21
    }
22
  ],
23
  "d1_databases": [
24
    {
25
      "binding": "DB",
26
      "database_name": "my-database",
27
      "database_id": "1234567890", // Webflow Cloud will automatically generate an ID for your environment,
28
      "migrations_dir": "./migrations" // Specify the directory containing your migrations
29
    }
30
  ]
31
}

Storage resources

If your app requires storage, you can declare storage bindings in your wrangler.json file. Webflow Cloud reads these bindings during deployment and automatically creates the corresponding storage resources in your environment. Learn more about storage in Webflow Cloud..

Framework configuration

Some frameworks require additional configuration to run on Webflow Cloud and the Workers runtime. If you’ve created an app using the Webflow Cloud CLI, Webflow Cloud will automatically add the necessary configuration files to your app. If you’ve brought your own app, you’ll need to add the necessary files to your app.

1
import type { NextConfig } from "next";
2
3
const nextConfig: NextConfig = {
4
  basePath: "/YOUR_BASE_PATH", // your environment's mount path
5
  assetPrefix: '/YOUR_BASE_PATH', // ensure this matches your environment's mount path
6
};
7
8
export default nextConfig;
9
// added by create cloudflare to enable calling `getCloudflareContext()` in `next dev`
10
import { initOpenNextCloudflareForDev } from "@opennextjs/cloudflare";
11
initOpenNextCloudflareForDev();

Mount path configuration

When you create an environment, you set a mount path, which is the subpath where your app will be accessible. For example, with a mount path of /app, your app lives at:

https://your-webflow-cloud-domain.com/app

In your framework configuration, make sure you set your app’s base path and asset prefix to the mount path of your environment. When building your app, use the provided BASE_URL and ASSETS_PREFIX environment variables to construct correct paths instead of hard-coding them.

BASE_URL

The BASE_URL variable represents the mount path of your environment. Combine this with your Webflow Cloud domain to create the URL where your application is accessible to users.

Use for:

• Navigation links and client-side routing
• Form actions and redirects

1
// Access BASE_URL in Next.js
2
import config from "../next.config";
3
4
const baseUrl = config.basePath || '';
5
6
// Navigation button
7
<Link href={`${baseUrl}/`}>
8
  <button>Back to Home</button>
9
</Link>
10
11
// API fetch
12
const response = await fetch(`${baseUrl}/api/users`);

ASSETS_PREFIX

ASSETS_PREFIX is the URL for static assets and some direct API calls. The ASSETS_PREFIX URL points directly to the Worker handling your app.

Use for:

• Referencing static assets (images, CSS, JavaScript files)
• Uploading large files to your app

1
// Access ASSETS_PREFIX in Next.js
2
import config from "../next.config";
3
4
const assetsPrefix = config.assetPrefix || config.basePath || '';
5
6
// Reference an image asset
7
<img src={`${assetsPrefix}/images/logo.png`} alt="Logo" />

Troubleshooting and common questions