Local Bridge is a powerful command-line tool designed to supercharge the way Webflow developers handle custom scripts.
To install the project, follow these steps:
- Clone the repository to your local machine
git clone https://github.com/ElvisAns/webflow_local_bridge local_bridge
or download the latest release https://github.com/ElvisAns/webflow_local_bridge/releases - Install dependencies by running
npm install
. - Change your Site ID, Client ID and Client Secret inside the
user.config.cjs
file (You can see your webflow site ID at the general settings of the site and the Client ID/Client Secret from the custom app tab) - Add javascript files inside the scripts folder (so you can run command below against them)
- Start your dev server by running
npm run dev
. for more please read below.
Authenticate your CLI instance with an authorization code. To get the authCode please refer to the app website at https://webflow-local-bridge-website.vercel.app
npm run bridge -- auth <authCode>
Upload a file to the Webflow assets.
The script has to be located inside the scripts folder
npm run bridge -- push <filename>
Register a script with a specific version.
Note : The first time you create a new file remember to register it's dev version (npm run bridge -- deploy --version=dev --file=test.js --location=head
, which will automatically register the localhost url) then you can switch to that dev version whenever you want to start development and see changes live.
npm run bridge -- deploy --version=<version> --file=<filename> --location=<location>
Attach a script's specific version to a Webflow page and location.
npm run bridge -- attach --pageId=<pageId> --file=<filename> --version=<version> --location=<location>
Make sure you redeploy your site from the designer for the script deployment to reflect on the actual website
Detach a script from a Webflow page.
npm run bridge -- remove --pageId=<pageId> --file=<filename>
Make sure you redeploy your site from the designer for the script deployment to reflect on the actual website
Retrieve scripts registered to your site or page, specify the page if you need to see registered script to the page only
npm run bridge -- show site --limit=<limit> --offset=<offset>
or
npm run bridge -- show page --pageId=<pageId> --limit=<limit> --offset=<offset>
The offset and limits are optional you can ommit them.
Contributions are welcome! Please submit bug reports, feature requests, and pull requests following our guidelines.
For any questions or inquiries, please contact me.