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.
npm i -g anchors-cli
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"
}
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.