NodeJS is a platform required for 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.
- Navigate to
<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.
Overriding the API Documentation 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';
During an active development, the watch mode works with the overridden files. Adding new files and directories will not trigger a new webpack build.
npm run build:prod