NodeJS is the platform required for the ReactJS development.
The user interface of the Developer Portal can be customized simply without editing the React codebase or the CSS in most cases. You will be required to modify the react code base, if you need to do advanced customizations.
This change was introduced through a WUM update.
<API-M_HOME>/repository/deployment/server/jaggeryapps/devportal/in a terminal and run the following command.
Run the command given below, to start the npm build. Note that it will continuously watch for any changes and rebuild the project.
npm run build:dev
If you are required to rewrite the UI completely, you can make changes in the
devportal/sourcefolder. If you want to override a specific React Component or a File from the
source/src/folder, you need to do it in the
devportal/override/srcfolder by only copying the desired file/files.
Following will override the API Documentation component and Overview components.
override └── src ├── Readme.txt └── app └── components └── Apis └── Details ├── Documents │ └── Documentation.jsx └── Overview.jsx
Adding new files to the override folder¶
You can import the NewFile.jsx by adding the AppOverride prefix to the import and provide the full path relative to the override folder.
override └── src ├── Readme.txt └── app └── components └── Apis └── Details ├── Documents │ └── Documentation.jsx └── Overview.jsx └── NewFile.jsx
import NewFile from 'AppOverride/src/app/components/Apis/Details/NewFile.jsx';
A compilation error will show up if you try to import the NewFile.jsx from Overview.jsx as follows.
import NewFile from './NewFile.jsx';
When you are doing active development, the watch mode is working with the overridden files. But adding new files and directories will not trigger a new webpack build.
npm run build:prod