diff --git a/README.md b/README.md index 6c0098c..e7a6beb 100644 --- a/README.md +++ b/README.md @@ -33,6 +33,38 @@ Example [Next.js](https://nextjs.org) app for [Webflow Cloud](https://webflow.co └── wrangler.json ``` +## Set up Webflow CLI + +Install Webflow CLI (global install is optional; you can also run the CLI without `npx` in the export step below). + +```bash +npm install -g @webflow/webflow-cli +``` + +Log in to Webflow and select your desired workspace from the opened browser window. You can append `--force` to reset any existing authentication. + +```bash +npx webflow auth login +``` + +Then, install the needed dependencies. + +```bash +npm install +``` + +Sync all the Webflow components into your local filesystem. Answer the prompts to generate and configure your `webflow.json`. + +```bash +npx webflow devlink export +``` + +Select your desired Webflow site from the sites listed. + +You can also view our DevLink documentation to learn more about all the options, features, and supported elements. + +The `webflow.json` `devlink-export` block tells the Webflow CLI where to write generated React components from your linked Webflow site. After running `webflow cloud init` (or `webflow auth login` + `webflow devlink export`) the CLI populates `./src/webflow/` with components you can import directly into your Vite app. + ## Commands | Command | Action | diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 5d749cf..51a8af7 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,6 +1,7 @@ import type { Metadata } from "next"; import "./globals.css"; import { DevLinkProvider } from "@/webflow/DevLinkProvider"; +import { DevLinkFontTags } from "@/webflow/webflow_modules/DevLinkFontTags"; export const metadata: Metadata = { title: "Create Next App", @@ -14,6 +15,9 @@ export default function RootLayout({ }>) { return ( +
+