This article is contributed. See the original author and article here.

In Azure API management, you can build your developer portal in two ways: managed version and self-hosted version.  

 

By using self-hosted portal, you can edit the portal’s codebase and extend the provided core functionality As in the self-hosted portal, sometimes you will need to add some customized JavaScript files to fulfill a specific function. This blog describes how you can add a customized JavaScript file into the self-hosted developer portal for your Azure API management service. 

 

 

Pre-requirements: 

Before we start, we must setup our local environment first.  

To set up a local development environment, you need to have: 

 

Steps to implement: 

Once you are done with the above preparations, you can follow these steps to add the JavaScript file. 

  1. Navigate to the local api-management-developer-portal repository. 
  2. Create the customized JavaScript file, named custom.js. This is the file to add all the functions you want to have in your self -hosted developer portal. In my case, I just add one line code, which intends to print out ‘this is to test the custom js.’ in the console of browser. 3.png
  3. Open file .srcthemeswebsiteassetspage.html , this page.html is the root html for the self-hosted developer portal.  Then add the script into <header> section like below. 1.png
  4. In the local debug environment, we need let webpack to know the custom.js file. So we need to go to webpack.designer.js, add the following code. 2.png
  5. Run code: npm run build-designer. This will create static files and put them into the .distdesigner folder. We will be able to see file custom.js added during the process. 5.png
  6. Navigating to .distdesignerscripts and check if the custom.js file is showing up there.6.png
  7. Run code: npm start, to startup the local host. In the browser console, we will be able to see the line below, which shows that the custom.js has been successfully added.
    this is to test the custom js

    7.png

  8. Once local debug success, we can publish the web page. The same process happens, and we will need to update the webpack, so that the custom.js will be included while publishing the website. The name of the webpack for publishing is webpack.publisher.js. 8.png
  9. Run code: npm run publish. This will create static files and put them into the .distwebsite folder. We will be able to see file custom.js added during the process. 9.png
  10. Navigating to .distwebsitescripts and check if the custom.js file is showing up there. 10.png
  11. Finally, we can upload the locally generated static files to a blob, and make them accessible to the visitors. In the blob container ‘$web’, I can successfully see custom.js there.11.png

 

Brought to you by Dr. Ware, Microsoft Office 365 Silver Partner, Charleston SC.