In this blog, we explore different techniques to white label a React web application during run-time, compile-time and build-time.
We have all been in a scenario where we might want to use the same application and provide it to different clients but with their own look and feel or theme (different logo, colors, etc.). There are multiple different techniques one can employ to achieve this. We will be discussing some well known techniques to white label a react application.
Method-1: White-labelling during compile time/build time
We will be using vite + react to achieve this.
- Create a new directory and open it in vscode.
- To setup our react application with pre-configurations we will be using vite. npm create vite@latest . — –template react-ts
Follow further steps defined in vite setup and install external libraries using npm install.
Your project directory should look something like this:
- Create a directory src -> settings. This directory will have base styles in base.ts and different theme styles in theme1.ts and theme2.ts:
base.ts:
theme1.ts:
theme2.ts:
Now we will make use of path aliases in TypeScript to dynamically fetch a theme file either from theme1.ts or theme2.ts.
- Add baseUrl and paths in the tsconfig.app.json file:
In here we have defined path aliases in the paths key-value.
- After updating the tsconfig.app.json file we also need to let vite know about these aliases, luckily we have a library which reads the config file and adds these aliases. Install dependency npm install vite-tsconfig-paths And make below changes to the vite.config.ts file:
Now vite will know about the aliases defined in tsconfig.app.json file.
- As an example, we will be creating a button component, which fetches the color dynamically.
As we have defined path aliases we can change the endpoint from [“./settings/theme1.ts”] to [“./settings/theme2.ts”] in the config file and work with different colors during compile time and create separate builds for different themes:
On making changes to tsconfig.app.json, make sure to restart the front-end server
Method-2: White labelling during run time.
In this scenario we will be using css variables and make use of CSSOM (CSS object model) to change these variables during run-time.
Consider an application where you want to change the primary and secondary colours. All the above information is received from an API on successful login. An example API endpoint can be an /profile.
- To achieve white labelling during run time we can define default css variables at root pseudo-class to set global css variables:
- Now you can access these variables while writing component-based styles:
- On successful login and calling the /profile endpoint which gives us primary-color and secondary-color in the API response; we can make use of CSSOM to change the primary and secondary colors at run-time:
Here, primaryColor and secondaryColor are variables which hold the values coming from an API.
This will change the value of –app-primary-color and –app-secondary-color at the root level, since all the component level styles are based on the root css variables, these components will also adapt to the change.
Conclusion
There are two easy ways through which white-labeling of React.JS application can be achieved. One is at compile time where you can compile the app with specific style elements. With the other method, you define an API on backend which can fetch specific styling on user choice and the selected styling can be applied in application at run-time.
In the last five years, we at CoReCo Technologies, have worked with 60+ various size businesses from across the globe, from various industries. We not only developed their products & platforms but also have helped in bringing in more clarity into their vision and strategy.
For more details about such case studies, visit us at www.corecotechnologies.com and if you would like to convert this virtual conversation into a real collaboration, please write to [email protected].
