Make it possible to build multiple branded web-sites from one codebase, e.g. by making the entry javascript file configurable (i.e. index.js / index.ts)

[stroiman]

Is your proposal related to a problem?

I'm working on a codebase that will result in multiple similar deployed applications, but with small differences. At this point in time, only branding is different between the applications, but other differences will come over time. But they will share > 90% of the code base.

Describe the solution you'd like

By allowing you customize which entry point (i.e. 'index.js/index.ts') to use, I could have multiple entry points files:

// index.brand1.ts
import './styles/brand1.scss'
import './index.ts'

//  index.brand.2.ts
import './styles.brand2.scss'
import './index.ts'

As more and more features are distinguished from the different brands, more responsibility of configuration and composition can be moved to the individual entry points.

Describe alternatives you've considered

Split the application into multiple codebases, sharing a common NPM package with all the reusable components

Although this approach my be the right approach in the future, at the moment it is overkill and will lead to too much complexity in the project setup.

Eject from CRA

The team isn't ready to maintain configuration of react, babel, eslint, tsc, etc. at this point in time.

Additional context

Our current solution is to have pre-build steps, that builds either brand1 or brand2's CSS files, and let the app reference the CSS output. That was the simplest solution that solves our need at the moment.

But this approach will become painful once we start to add differences in behaviour, as the codebase would probably become littered with if (process.env.BRAND_ID === "brand1") ...

[flucivja]

Hi @stroiman in my opinion this is not something CRA should handle.
Anyway the approach you provided is possible to do via CRA without need for detaching.

We implemented very similar approach in our project using CRA, here is how we do it:

• we created wrapper over CRA which is used to build all apps
• the wrapper is not detached CRA, it just uses react-scripts to build the apps
• in wrapper we use react-app-rewired to customise CRA build
• we created custom webpack loader to enable this solution
• the webpack loader works in the way that it loads dependency tree of the root app and then for every file it tries to look for branded file. This requires that branded app has same structure as the root file and also same exports in files. We use TypeScript to ensure contract is not broken. In the loader we also implemented several merge strategies between file from root app and branded app, e.g. in case it is JSON file - we merge them, in case it has extension .ext we just add branded file content to the end of root file, etc.)
• but this requires that root app and branded apps are in one monorepo and know about each other - we use yarn workspaces for it

All above enables as to do following:

root-app
  index.tsx
  components
    Button.tsx
    button.css
    Select.tsx

branded-app
  index.tsx // just imports root-app index.tsx

// or if we want to brand button in our branded app
branded-app
  index.tsx // just imports root-app index.tsx
  components
     button.css // we can either replace all styles or add just add custom styles in the end

// or if we want to customize props for button
branded-app
  index.tsx // just imports root-app index.tsx
  components
     Button.tsx 

/*
  // Button.tsx in branded-app

  import RootButton, {ButtonProps} from '@root-app';

  export default function Button(props: ButtonProps) {
     return <RootButton {...props} shape={'oval'} />; // now all buttons will be oval in branded app
  }
*/

[stroiman]

We eventually found a workaround which is good enough for the current state of the project. Thought I'd share.

We can use dynamic imports to import the brand specific index.ts file. This has been in the project for some time, and we haven't discovered any issues with it yet.

let loaded = false;
if (process.env.REACT_APP_BRANDID === "brand1") {
    loaded = true;
    import("./brand1"); // folder with index.tsx
}
if (process.env.REACT_APP_BRANDID === "brand2") {
    loaded = true;
    import("./brand2"); // folder with index.tsx
}

if (!loaded) {
    throw new Error("Unrecognized brand id: " + process.env.REACT_APP_BRANDID);
}

Shall this issue be closed, or do you want to pursue the original proposal (which I still think makes some kind of sense, and doesn't seem like it should be expensive or difficult to implement)