How to apply changes to WSO2 API Manager React Portals on the go?

Do you want to easily apply changes to the React Portals then and there when you are doing UI changes? Then this article is for you.

Photo by Cookie the Pom on Unsplash

When you are doing UI changes to one of the following React Portals in WSO2 API Manager, it is tiering to rebuild the project for every minor change you do.

1. Publisher Portal (Accessed through https://localhost:9443/publisher)
2. Developer Portal (Accessed through https://localhost:9443/devportal)
3. Admin Portal (Accessed through https://localhost:9443/admin)

So let me show you how this can be very easily done in only 3 steps. The trick is to create a symlink between the portal app and the directory containing the portal code. I’ll be using the Publisher Portal as the example here. You can do the same for other portals as well.

I currently use the following specs for node and npm versions. You can use the latest.

node : v14.3.0

npm : 6.14.4

Step 1 :

Go to <APIM_HOME>/repository/deployments/server/jaggeryapps and delete the publisher folder in it.

Step 2 :

Create the symlink between publisher folder in /jaggeryapps and publisher portal code using the following command.

ln -s <full-path-to>/carbon-apimgt/features/apimgt/org.wso2.carbon.apimgt.publisher.feature/src/main/resources/publisher <full_path_to>/<APIM_HOME>/repository/deployments/server/jaggeryapps

Step 3 :

Go to carbon-apimgt/features/apimgt/org.wso2.carbon.apimgt.publisher.feature/src/main/resources/publisher and execute the following command to keep watching changes to the publisher code.

npm run build:dev

Note : When you do a change to the UI code, save it and reload the URL in the browser. This will reflect your latest changes.

Bonus Tip! 🙂

Before committing code, make sure to run the following command from within the directories of the respective portal application. This will catch any esLint errors and other critical issues found in the changed code.

npm run build:prod

Thank you for reading the article!

If you find any outdated content or issues with this article, please feel free to create an issue at Developer Corner Git repository here. Let’s grow together and help others in their journey too!

If you like this article please give it a clap. 🙂

Cheers!