diff --git a/README.md b/README.md index 75379cb..840d74a 100644 --- a/README.md +++ b/README.md @@ -28,6 +28,39 @@ Example Astro app configured for [Webflow Cloud](https://webflow.com/cloud). | `npm run preview` | Build and preview with Wrangler locally | | `npm run deploy` | Deploy with Webflow Cloud CLI | +## 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. + + ## Learn more - [Astro documentation](https://docs.astro.build) diff --git a/package.json b/package.json index 5e93302..5acd55b 100644 --- a/package.json +++ b/package.json @@ -2,6 +2,12 @@ "name": "astro", "type": "module", "version": "0.0.1", + "engines": { + "node": ">=22.12.0" + }, + "overrides": { + "vite": "^7" + }, "scripts": { "dev": "astro dev", "build": "astro build", @@ -11,11 +17,11 @@ "cf-typegen": "wrangler types" }, "dependencies": { - "@astrojs/cloudflare": "^12.6.6", - "@astrojs/react": "^4.2.5", + "@astrojs/cloudflare": "^13.5.0", + "@astrojs/react": "^5.0.0", "@types/react": "^19.1.2", "@types/react-dom": "^19.1.2", - "astro": "^5.17.2", + "astro": "^6.1.4", "react": "^19.1.0", "react-dom": "^19.1.0" }, diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 7347fe2..20afb45 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -1,6 +1,7 @@ --- -import { DevLinkProvider } from '../../devlink/DevLinkProvider'; -import "../../devlink/global.css"; // Webflow Styles +import { DevLinkProvider } from '../../webflow/DevLinkProvider'; +import { DevLinkFontTags } from '../../webflow/webflow_modules/DevLinkFontTags'; +import "../../webflow/css/global.css"; // Webflow Styles --- @@ -9,6 +10,7 @@ import "../../devlink/global.css"; // Webflow Styles + @@ -23,10 +25,27 @@ import "../../devlink/global.css"; // Webflow Styles diff --git a/src/pages/index.astro b/src/pages/index.astro index d568396..1939490 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,67 +1,34 @@ --- -import Layout from '../layouts/Layout.astro'; -import { Section, Container, Block, Link } from '../../devlink/_Builtin/Basic'; +import Layout from "../layouts/Layout.astro"; + +// Once you've synced DevLink components, import them from "../../webflow/*" +// import { ComponentName } from "../../webflow/ComponentName"; --- -
- - -

Welcome to Webflow Cloud

-

This is a simple test using Basic components with enhanced styling.

-
- +
+

+ Welcome to Webflow Cloud +

+

+ Your Astro project is ready. Start building and sync your Webflow + components and design system. +

+ - - -
+ + + - - diff --git a/webflow.json b/webflow.json index 2c927ce..0aecd9c 100644 --- a/webflow.json +++ b/webflow.json @@ -2,11 +2,12 @@ "cloud": { "framework": "astro" }, - "devlink": { - "rootDir": "./devlink", - "cssModules": true, - "fileExtensions": { - "js": "jsx" - } + "devlink-export": { + "rootDir": "./webflow", + "components": ".*", + "componentGroups": ".*", + "ts": false, + "cssScopes": true, + "relativeHrefRoot": "/" } -} +} \ No newline at end of file diff --git a/wrangler.json b/wrangler.json index 076e3f2..4937136 100644 --- a/wrangler.json +++ b/wrangler.json @@ -1,12 +1,11 @@ { "$schema": "node_modules/wrangler/config-schema.json", "name": "astro", - "main": "./dist/_worker.js/index.js", "compatibility_date": "2025-04-15", "compatibility_flags": ["nodejs_compat"], "assets": { "binding": "ASSETS", - "directory": "./dist" + "directory": "./dist/client" }, "observability": { "enabled": true