Plan B to Run Front-End of WSO2 API Manager

WSO2 APIM is an open-source Platform for Building and Managing APIs With Ease. Since it is an open-source, you can contribute to it too.

Let’s say you are a front-end developer who loves to fix something or add an improvement to front-end of WSO2 APIM.

You just have to get the APIM-APPS repository and go the relevant webpack directory (let’s say you want to test devportal, then path is <apim-apps>/portals/devportal/src/main/webapp) and run the below command. Note that you should have node 16 installed in your machine.

npm ci

Then run a WSO2 product pack on your machine and then run below command on the webpack directory.

npm start

Now on port 8081, you can test your frontend. But note that, on port 9443, original pack will be available too.

But if you are here reading this, you may have trouble running and changing the front-end of WSO2 APIM in that way. Let’s call it plan A. There is also another way of doing this thing which will take few more minutes. So let’s discuss this as Plan B. You only need to follow below steps.

1. Download JDK 11, NodeJS 16, and Apache Maven to your local machine. If you already have them, great.
2. Get a fork of APIM-APPS repository which is the front-end of WSO2 APIM. You can find the public GitHub repository here.
3. Clone the fork to your local machine. Let’s say the path is <apim-apps> which can be any path you like.
4. Download the product using the official WSO2 site or build the product using the product repository. Let’s say the path of that is <product-apim> which can be any path you like.
5. Note : For the sake of simplicity, let’s say you want to add a change to devportal of APIM. You can do the same to other portals. You just have to change “devportal” to “admin” or “publisher” in that case when reading the article.
6. Go to <apim-apps>/portals/devportal.
7. Build it one time with the command mvn clean install.
8. Copy <apim-apps>/portals/devportal/target/devportal.war to <product-apim>/repository/deployment/server/webapps directory.
9. Go to <product-apim>/bin and run the product with the command sh api-manager.sh.
10. Once it’s deployed, shutdown the carbon server.
11. Go to <product-apim>/repository/deployment/server/webapps and delete devportal.war file which was copied in step 8. Keep the extracted devportal directory which is now also available in that path.
12. Go to <product-apim>/bin and run the product again following the step 9 command.
13. Open https://localhost:9443/devportal/apis in your browser. You will see the devportal of WSO2 APIM.
14. Open <apim-apps> using VS Code and do the change whatever you need in that code. Then run the below set of commands.

cd <apim-apps>/portals/devportal/src/main/webapp
npm run build:prod
rm -r <product-apim>/repository/deployment/server/webapps/devportal/site/public
cp -r <apim-apps>/portals/devportal/src/main/webapp/site/public <product-apim>/repository/deployment/server/webapps/devportal/site/

After that, you will see the changes you added to the code on your browser. If not, refresh your browser.

If you change something again, run the above set again. If there is an error, fix that from your code and try again.

Happy Coding ♥️​