{"id":22403349,"url":"https://github.com/springload/webflow-dev-workflow","last_synced_at":"2025-08-11T21:36:57.884Z","repository":{"id":196765764,"uuid":"697058283","full_name":"springload/webflow-dev-workflow","owner":"springload","description":"An alternative to using Webflow's built in editor. A standard workflow to allow developers to program locally, bundle, and export code to a Webflow project.","archived":false,"fork":false,"pushed_at":"2024-02-21T20:55:38.000Z","size":1359,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-02-01T06:25:28.594Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/springload.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-09-27T01:07:20.000Z","updated_at":"2023-10-19T04:03:58.000Z","dependencies_parsed_at":"2023-10-26T22:31:01.551Z","dependency_job_id":"c75e8b5b-be8b-4b3d-87ca-1439c7cbff8c","html_url":"https://github.com/springload/webflow-dev-workflow","commit_stats":null,"previous_names":["springload/webflow-dev-workflow"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/springload%2Fwebflow-dev-workflow","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/springload%2Fwebflow-dev-workflow/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/springload%2Fwebflow-dev-workflow/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/springload%2Fwebflow-dev-workflow/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/springload","download_url":"https://codeload.github.com/springload/webflow-dev-workflow/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245760930,"owners_count":20667893,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-05T09:16:53.958Z","updated_at":"2025-03-27T00:45:05.948Z","avatar_url":"https://github.com/springload.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# webflow-dev-workflow\n\nAn alternative to using Webflow's built in editor. A standard workflow to allow developers to program locally, bundle, and export code to a Webflow project.\n\nThis repo is public to allow for the use of JSDelivr's CDN. Do not include any sensitive data.\n\n## Initial setup\n\nClone repo and run\n`yarn`\nto install dependencies.\n\nWithin `/client-projects`, create a new folder for the project you are working on, with an `index.ts` file inside. (`/client-projects/[current-project]/index.ts`)\n\nAdd `console.log('[message of your choice]')` in the `index.ts` file so you can test it (I like `\"woof!\"`, but you do you.)\n\n## Local development\n\n### Set up builder file\n\nIf there's already a `builder.mjs` file set up for your project at `client-projects/[current project]/dist/builder.mjs`, copy that file to the repo's root directory.\n\nOtherwise:\n\n1. in the root directory, make a copy of `builder.mjs.example` named `builder.mjs`\n1. Edit the `entryPoints` and `outdir` values in the `builder.mjs` file to match your project.\n   `entryPoints: [\"client-projects/[current project]/[the file you’re working on]\"`\n   e.g. `\"entryPoints: [\"client-projects/test-project/index.ts\"]`\n   `outdir: \"client-projects/[current project]/dist\"`\n   e.g. `outdir: \"client-projects/test-project/dist\"`\n\n### Build your JS \u0026 CSS files\n\n`yarn build` will now:\n\n- create minified js and css files in your designated `outdir` directory\n- serve them at port 8000\n- watch for changes.\n\n### Add code to Webflow\n\nIn Webflow, go to _Site settings \u003e\u003e Custom code_\n\n- add CSS files to the _Head code_ section in a `\u003clink\u003e`, e.g.\n  `\u003clink rel=\"stylesheet\" href=\"http://localhost:8000/scss/styles.css\"/\u003e`\n\n- add JS files to the _Footer code_ section in a `\u003cscript\u003e`, e.g.\n  `\u003cscript src=\"http://localhost:8000/index.js\"\u003e\u003c/script\u003e`\n  ![image](https://github.com/springload/webflow-dev-workflow/assets/27249781/5b2573e6-21fd-4652-b0e5-cbe084149da4)\n\nSave and publish.\n\nRefresh your published site to see changes, there's no need to re-publish via Webflow to see changes after this point.\nLook for your logged message in the console.\n\n## Prod / CDN\n\n1. In the root directory, copy your current `builder.mjs` (which is ignored by git) to your project's subdirectory`[client-projects]/[current project]/builder.mjs` (where it will be tracked).\n   Commit all of your changes and push to a branch with a name following this structure:\n   `[your-project]/[type-of-change]/[ticket-number-if-one-exists]--[description]`\n   eg.\n   `the-lumery/chore/ABC-204--update-readme`\n\n1. Once you have pushed your changes to GitHub, and you want to serve your code via a CDN, use JSDeliver’s CDN.\n   Go to: `https://cdn.jsdelivr.net/gh/springload/webflow-dev-workflow/client-projects/[current project]/dist/index.js`\n   You should see a minified version of your js file (+ any other modules you imported).\n\n1. If this is not your first deployment of this script, you will need to purge the CDN cache. Go to https://www.jsdelivr.com/tools/purge, and enter the URL of your JS file, and any other files which you would like to update (one per line), e.g. `https://cdn.jsdelivr.net/gh/springload/webflow-dev-workflow/client-projects/[current project]/dist/index.js`\n\n1. In Webflow, go to _Site Settings \u003e\u003e Custom code \u003e\u003e Footer code_ (or _Head code_ for CSS).\n   Add `src=\"https://cdn.jsdelivr.net/gh/springload/webflow-dev-workflow/client-projects/[current project]/dist/index.js\"` within the script tag, or your CSS link within the link tag.\n   ![image](https://github.com/springload/webflow-dev-workflow/assets/27249781/3fce42cc-4e66-443a-8aa1-69c9f817d546)\n\n1. Save and publish.\n\n1. Refresh your published site to see changes.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspringload%2Fwebflow-dev-workflow","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fspringload%2Fwebflow-dev-workflow","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspringload%2Fwebflow-dev-workflow/lists"}