anchors-cli v2.0.1

anchors-cli

The anchors.dev CLI lets you connect your IDE to your Webflow custom code.

Note: anchors.dev is currently in early alpha. To get access, reach out through the website.

Installation

npm i -g anchors-cli

Setup

In the root of your project folder:

anchors init

to create the necessary folder structure.

In the generated anchors.config.json file, insert your project_uuid:

// anchors.config.json
{
	"project_uuid": "15170732-a1a2-4550-a536-1599f41d1782"
}

Usage

What are anchor URLs

anchors.dev works by turning your code into URLs that can be embed into Webflow, without the need to update them as your code changes.

Sending code to anchors

The CLI sends your code to either your development or production anchors.

Development anchors will load on all webflow.io sites, e.g. mycompany.webflow.io.

Production anchors will load on all custom domains, e.g. mycompany.com.

Run the CLI in the root of your project folder to send your code to your anchors.

// To send to development
anchors dev

// To send to production
anchors prod

How to find my anchor URLs

Every file in the root of your anchors folder will become an anchor.

Your anchor URL will follow the format: code.anchors.dev/your-anchor-id/filename.js

Note: Even if a root file is .ts, the anchor will still be .js.

How to find my anchor ID

To find your anchor ID for a project use the following command (in the same directory as your anchors.config.json file):

anchors id

Using anchor URLs

To use your anchor URLs you'll need to add them to Webflow's custom code.

You can them in either the header/footer of pages or in embed blocks.

An example setup would look like:

<script src="https://code.anchors.dev/your-anchor-id/pages/filename.js" referrerpolicy="origin"></script>

Note: it's key that referrerpolicy="origin" is included so your development and production code is separated properly.