Skip to content

Migrate hello-world-astro-devlink to DevLink v2 export #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
paulvmoreau-webflow merged 12 commits into from
May 19, 2026
+45 −10
Merged

Migrate hello-world-astro-devlink to DevLink v2 export #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
aec0f79
refactor: Update webflow configuration to use devlink-export with new…
paulvmoreau-webflow May 18, 2026
e5ebc2a
refactor: Update Layout.astro to use new webflow imports and include …
paulvmoreau-webflow May 18, 2026
3a97cb1
refactor: Update index.astro to use new webflow component imports
paulvmoreau-webflow May 18, 2026
cd9dd1a
refactor: Enhance webflow configuration and components with new DevLi…
paulvmoreau-webflow May 18, 2026
d1243c4
refactor: Simplify link configuration in index.astro
paulvmoreau-webflow May 18, 2026
2215ec4
refactor: Remove telemetry settings from webflow configuration
paulvmoreau-webflow May 18, 2026
76758d6
refactor: Clean up webflow configuration by removing unused treeShake…
paulvmoreau-webflow May 18, 2026
8dd9535
docs: Enhance README with Webflow CLI setup instructions
paulvmoreau-webflow May 18, 2026
733e3f5
refactor: Remove deprecated DevLink styles and update class references
paulvmoreau-webflow May 18, 2026
661a178
Merge branch 'v1' into devlink-v2-update
paulvmoreau-webflow May 19, 2026
305d7cd
refactor: Remove DEVLINK_SCOPE_CLASS from <html> tag
paulvmoreau-webflow May 19, 2026
4f24bf6
refactor: Remove obsolete DevLink components and related files
paulvmoreau-webflow May 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 33 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 <a href="https://developers.webflow.com/devlink/reference/overview" target="_blank" rel="noopener noreferrer">our DevLink documentation</a> 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)
Expand Down
7 changes: 4 additions & 3 deletions src/layouts/Layout.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
---
import { DevLinkProvider } from "../../webflow/DevLinkProvider";
import { DEVLINK_SCOPE_CLASS } from "../../webflow/devlinkScope";
import { DevLinkProvider } from '../../webflow/DevLinkProvider';
import { DevLinkFontTags } from '../../webflow/webflow_modules/DevLinkFontTags';
import "../../webflow/css/global.css"; // Webflow Styles
---

<!doctype html>
<html lang="en" class={DEVLINK_SCOPE_CLASS}>
Copy link
Copy Markdown
Collaborator Author

@paulvmoreau-webflow paulvmoreau-webflow May 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You don't need to set this scope class directly. Imported components will be wrapped in the scope class automatically.

If we put the scope class at the top level DOM then we run the risk of Webflow CSS style blocks bleeding over into the end user's app.

<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href={`${import.meta.env.BASE_URL}/favicon.svg`} />
<DevLinkFontTags />
Comment thread
paulvmoreau-webflow marked this conversation as resolved.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
Expand Down
15 changes: 8 additions & 7 deletions webflow.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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": "/"
}
}
}