How to add custom JavaScript file into Self-hosted developer portal

Published Sep 02 2020 12:31 AM 4,165 Views
Microsoft

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 .\src\themes\website\assets\page.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 .\dist\designer folder. We will be able to see file custom.js added during the process. 5.png
  6. Navigating to .\dist\designer\scripts 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 .\dist\website folder. We will be able to see file custom.js added during the process. 9.png
  10. Navigating to .\dist\website\scripts 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

 

3 Comments
Version history
Last update:
‎Sep 02 2020 12:33 AM
Updated by: