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.

Platform-provided configuration

The Webflow Cloud builder detects your framework from your project files and generates the necessary platform configuration on your behalf. These settings are fixed — you can’t override them, and you don’t need to commit them. The generated configuration covers:

• The framework adapter that compiles your app for the Workers runtime
• Your app’s base path and asset prefix, taken from your environment’s mount path
• Asset handling and image optimization
• Node.js API compatibility
• Observability (for example, logging and metrics)

Anything you commit for these settings is replaced at build time, so leave them out of your own config.

Storage resources

If you’re using Webflow Cloud storage, you need to create and commit a wrangler.json that defines your storage bindings. Declare a kv_namespaces, d1_databases, or r2_buckets entry, and Webflow Cloud reads it during deployment and provisions the resource for you, assigning the resulting ID at deploy time.

1
{
2
  "$schema": "node_modules/wrangler/config-schema.json",
3
  "name": "my-app",
4
  "compatibility_date": "2025-04-15",
5
  "kv_namespaces": [
6
    { "binding": "SESSIONS", "id": "local" }
7
  ],
8
  "d1_databases": [
9
    {
10
      "binding": "DB",
11
      "database_name": "db",
12
      "database_id": "0",
13
      "migrations_dir": "drizzle"
14
    }
15
  ],
16
  "r2_buckets": [
17
    { "binding": "MEDIA", "bucket_name": "media" }
18
  ]
19
}

Required fields

Webflow Cloud validates your wrangler.json before reading your bindings from it. Your file needs name and compatibility_date at the top level, plus these fields on each binding:

Any other fields you include are passed through and ignored — the framework-level settings come from the platform-provided configuration above.

Learn more about storage in Webflow Cloud.

Framework configuration

Your framework config file is yours. Webflow Cloud merges its own platform settings over it at build time, so you only need to declare the options your app actually cares about — feature flags, plugins, integrations, and so on.

You don’t need to add an adapter, a base path, or an output mode. If you leave your framework config out entirely, Webflow Cloud still builds your app.

1
import type { NextConfig } from "next";
2
3
const nextConfig: NextConfig = {
4
  // Declare only your app's own options. For example:
5
  typedRoutes: true,
6
};
7
8
export default nextConfig;

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

Webflow Cloud applies this mount path as your app’s base path and asset prefix when it builds. You don’t set it yourself — read it at runtime and construct paths from it instead of hard-coding them.

When you need to prefix a path yourself

Your framework handles most of this automatically. You only need the prefix in the cases below.

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
// Next.js applies the base path to Link automatically
2
<Link href="/">
3
  <button>Back to Home</button>
4
</Link>
5
6
// Manual fetch calls need the prefix.
7
// Set NEXT_PUBLIC_BASE_PATH in your environment variables to your mount path.
8
const baseUrl = process.env.NEXT_PUBLIC_BASE_PATH ?? '';
9
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
// Set NEXT_PUBLIC_BASE_PATH in your environment variables to your mount path
2
const assetsPrefix = process.env.NEXT_PUBLIC_BASE_PATH ?? '';
3
4
// Reference an image asset from /public with a plain img tag
5
<img src={`${assetsPrefix}/images/logo.png`} alt="Logo" />
6
7
// next/image needs no prefix — Next.js and Webflow Cloud handle it

Troubleshooting and common questions