Bring your own app

Webflow Cloud deploys your app using the Edge runtime, enabling fast, globally distributed hosting. Before deploying to Webflow Cloud, your app may require some configuration to ensure compatibility with the Edge environment.

These instructions guide you through deploying an existing Next.js or Astro app to Webflow Cloud.

Time Estimate: 30 minutes

Prerequisites

• A Webflow account
• A GitHub account
• One of the following applications in a GitHub repository:
  • An Astro app (version 6 or 7)
  • A Next.js app (version 15 or higher)
  • A Vite app (version 6.1 or higher) — React, Vue, Svelte, or vanilla JavaScript
• Node.js 22 or later and npm installed
  • Note: Currently, Webflow Cloud supports only the npm package manager
  • Note: Astro 6 and Astro 7 require Node.js 22.12 or later

Fast path: one-click deploy

To deploy an application from a GitHub repository quickly, click this button and follow the steps to deploy it to Webflow Cloud:

The process prompts you to select a GitHub repository, install the GitHub app that gives Webflow access to the repository, and specify how to deploy it to Webflow Cloud.

To generate a one-click deploy button, see Deploy with one click.

Deploying an application from GitHub

Follow these steps to deploy an application from a GitHub repository:

1. Log in to Webflow and go to your dashboard.

2. From your Workspace, click New Project > App and authorize Webflow to access your GitHub account.

3. Expand Import a GitHub repository, specify the GitHub organization and repository, and click the Import button next to the repository, as in this picture:

   

4. Give the app a name for Webflow Cloud and select the branch to deploy as in this picture:

   

5. Optional: Under Advanced settings, select the path to the root of the application and add any environment variables that the app needs.

6. Click Deploy.

Webflow publishes the application and shows information about it.

• To see information about applications that are part of a site, go to the site settings and click Webflow Cloud. The applications that are part of this site are listed. Then you can click an application to see information about its environments and deployments.

  

• To see information about applications that are not within a site, go to the Workspace settings, where applications are listed next to sites. You can filter the list by clicking All projects > Apps.

  

  To get to its environments and deployments, open the application’s settings and then click Webflow Cloud.

Configuring applications for Webflow Cloud

These sections describe how to ensure that your application runs properly on Webflow Cloud.

Configure your app

In most cases, you don’t. Webflow Cloud reads your package.json, detects your framework, and generates the deployment configuration when it builds your app. You commit your app the way you’d normally write it.

Here’s what that means in practice — this is the complete next.config.ts from the Next.js starter, which deploys to Webflow Cloud as-is:

1
import type { NextConfig } from "next";
2
3
const nextConfig: NextConfig = {
4
  /* config options here */
5
};
6
7
export default nextConfig;

No adapter, no base path, no wrangler.json.

What the platform owns, and what you own

Optional: declare your framework explicitly

Detection is automatic. If you want to pin it — for example in a monorepo, or a repo where detection is ambiguous — add a webflow.json at your app root:

1
{
2
  "cloud": {
3
    "framework": "nextjs"
4
  }
5
}

Supported values are nextjs, astro, vite, and static. For Astro, use astro — Webflow Cloud detects the major version from your package.json and selects the matching adapter.

Local development

You have two options, and which one you want depends on what you’re doing.

$
next dev

Storage bindings

If your app uses KV, SQLite, or object storage, commit a wrangler.json that declares the bindings. Webflow Cloud reads it during deployment, provisions the resources for your environment, and injects the real IDs.

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

For a complete working example, see the starters with bindings wired up: Next.js and Astro.

Managing assets and APIs

1
import Image from "next/image";
2
3
export function Logo() {
4
    return (
5
        <Image
6
            src="/images/logo.png" // No prefix needed - automatically optimized
7
            alt="Logo"
8
            width={180}
9
            height={40}
10
            priority
11
        />
12
    );
13
}

1
// Set NEXT_PUBLIC_BASE_PATH in your environment variables to your mount path
2
const basePath = process.env.NEXT_PUBLIC_BASE_PATH ?? '';
3
4
export function Icon() {
5
    return (
6
        <img
7
            src={`${basePath}/icons/star.svg`} // Prefix required for CDN caching
8
            alt="Star icon"
9
        />
10
    );
11
}

1
// /src/pages/api/data.ts
2
import { NextRequest, NextResponse } from 'next/server';
3
4
export async function GET(request: NextRequest) {
5
    return NextResponse.json({ message: 'Hello, world!' });
6
}

Configuring environment variables

1
process.env.VARIABLE_NAME

Deploying applications

After configuring your app:

$
npm run dev

$
webflow auth login

$
webflow cloud deploy

Next steps

Now that you’ve successfully deployed your app on Webflow Cloud, here’s what you can do next.

Sync your Webflow design system

Learn how to use DevLink to sync your Webflow styles, variables, and components with your app

Optimize your app for Webflow Cloud

Explore how to optimize and tailor your deployment for the best experience on Webflow Cloud.

Manage deployments

Explore deployment options and Webflow Cloud’s CI/CD integration with GitHub to streamline your release process

Add a SQLite database to your app

Add a SQLite database to your app to store and retrieve user data.

Troubleshooting