Additional Settings

DevLink references a configuration file that defines settings for DevLink setup and sync. While DevLink will try to assume reasonable defaults for most of the settings, you can specify certain options to customize the behavior of DevLink management and setup.

Configuration files

DevLink supports the following configuration files at the root of your project:

• .webflowrc.js
• webflow.json

webflow.json is a newer configuration file that supports configuration for Webflow Cloud and DevLink. DevLink also supports the older .webflowrc.js file for backwards compatibility.

1
module.exports = {
2
  host: "https://api.webflow.com",
3
  rootDir: "./devlink",
4
  siteId: process.env.WEBFLOW_SITE_ID,
5
  authToken: process.env.WEBFLOW_AUTH_TOKEN,
6
  cssModules: true
7
}

Configuration options

Sync a subset of your components

To optimize your DevLink sync process, you can selectively sync specific components from your Webflow project instead of syncing all components. This is useful if you have a lot of components in your Webflow project that you don’t need to sync to DevLink.

1
module.exports = {
2
  components: ["MyComponent1", "MyComponent2"]
3
}

Or you can use regular expressions:

1
module.exports = {
2
  components: "/component/i"
3
}

Additionally, you can specify a list of components when running the sync command:

$
webflow devlink sync MyComponent1 MyComponent2

File extensions

By default, all DevLink component files use the .js and .css extensions, but you can also configure .jsx and other CSS extensions (i.e. .less) if preferred.

1
module.exports = {
2
  fileExtensions: {
3
    js: ".jsx",
4
    css: ".less"
5
  }
6
}

Environment variables

Some Webflow elements require an API key to function correctly:

• Maps
• Recaptcha

DevLink doesn’t export your API keys set on your Webflow site, therefore you’ll need to provide them via environment variables.

export DEVLINK_ENV_GOOGLE_MAPS_API_KEY='<your api key>'
export DEVLINK_ENV_GOOGLE_RECAPTCHA_API_KEY='<your api key>'

If you already have those keys set up in your project and don’t want to duplicate them or rename them, you can also provide a mapping in the .webflowrc.js file.

1
module.exports = {
2
  envVariables: {
3
    "GOOGLE_MAPS_API_KEY": "MY_GOOGLE_MAPS_API_KEY",
4
    "GOOGLE_RECAPTCHA_API_KEY": "MY_RECAPTCHA_API_KEY"
5
  }
6
}

Skipping global CSS rules

By default, DevLink exports a global.css stylesheet containing opinionated rules and selectors (such as html and h1). If you need to disable this behavior and only include the bare minimum in order for DevLink components to work, you should set the skipTagSelectors to true in your .webflowrc configuration file.

1
module.exports = {
2
  skipTagSelectors: true,
3
}

Skipping CSS modules

By default, DevLink exports a CSS module for each component to avoid style name collisions. While using CSS Modules is recommended, if you need to skip this behavior, you should set the cssModules to false.

1
module.exports = {
2
  cssModules: false,
3
}

Crash reports

When the DevLink sync command fails, you’ll see a prompt in the terminal with the opportunity to send Webflow a crash report for triage and improving the DevLink experience. You can decide to opt in or out with the allowTelemetry flag which will bypass the prompt should the sync command fail again.

1
module.exports = {
2
  allowTelemetry: true
3
}

Other settings

• host: The Webflow API host. This is usually https://api.webflow.com.
• rootDir: The root directory where DevLink will create the component files. (i.e. ./devlink)
• siteId: The Webflow site ID for the project you want to sync components from
• authToken: The Webflow API token for the project you want to sync components from. This is usually set in an .env file. You should avoid putting the API token inline in the .webflowrc.js file if you are checking this code in a central repo