Getting Started

Deploy your first project to Webflow Cloud using Next.js or Astro.

In this guide, you’ll learn how to create projects and environments, deploy your app to your Webflow site, and integrate your Webflow design system with your app.

Webflow Cloud is currently in beta

Webflow Cloud is currently in beta. Please see webflow.com/cloud for access.

Time Estimate: 30 minutes

Prerequisites:

  • A Webflow account
  • A GitHub account
  • Node.js 20.0.0 or higher
  • A package manager of your choice (npm, yarn, or pnpm)

Getting started

1. Install the Webflow CLI

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

$npm install -g @webflow/webflow-cli

2. Create a new Webflow site

Create a new 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

View the AstralFund template in “Made in Webflow”

2

Clone the template

Click the “Clone in Webflow” button, then in the next window click “Create site.”

3

Add site details

Give your site a name and determine who should have access to your site. Once you’ve created your site, it will open in Webflow.

4

Review styles, components, and variables

Optionally, review the styles, variables, and components included in the site. You will export these to your new app in the following steps.

Webflow site

3. Create a new app

Use the Webflow CLI to create a new Astro or Next.js application. The CLI will generate a project scaffold that’s synced with your Webflow site’s design system through DevLink.

Webflow CLI
1

Initialize your project

In your terminal, run the command

$webflow cloud init
2

Select your framework

When prompted in the terminal, choose a supported framework to create a starter project (Astro or Next.js)

3

Select your mount path

When prompted in the terminal, enter the path where you plan to mount your app on your Webflow site (for example, /app → mysite.webflow.io/app).

4

Authenticate with Webflow

When prompted, authenticate with Webflow and select the site you just created for your Webflow Cloud project.

5

Import your Webflow design system

When prompted in the terminal, select the same Webflow site you used to authenticate. Once selected, the Webflow CLI will import any available styles, variables, and components via DevLink. DevLink will show a success message upon successful export to your app.

6

Publish your project to a GitHub repository

In your terminal, run the following commands to navigate to your new project, and create a git repository. Once created, publish the repository to GitHub. You will need to publish your local project to GitHub to create a new Webflow Cloud project as outlined in the next step.

$    cd your-project-name
>    git init

4. Create a new Webflow Cloud project

Connect GitHub to Webflow Cloud, create a project, and configure an environment for automated deployments.

Webflow Cloud project creation
1

Open Webflow Cloud

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

2

Authenticate with Github

Click the “Login to GitHub” button to connect your GitHub account. Then click the “Install GitHub” button. Follow the instructions to enable Webflow Cloud to access your GitHub repositories.

3

Create a new Webflow Cloud project

Click “Create New Project”

4

Add project details

  • Choose a name for your Webflow Cloud project.
  • Select your newly created GitHub repository.
  • Optionally, enter a description for your app.
  • Choose a branch to deploy your project from.
  • Choose a mount path for your project (for example, /app → mysite.webflow.io/app)
  • Click “Create Project” to save your project.
5

Publish your Webflow Site

To make your new project and environment live, you’ll need to publish your Webflow site. Click the “Publish” button in the top right corner of your Webflow Dashboard.

You won't see your app yet!

We need to build and deploy your Astro or Next.js before you see your project on your mount path. Follow the steps below to deploy your project.

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

Add Webflow components to your app by importing them from the DevLink folder, which contains assets synced from your Webflow design system.

Your scaffolded app already includes your global styles, and the DevLinkProvider to manage Webflow interactions in your project’s layout files.

1

Install dependencies and run your project locally

Run the following commands in your terminal:

$npm install
>npm run dev
2

Add Webflow components to your Astro project

In the pages directory, update index.astro to include the Navbar and Footer components from the /devlink folder in the root of your project. Import the components, and include them within the page structure.

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

Add the client:load directive to each component, to indicate Astro should load this component on the page.

3

Test your changes in a local preview environment

In your terminal, run the following command to start your project in a local preview environment that mimics your Webflow Cloud environment:

$npm run preview

6. Deploy your project to Webflow Cloud

1

Commit and push your changes

In your terminal, commit your changes to your GitHub repository using the following commands. Once your GitHub branch is updated, Webflow Cloud will automatically deploy your project to the new environment. No need to republish your site!

$git add .
>git commit -m "Deploying to Webflow Cloud"
>git push
Your deployment may take up to 5 minutes to complete

Your deployment may take up to 5 minutes to complete. You can view the status of your deployment in your Environment Details dashboard, and see details of your build and deployment in the build logs.

2

View your app at your site's URL + mount path

Once your app has been successfully deployed, navigate to your site’s domain and mount path to see your newly deployed Webflow Cloud app!

🎉Congratulations! 🎉
You’ve successfully created and deployed a Webflow Cloud project that is seamlessly integrated with your Webflow design system. Pat yourself on the back!

Next steps

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

Bring your app to Webflow Cloud

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

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

Learn about limits

Review the limits for Webflow Cloud

Troubleshooting

After creating a new environment, you’ll need to publish your Webflow site to make your environment live.

The Webflow Cloud Github App may not have access to your repository. To check, go to the Webflow Cloud tab in your Webflow site settings and click “Install Github App”. Follow the prompts on Github to ensure Webflow has access to read from your repository. Once you grant access, try committing to the branch that Webflow Cloud should be monitoring for deployments in your app.

If you’re referencing assets in your project, you’ll need to reference the mount path of your project (/app → mysite.webflow.io/app) to serve them correctly.

See more on referencing assets →

If your deployment is failing, check the build logs for more information. If the issue persists, please reach out to the Webflow Cloud team.

Learn more about submitting issues →

Built with