Using your Design System on Create React App (CRA)

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

Install & 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 authorised on @backlight-dev scope.

2) Install CRACO

CRACO (Create React App Configuration Override) let's 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 authorised on @backlight-dev scope.