Applying UI changes in WSO2 API Manager.

Are you thinking about a way to apply UI fixes to Portals without rebuilding the project for every single change you do? You can go through this article to find the way to do it.

Image from VectorStock.com

When you are doing a UI change in API manager 4.1.0 onwards you have to use the apim-apps repository. In WSO2 API Manager, there are three React Portals available as Publisher Portal, Developer Portal, and Admin Portal.

I’ll use the Publisher Portal with APIM 4.1.0 Pack to explain to you how to do this. The same method can be used for other portals as well.

Step 01:

First, build the App you are going to work on. As we use Publisher Portal, go to /apim-apps/portals/publisher/ and build it with the following command.

mvn clean install

Step 02:

Go to APIM 4.1.0 Pack and start the server. Then copy the publisher.war file from /apim-apps/portals/publisher/target/ to <APIM_Home>/repository/deployment/server/webapps/

When it is deployed, shut down the server and delete the copied war file. Keep the extracted publisher folder under webapps.

Step 03:

Go to /apim-apps/portals/publisher/src/main/webapp/ folder and run the following command.

npm run build:dev

Step 04:

Replace the <APIM_Home>/repository/deployment/server/webapps/publisher/site/public folder with /apim-apps/portals/publisher/src/main/webapp/site/public folder.

Start the server.

Step 04 has to be repeated after you do a change and reload the publisher portal page.

Note: You can also make a Symlink for this step.

Thank you for taking the time to read this article!🙃

😇Happy coding!!😇