Webflow CSS Export Automation

Part 2 of 3

Discover how to automatically export your custom Webflow CSS into your app using browser automation.

Here’s a follow-up to my previous essay on how you can design HTML components in Webflow and then use the Webflow-generated CSS in your web app.

Designing Apps using Webflow

However, manually exporting the CSS from Webflow proves to be tedious each time a design change occurs. You gotta first launch the export window, then manually select and copy your CSS, and finally paste it into the CSS file(s) in your app.

Here are two much faster ways of exporting your CSS using Selenium browser automation. The first option is triggered manually, the second option runs a cron-job that listens to when you publish your website.

Note: if you only use your site for prototyping, be sure to disable subdomain indexing so your site stays private.

Option #1: Manual trigger

Installation

1. Using a command-line interface (such as Terminal on Mac), create a new folder, e.g. mkdir webflow and navigate into it cd webflow.
2. Using yarn (or npm), initialize and add the following packages:
   yarn init && yarn add selenium-webdriver chromedriver
3. Add an index.js file to it with the code below. Edit the code to include your Webflow site, as well as the path to your local CSS file in your app.

https://gist.github.com/heymartinadams/6a70c8c4d43720ced5b0cec34f638e3a

Run manual trigger

1. Each time you’ve made design changes in Webflow that you’d like to see reflected in your app, publish your Webflow site (shift + p then shift + enter).
2. In Terminal, using node, run node index.js. You’ll need to do this each time you published a change in Webflow.
3. If you want to be really fast, you can add this line to the scripts portion inside your app’spackage.json file: "css" : "node __PATH__/index.js" That way, everytime you call yarn css from within your app’s folder, it copies the CSS of the published site into your app’s css file.

Option #2: Automatic trigger via a cron job

Installation

1. Using a command-line interface (such as Terminal on Mac), create a new folder, e.g. mkdir webflow and navigate into it cd webflow.
2. Using yarn (or npm), initialize and add the following packages:
   yarn init && yarn add selenium-webdriver chromedriver dotenv node-cron webflow-api
3. Add an index.js file to it with the code below.

https://gist.github.com/heymartinadams/1d7485e8239ee0e10ee7dc8d4c42d407

Installation (continued)

1. Edit the code to include the path to your Webflow site, as well as the path to your local CSS file in your app.
2. You’ll need to find your site’s internal Webflow siteId and the webhookId by using Webflow’s webflow.sites() and webflow.webhooks() API. You might want to run this code in a separate file so you can console.log() your siteId and webhookId for use in the main file.
3. You’ll also need a Webflow token, which you can get from your site’s Settings » Integration tab, and pass it into node using the dotenv package. In your main app, you’ll need to add a .env file with the following content WEBFLOW_TOKEN='__YOUR_WEBFLOW_TOKEN__'.
4. You might also wish to edit the frequency at which the cron job checks to see if your Webflow site has been published (Webflow’s API limits rates at 60 requests per minute). The above example checks the site once a minute.
5. And, finally, add this line to the scripts portion inside your main app’spackage.json file (not in this cron job repository): "css" : "node __PATH_TO_CRON_JOB__/index.js" That way, when you call yarn css from within your app’s folder once, it begins the cron job that automatically copies the CSS of your site into your app’s css file every time you publish your Webflow site, using the WEBFLOW_TOKEN environment variable specified in step #3 above.

Run cron job

1. In Terminal, using node, run node index.js. This starts the listener; you only need to do this once.
2. Each time you’ve made design changes in Webflow that you’d like to see reflected in your app, publish your Webflow site (shift + p then shift + enter). The cron job will automatically update your app’s CSS.
3. To close the cron job, type control + c. This will stop the process.

In the future, I’ll work on code-splitting the exported CSS and automating the import not into one large file, as it’s currently done, but to modularize it for use with CSS-in-JS libraries. Follow me here on Medium to be notified.

If you haven’t yet tried out Webflow, I highly recommend it (been using it for years). Click here to sign up with Webflow, and pass on a few affiliate credits my way by doing so. I know you’ll love it:

https://webflow.com/?rfsn=870129.e7574e