Hi All,
We are in the process of implementing the option for customers to customize
(by overriding or adding new things) React based web apps.
*Overriding:*
Customer can override a file of a web app by putting the custom version of
that file in the same relative path inside the
<carbon-home>/deployment/web-ui-apps/<app-name> directory.
e.g. Consider following web app "pets store" shipped in
<carbon-home>/wso2/<runtime>/deployment/web-ui-apps/pets-store directory.
pets-store
├── configuration.yaml
│
├── extensions
│ ├── widgets
│ ├── line-chart/
│ ├── bar-chart/
│ └── calendar/
│ ├── bundle.js
│ ├── styles.css
│ └── widget.json
│
├── i18n
│ └── en.json
│
├── pages
│ └── index.html
│
├── public
│ ├── images
│ │ └── logo.png
│ ├── css
│ │ └── styles.css
│ └── js
│ └── bundle.js
│
└── themes
├── dark/
└── light
├── js
│ └── some.js
└── css
└── styles.css
# In order to change CSS styles of the "calendar" widget, customer needs to
put their "styles.css" file in
<carbon-home>/deployment/web-ui-apps/pets-store/extensions/widgets/calendar/styles.css
path.
# To change the logo, custom logo image needs to be put in
<carbon-home>/deployment/web-ui-apps/pets-store/public/images/logo.png path.
# App's configurations can be overridden by putting a custom
configuration.yaml file into
<carbon-home>/deployment/web-ui-apps/pets-store/ directory.
With above overrides, the <carbon-home>/deployment/web-ui-apps/pets-store/
directory looks like following.
pets-store
├── configuration.yaml
│
├── extensions
│ └── widgets
│ └── calendar
│ └── styles.css
│
└── public
└── images
└── logo.png
*Adding:*
Customer can add a new entity (extensions, language files (i18n), themes)
by putting it to
<carbon-home>/deployment/web-ui-apps/<app-name>/<entity-type>/
path.
e.g. Consider the same "pets store" web app.
# Customer can add a new widget "pie-chart" by putting it to
<carbon-home>/deployment/web-ui-apps/pets-store/extensions/widgets/pie-chart
location.
# A new language file can be added by putting it to
<carbon-home>/deployment/web-ui-apps/pets-store/i18n/fr.json .
# New "autum" theme can be added by putting it to
<carbon-home>/deployment/web-ui-apps/pets-store/themes/ directory.
With above additions, the
<carbon-home>/deployment/web-ui-apps/pets-store/ directory
looks like following.
pets-store
│
├── extensions
│ └── widgets
│ └── pie-chart/
│ ├── bundle.js
│ ├── styles.css
│ └── widget.json
│
├── i18n
│ └── fr.json
│
└── themes
└── autum
├── js
│ └── some.js
└── css
└── styles.css
Carbon UI Server will do the app artifact merging (
<carbon-home>/wso2/<runtime>/deployment/web-ui-apps/pets-store/ and
<carbon-home>/deployment/web-ui-apps/pets-store/) at server start-up.
- When serving files, priority is always given to the customers version.
- Customer can revert their customizations by deleting their app
artifact <carbon-home>/deployment/web-ui-apps/<app-name> . When this
happens, the "merged" web app will be undeployed and the "default version"
(shipped by WSO2 in
<carbon-home>/wso2/<runtime>/deployment/web-ui-apps/<app-name>) will be
redeployed.
Your feedback is highly appreciated.
Thanks.
--
Sajith Janaprasad Ariyarathna
Senior Software Engineer; WSO2, Inc.; http://wso2.com/
<https://wso2.com/signature>
_______________________________________________
Architecture mailing list
[email protected]
https://mail.wso2.org/cgi-bin/mailman/listinfo/architecture
