Bundling and Deployment

This guide covers bundling your components and deploying them to Webflow. You’ll also learn how to customize the build process for your specific needs.

Deployment

Share your components to Webflow using the Webflow CLI. This bundles your component files and uploads them to your Workspace as a library.

$
npx webflow library share

CI/CD deployment

For automated workflows, add the --no-input flag to skip interactive prompts:

$
npx webflow library share --no-input

Important: Add change detection to prevent accidentally removing components:

• Compare current library state with previous deployment
• Only share when components have actually changed

For more options, see the Webflow CLI reference. →.

Bundling

Webflow uses Webpack to bundle your component libraries. During this process, the bundler handles TypeScript compilation, resolves all dependencies and imports, optimizes your code for production, and generates deployable bundles ready for upload.

The default configuration handles most use cases automatically. Extend it when you need:

• Custom CSS processing
• Specialized file handling (SVG, images, fonts)
• Build optimizations (tree shaking, code splitting)

Bundle limits

Maximum bundle size: 50MB

Customize webpack configuration

Create a webpack.webflow.js file to override the default configuration. Then reference it in your webflow.json:

1
{
2
    "library": {
3
      "name": "React Components Library",
4
      "components": ["./src/**/*.webflow.@(js|jsx|mjs|ts|tsx)"],
5
      "bundleConfig": "./webpack.webflow.js"
6
    }
7
  }
8
  

Debugging

Disable minification

For better error messages during development, disable minification:

1
module.exports = {
2
    mode: "development",
3
  };
4
  

Or use the --dev flag when bundling locally:

$
npx webflow library bundle --public-path http://localhost:4000/ --dev

Note: --public-path is required for local bundling.

CSS modules

CSS Modules scope styles by generating unique class names, preventing conflicts between components.

By default, you must use bracket notation to access CSS classes:

1
import * as styles from "./Button.module.css";
2
3
export const Button = (text: string) => {
4
    return (
5
        <a className={styles["my-button"]}>
6
            {text}
7
        </a>
8
    );
9
};

To enable dot notation, update the css-loader configuration:

1
module.exports = {
2
    module: {
3
      // Override the existing rules to modify CSS processing
4
      rules: (currentRules) => {
5
        return currentRules.map((rule) => {
6
          // Find the rule that handles CSS files
7
          if (
8
            rule.test instanceof RegExp &&
9
            rule.test.test("test.css") &&
10
            Array.isArray(rule.use)
11
          ) {
12
  
13
              for (const [index, loader] of rule.use.entries()) {
14
                
15
              // Find the css-loader
16
              if (typeof loader === "object" && loader?.ident === "css-loader") {
17
                
18
                // Preserve existing options and add a custom configuration
19
                const options =
20
                  typeof loader.options === "object" ? loader.options : {};
21
                rule.use[index] = {
22
                  ...loader,
23
                  options: {
24
                    ...options,
25
                    modules: {
26
                      exportLocalsConvention: "as-is", // Use original class names
27
                      namedExport: false, // ⚠️ Allow dot notation access
28
                    },
29
                  },
30
                };
31
              }
32
            }
33
          }
34
          return rule;
35
        });
36
      },
37
    },
38
  };
39
  

Bundle locally

To test and debug your code components locally, you can bundle your library using the Webflow CLI command.

$
npx webflow library bundle --public-path http://localhost:4000/

The public path is the URL where you can serve your bundled library. The CLI will generate a dist folder with your bundled library.

To inspect the final configuration being used by webpack, use the --debug-bundler option.