Getting started with DevLink

In this guide, you’ll use the Webflow CLI to create an Astro or Next.js app, sync a Webflow site’s design system with DevLink, and deploy the app to Webflow Cloud. Use this workflow when you want to scaffold locally and work with exported Webflow styles, variables, and components. If you already have a Next.js or Astro app, see Bring your own app.

Time Estimate: 30 minutes

Prerequisites:

• A Webflow account
• A GitHub account and basic familiarity with GitHub
• Node.js 22.0.0 or higher and npm installed

Getting started with DevLink

1. Install the Webflow CLI

In your terminal, run the following command to install the CLI globally:

$
npm install -g @webflow/webflow-cli

You can run the command webflow --version to verify that the CLI installed successfully.

2. Create a Webflow site

Create a Webflow site by cloning the Astral Fund template. This site is pre-configured with styles, variables, and components optimized for Webflow Cloud and DevLink.

1. Open the Astral Fund template.
2. Click Clone in Webflow and in the next window click Create site.
3. Give the site a name and specify who should have access to it. Remember the site’s name because you’ll need it to connect the Webflow Cloud application to it. The new site opens in Webflow.
4. Optionally, review the styles, variables, and components included in the site. You will export these styles and components to your new app in the following steps.

The template site looks like this:

3. Create an app

In these steps, you use the Webflow CLI to create an Astro or Next.js application. The CLI generates an app scaffold that’s synced with your Webflow site’s design system through DevLink.

The following steps walk you through this CLI setup:

1. Start creating the app by running this command:

   $
   webflow cloud init

2. At the Where do you want to deploy this app? prompt, select Existing site.

   The default option is New domain, which creates a standalone app that is not attached to any Webflow site. For this guide, choose Existing site so the app can use components from the site you cloned in the previous step.

3. At the Which framework would you like to use? prompt, select astro or nextjs.

4. At the What would you like to name your app? prompt, enter a name such as my-webflow-cloud-app.

5. At the What path do you want to use locally? prompt, enter the mount path for the application (default: /app). For example, if you specify the mount path /app, Webflow Cloud hosts the application at mysite.webflow.io/app, where mysite.webflow.io is the URL of the Webflow site.

6. If you are not already authenticated, the CLI opens a browser window for you to log in to Webflow. After you grant access, return to your terminal.

7. At the Search for a Webflow site: prompt, search for and select the template site that you cloned in the previous section. The CLI then scaffolds the app and syncs the site’s components into it via DevLink.

   If your workspace has only one Webflow site, the CLI skips this prompt and uses that site automatically.

8. Push the app to a GitHub repository. For more information, see Adding locally hosted code to GitHub.

$
webflow cloud init \
>
  --no-input \
>
  -n my-webflow-cloud-app \
>
  -f astro \
>
  -m /app \
>
  -s <YOUR_SITE_ID>

In the next section, you add the application as a Webflow Cloud app as part of the site.

4. Create a Webflow Cloud app and environment

Webflow Cloud apps can be part of a site or independent apps in your Workspace. Because this application contains components from the site you created, these steps cover creating an app as part of the site. Then, you configure the app to deploy updates automatically.

1. In Webflow, navigate to your site’s settings and select Webflow Cloud from the sidebar.

2. If Webflow is not yet connected to your GitHub account, click Login to GitHub to connect your GitHub account and then click Install GitHub app. Follow the instructions to enable Webflow Cloud to access your GitHub repositories.

3. Click New project > Create app.

4. Expand Import a GitHub repository and select your GitHub organization and repository.

5. Specify a name for the Webflow Cloud app, the branch to deploy, and the path to deploy the application to. You can deploy other branches to other paths later, such as if you want to have separate staging and production environments.

6. Click Deploy and wait for Webflow to import the repository and set up the Webflow Cloud app.

   The new app appears in the Webflow Cloud section of the site’s settings, as in this example:

   

   The app also has an environment that is based on the branch and path that you specified when you created the app. To see it, click the app’s name in the Name column. The environment looks like this, showing the name of the environment and the history of builds and deployments:

   

7. If you have not published the site yet, publish it now by going to the General settings page and clicking Publish.

8. View the deployed app by opening its environment in the Webflow Cloud settings and clicking its link under Environment URL. Note that the URL includes the deployment path.

Now the application is deployed and updates automatically when you update the repository.

Deployments may take up to 2 minutes to complete. You can view the status of deployments and build logs on the environment page.

5. Add your Webflow design system to your Webflow Cloud app

The webflow cloud init command added several things to the application in the /webflow folder via DevLink, including:

• The site’s global styles
• Assets synced from the site
• Foundational React components that Webflow sites use

For more information on what DevLink exports from sites into applications, see What’s exported.

To use these exported styles and components, you must import them in the app by adding the DevLinkProvider component to manage Webflow interactions in your app’s layout files. The webflow cloud init command automatically added this component to the application, as in these examples:

1
import type { Metadata } from "next";
2
import { Geist, Geist_Mono, Inter } from "next/font/google";
3
import "./globals.css";
4
import { DevLinkProvider } from "../../../../webflow/DevLinkProvider";
5
6
const inter = Inter({
7
  subsets: ["latin"],
8
  variable: "--font-inter",
9
});
10
11
const geistSans = Geist({
12
  variable: "--font-geist-sans",
13
  subsets: ["latin"],
14
});
15
16
const geistMono = Geist_Mono({
17
  variable: "--font-geist-mono",
18
  subsets: ["latin"],
19
});
20
21
export const metadata: Metadata = {
22
  title: "Create Next App",
23
  description: "Generated by create next app",
24
};
25
26
export default function RootLayout({
27
  children,
28
}: Readonly<{
29
  children: React.ReactNode;
30
}>) {
31
  return (
32
    <html lang="en">
33
      <body
34
        className={`${geistSans.variable} ${geistMono.variable} ${inter.variable} antialiased`}
35
      >
36
        <DevLinkProvider>
37
          {/* Add here any Navbar or Header you want to be present on all pages */}
38
          {children}
39
          {/* Add here any Footer you want to be present on all pages */}
40
        </DevLinkProvider>
41
      </body>
42
    </html>
43
  );
44
}

Follow the steps for your application platform:

$
npm install
$
npm run dev

1
---
2
import Layout from '../layouts/Layout.astro';
3
import { Navbar } from '@webflow/Navbar'; // Import the Navbar component
4
import { Footer } from '@webflow/Footer'; // Import the Footer component
5
---
6
7
<Layout>
8
  <Navbar
9
      navbarLinkFeatures="Hello"
10
      navbarLinkProducts="Webflow"
11
      navbarLinkResources="Cloud"
12
      navbarLinkContact=""
13
  client:load />
14
  <Section
15
    client:load
16
    tag="section"
17
    className="margin-bottom-24px"
18
    style={{
19
      minHeight: '100vh',
20
      display: 'flex',
21
      alignItems: 'center',
22
      justifyContent: 'center'
23
    }}
24
  >
25
    <Container>
26
      <Block
27
        tag="div"
28
        className="hero-split"
29
        style={{
30
          textAlign: 'center',
31
          maxWidth: '600px',
32
          margin: '0 auto'
33
        }}
34
      >
35
        <h1 class="margin-bottom-24px">Welcome to Webflow Cloud</h1>
36
        <p class="margin-bottom-24px">This is a simple test using Basic components with enhanced styling.</p>
37
        <div>
38
          <Link
39
            button={true}
40
            options={{
41
              href: "#"
42
            }}
43
            className="button-primary"
44
          >
45
            Get Started
46
          </Link>
47
        </div>
48
      </Block>
49
    </Container>
50
  </Section>
51
  <Footer client:load /> 
52
</Layout>
53
54
<style>
55
  h1 {
56
    font-size: 2.5rem;
57
    font-weight: 700;
58
    background: linear-gradient(83.21deg, #3245ff 0%, #bc52ee 100%);
59
    -webkit-background-clip: text;
60
    -webkit-text-fill-color: transparent;
61
    background-clip: text;
62
  }
63
</style>

1
{
2
  "extends": "astro/tsconfigs/strict",
3
  "include": [
4
    ".astro/types.d.ts",
5
    "**/*"
6
  ],
7
  "exclude": [
8
    "dist"
9
  ],
10
  "compilerOptions": {
11
    "types": [
12
      "@cloudflare/workers-types/2023-07-01"
13
    ],
14
    "jsx": "react-jsx",
15
    "jsxImportSource": "react",
16
    "baseUrl": ".",
17
    "paths": {
18
      "@webflow/*": ["webflow/*"]
19
    }
20
  }
21
}

1
import { defineConfig } from "astro/config";
2
import { fileURLToPath } from "node:url";
3
4
import cloudflare from "@astrojs/cloudflare";
5
6
import react from '@astrojs/react';
7
8
const webflowAlias = {
9
  "@webflow": fileURLToPath(new URL("./webflow", import.meta.url)),
10
};
11
12
// https://astro.build/config
13
export default defineConfig({
14
  base: "/app",
15
  output: "server",
16
  adapter: cloudflare({
17
    platformProxy: {
18
      enabled: true
19
    }
20
  }),
21
22
  integrations: [react()],
23
  vite: {
24
    resolve: {
25
      // Use react-dom/server.edge instead of react-dom/server.browser for React 19.
26
      // Without this, MessageChannel from node:worker_threads needs to be polyfilled.
27
      alias: import.meta.env.PROD
28
        ? { ...webflowAlias, "react-dom/server": "react-dom/server.edge" }
29
        : webflowAlias,
30
    },
31
}
32
});

$
npm run preview

Now you can create components in the Webflow site, export them, and use them in the application.

Next steps

Now that you’ve successfully created and deployed a Webflow Cloud app, here’s what you can do next.

Bring your app to Webflow Cloud

Learn about configuration options to work seamlessly with Webflow Cloud, and add advanced functionality to your new app.

Optimize your workflow

Learn how to manage environments for different stages of development.

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