Using your design system on Create React App (CRA)

Create React App (CRA) is a popular way of starting React single-page application.

Installation and usage

See Standard procedure.

Backlight's CLI link command performs a replacement of your design system into node_modules.

By default, CRA ignores node_modules to avoid performance issues. This means changes to the design system will require a restart of the CRA dev server to take them into account.

2 Solutions to solve this:

1) Eject from CRA

Ejecting from CRA gives you access to Webpack configuration where you can setup the ignored watch options.

Example of Webpack ignored config:

watchOptions.ignored = [
  /node_modules([\\]+|\/)+(!?@backlight-dev([\\]+|\/)+)/,
  /node_modules([\\]+|\/)+@backlight-dev([\\]+|\/)+node_modules([\\]+|\/)+/,
];

Watch is authorized on @backlight-dev scope.

2) Install CRACO

CRACO (Create React App Configuration Override) lets you override CRA's Webpack configuration without ejecting.

Example of craco.config.js

module.exports = {
  devServer: (config) => {
    config.watchOptions.ignored = [
      /node_modules([\\]+|\/)+(!?@backlight-dev([\\]+|\/)+)/,
      /node_modules([\\]+|\/)+@backlight-dev([\\]+|\/)+node_modules([\\]+|\/)+/,
    ];
    return config;
  },
};

Watch is authorized on @backlight-dev scope.