### 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](/devlink/reference/overview).
The following steps walk you through this CLI setup:
1. Start creating the app by running this command:
```bash
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](https://docs.github.com/en/migrations/importing-source-code/using-the-command-line-to-import-source-code/adding-locally-hosted-code-to-github).
#### Run this step non-interactively (for CI/CD)
You can skip all prompts by passing the required flags up front. See the [`webflow cloud init` reference](/cli/command-reference#cloud-init) for the full list of options.
```bash
webflow cloud init \
--no-input \
-n my-webflow-cloud-app \
-f astro \
-m /app \
-s Welcome to Webflow Cloud
Your Next.js app is ready. Start building and sync your Webflow components and design system.
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](/devlink/docs/component-export/whats-exported).
To use these exported styles and components, you must import them in the app by adding the [`DevLinkProvider`](/devlink/docs/component-export/whats-exported#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:
#### Next.js
If you created a Next.js app, the `src/app/layout.tsx` file wraps the content of the application in the `DevLinkProvider` component, as in this example:
```tsx
import type { Metadata } from "next";
import { Geist, Geist_Mono, Inter } from "next/font/google";
import "./globals.css";
import { DevLinkProvider } from "../../../../webflow/DevLinkProvider";
const inter = Inter({
subsets: ["latin"],
variable: "--font-inter",
});
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
});
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
Welcome to Webflow Cloud
This is a simple test using Basic components with enhanced styling.
Get Started