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

Published 09-02-2020 12:31 AM 2,557 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

 

%3CLINGO-SUB%20id%3D%22lingo-sub-1627032%22%20slang%3D%22en-US%22%3EHow%20to%20add%20custom%20JavaScript%20file%20into%20Self-hosted%20developer%20portal%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1627032%22%20slang%3D%22en-US%22%3E%3CP%3E%3CSPAN%20data-contrast%3D%22auto%22%3EIn%20Azure%20API%20management%2C%20you%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%20data-contrast%3D%22auto%22%3Ecan%20build%20your%20developer%20portal%20in%20two%20ways%3A%26nbsp%3B%3C%2FSPAN%3E%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fazure%2Fapi-management%2Fapi-management-howto-developer-portal%23managed-vs-self-hosted%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3E%3CSPAN%20data-contrast%3D%22none%22%3Emanaged%20version%20and%20self-hosted%20version%3C%2FSPAN%3E%3CSPAN%20data-contrast%3D%22none%22%3E.%3C%2FSPAN%3E%3C%2FA%3E%3CSPAN%20data-contrast%3D%22auto%22%3E%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%20data-ccp-props%3D%22%7B%26quot%3B201341983%26quot%3B%3A0%2C%26quot%3B335559739%26quot%3B%3A160%2C%26quot%3B335559740%26quot%3B%3A240%7D%22%3E%26nbsp%3B%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%3CSPAN%20data-ccp-props%3D%22%7B%26quot%3B201341983%26quot%3B%3A0%2C%26quot%3B335559739%26quot%3B%3A160%2C%26quot%3B335559740%26quot%3B%3A240%7D%22%3E%26nbsp%3B%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%3CSPAN%20data-contrast%3D%22auto%22%3EBy%20using%20self-hosted%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%20data-contrast%3D%22auto%22%3Eportal%2C%20you%20can%3C%2FSPAN%3E%3CSPAN%20data-contrast%3D%22auto%22%3E%26nbsp%3Bedit%20the%20portal's%20codebase%20and%20extend%20the%20provided%20core%20functionality%3C%2FSPAN%3E%3CSPAN%20data-contrast%3D%22auto%22%3E.%26nbsp%3B%3C%2FSPAN%3E%26nbsp%3B%3CSPAN%20data-contrast%3D%22auto%22%3EAs%20in%20the%20self-hosted%20portal%2C%20sometimes%20you%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%20data-contrast%3D%22auto%22%3Ewill%3C%2FSPAN%3E%3CSPAN%20data-contrast%3D%22auto%22%3E%26nbsp%3Bneed%20to%20add%20some%20customized%20JavaScript%20files%20to%3C%2FSPAN%3E%3CSPAN%20data-contrast%3D%22auto%22%3E%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%20data-contrast%3D%22auto%22%3Efulfill%20a%20specific%20function%3C%2FSPAN%3E%3CSPAN%20data-contrast%3D%22auto%22%3E.%20This%20blog%20describes%3C%2FSPAN%3E%3CSPAN%20data-contrast%3D%22auto%22%3E%26nbsp%3Bhow%20you%20can%20add%20a%20customized%20JavaScript%20file%20into%20the%20self-hosted%20developer%20portal%3C%2FSPAN%3E%3CSPAN%20data-contrast%3D%22auto%22%3E%26nbsp%3Bfor%20your%20Azure%20API%20management%20service%3C%2FSPAN%3E%3CSPAN%20data-contrast%3D%22auto%22%3E.%3C%2FSPAN%3E%3CSPAN%20data-ccp-props%3D%22%7B%26quot%3B201341983%26quot%3B%3A0%2C%26quot%3B335559739%26quot%3B%3A160%2C%26quot%3B335559740%26quot%3B%3A240%7D%22%3E%26nbsp%3B%3C%2FSPAN%3E%3C%2FP%3E%0A%3CH3%20aria-level%3D%222%22%20id%3D%22toc-hId-1226751854%22%20id%3D%22toc-hId-1226750982%22%3E%26nbsp%3B%3C%2FH3%3E%0A%3CH3%20aria-level%3D%222%22%20id%3D%22toc-hId--580702609%22%20id%3D%22toc-hId--580703481%22%3E%26nbsp%3B%3C%2FH3%3E%0A%3CH2%20aria-level%3D%222%22%20id%3D%22toc-hId--591205713%22%20id%3D%22toc-hId--591206585%22%3E%3CSPAN%20data-contrast%3D%22none%22%3EPre-requirements%3A%3C%2FSPAN%3E%3CSPAN%20data-ccp-props%3D%22%7B%26quot%3B201341983%26quot%3B%3A0%2C%26quot%3B335559738%26quot%3B%3A40%2C%26quot%3B335559739%26quot%3B%3A0%2C%26quot%3B335559740%26quot%3B%3A259%7D%22%3E%26nbsp%3B%3C%2FSPAN%3E%3C%2FH2%3E%0A%3CP%3E%3CSPAN%20data-contrast%3D%22auto%22%3EBefore%20we%20start%2C%20we%20must%20setup%20our%20local%20environment%20first.%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%20data-ccp-props%3D%22%7B%26quot%3B201341983%26quot%3B%3A0%2C%26quot%3B335559739%26quot%3B%3A160%2C%26quot%3B335559740%26quot%3B%3A259%7D%22%3E%26nbsp%3B%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%3CSPAN%20data-contrast%3D%22auto%22%3ETo%20set%20up%20a%20local%20development%20environment%2C%20you%20need%20to%20have%3A%3C%2FSPAN%3E%3CSPAN%20data-ccp-props%3D%22%7B%26quot%3B201341983%26quot%3B%3A0%2C%26quot%3B335559739%26quot%3B%3A160%2C%26quot%3B335559740%26quot%3B%3A240%7D%22%3E%26nbsp%3B%3C%2FSPAN%3E%3C%2FP%3E%0A%3CUL%3E%0A%3CLI%20data-leveltext%3D%22%EF%82%B7%22%20data-font%3D%22Symbol%22%20data-listid%3D%2212%22%20aria-setsize%3D%22-1%22%20data-aria-posinset%3D%221%22%20data-aria-level%3D%221%22%3E%3CSPAN%20data-contrast%3D%22auto%22%3EAPI%20Management%20instance.%20If%20you%20don't%20have%20one%2C%E2%80%AF%3C%2FSPAN%3E%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fazure%2Fapi-management%2Fget-started-create-service-instance%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3E%3CSPAN%20data-contrast%3D%22none%22%3Efollow%20this%20tutorial%3C%2FSPAN%3E%3C%2FA%3E%3CSPAN%20data-contrast%3D%22auto%22%3E.%3C%2FSPAN%3E%3CSPAN%20data-ccp-props%3D%22%7B%26quot%3B201341983%26quot%3B%3A0%2C%26quot%3B335559739%26quot%3B%3A160%2C%26quot%3B335559740%26quot%3B%3A240%7D%22%3E%26nbsp%3B%3C%2FSPAN%3E%3C%2FLI%3E%0A%3CLI%20data-leveltext%3D%22%EF%82%B7%22%20data-font%3D%22Symbol%22%20data-listid%3D%2212%22%20aria-setsize%3D%22-1%22%20data-aria-posinset%3D%222%22%20data-aria-level%3D%221%22%3E%3CSPAN%20data-contrast%3D%22auto%22%3EStorage%20Account%20with%E2%80%AF%3C%2FSPAN%3E%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fazure%2Fstorage%2Fblobs%2Fstorage-blob-static-website%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3E%3CSPAN%20data-contrast%3D%22none%22%3Ethe%20static%20websites%20feature%3C%2FSPAN%3E%3C%2FA%3E%3CSPAN%20data-contrast%3D%22auto%22%3E%E2%80%AFenabled.%20Learn%E2%80%AF%3C%2FSPAN%3E%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fazure%2Fstorage%2Fcommon%2Fstorage-quickstart-create-account%3Ftabs%3Dazure-portal%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3E%3CSPAN%20data-contrast%3D%22none%22%3Ehow%20to%20create%20a%20new%20Storage%20Account%20in%20Azure%3C%2FSPAN%3E%3C%2FA%3E%3CSPAN%20data-contrast%3D%22auto%22%3E.%3C%2FSPAN%3E%3CSPAN%20data-ccp-props%3D%22%7B%26quot%3B201341983%26quot%3B%3A0%2C%26quot%3B335559739%26quot%3B%3A160%2C%26quot%3B335559740%26quot%3B%3A240%7D%22%3E%26nbsp%3B%3C%2FSPAN%3E%3C%2FLI%3E%0A%3CLI%20data-leveltext%3D%22%EF%82%B7%22%20data-font%3D%22Symbol%22%20data-listid%3D%2212%22%20aria-setsize%3D%22-1%22%20data-aria-posinset%3D%223%22%20data-aria-level%3D%221%22%3E%3CSPAN%20data-contrast%3D%22auto%22%3EGit%20on%20your%20machine.%20Install%20it%20by%20following%E2%80%AF%3C%2FSPAN%3E%3CA%20href%3D%22https%3A%2F%2Fgit-scm.com%2Fbook%2Fen%2Fv2%2FGetting-Started-Installing-Git%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noreferrer%22%3E%3CSPAN%20data-contrast%3D%22none%22%3Ethis%20Git%20tutorial%3C%2FSPAN%3E%3C%2FA%3E%3CSPAN%20data-contrast%3D%22auto%22%3E.%3C%2FSPAN%3E%3CSPAN%20data-ccp-props%3D%22%7B%26quot%3B201341983%26quot%3B%3A0%2C%26quot%3B335559739%26quot%3B%3A160%2C%26quot%3B335559740%26quot%3B%3A240%7D%22%3E%26nbsp%3B%3C%2FSPAN%3E%3C%2FLI%3E%0A%3CLI%20data-leveltext%3D%22%EF%82%B7%22%20data-font%3D%22Symbol%22%20data-listid%3D%2212%22%20aria-setsize%3D%22-1%22%20data-aria-posinset%3D%224%22%20data-aria-level%3D%221%22%3E%3CSPAN%20data-contrast%3D%22auto%22%3ENode.js%20(LTS%20version%2C%E2%80%AFv10.15.0%E2%80%AFor%20later)%20and%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%20data-contrast%3D%22auto%22%3Enpm%3C%2FSPAN%3E%3CSPAN%20data-contrast%3D%22auto%22%3E%26nbsp%3Bon%20your%20machine.%20Follow%E2%80%AF%3C%2FSPAN%3E%3CA%20href%3D%22https%3A%2F%2Fdocs.npmjs.com%2Fdownloading-and-installing-node-js-and-npm%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noreferrer%22%3E%3CSPAN%20data-contrast%3D%22none%22%3Ethis%20tutorial%3C%2FSPAN%3E%3C%2FA%3E%3CSPAN%20data-contrast%3D%22auto%22%3E%E2%80%AFto%20install%20them.%3C%2FSPAN%3E%3CSPAN%20data-ccp-props%3D%22%7B%26quot%3B201341983%26quot%3B%3A0%2C%26quot%3B335559739%26quot%3B%3A160%2C%26quot%3B335559740%26quot%3B%3A240%7D%22%3E%26nbsp%3B%3C%2FSPAN%3E%3C%2FLI%3E%0A%3CLI%20data-leveltext%3D%22%EF%82%B7%22%20data-font%3D%22Symbol%22%20data-listid%3D%2212%22%20aria-setsize%3D%22-1%22%20data-aria-posinset%3D%225%22%20data-aria-level%3D%221%22%3E%3CSPAN%20data-contrast%3D%22auto%22%3EAzure%20CLI.%20Follow%E2%80%AF%3C%2FSPAN%3E%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fcli%2Fazure%2Finstall-azure-cli-windows%3Fview%3Dazure-cli-latest%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3E%3CSPAN%20data-contrast%3D%22none%22%3Ethe%20Azure%20CLI%20installation%20steps%3C%2FSPAN%3E%3C%2FA%3E%3CSPAN%20data-contrast%3D%22auto%22%3E.%3C%2FSPAN%3E%3CSPAN%20data-ccp-props%3D%22%7B%26quot%3B201341983%26quot%3B%3A0%2C%26quot%3B335559739%26quot%3B%3A160%2C%26quot%3B335559740%26quot%3B%3A240%7D%22%3E%26nbsp%3B%3C%2FSPAN%3E%3C%2FLI%3E%0A%3C%2FUL%3E%0A%3CUL%3E%0A%3CLI%20data-leveltext%3D%22%EF%82%B7%22%20data-font%3D%22Symbol%22%20data-listid%3D%2212%22%20aria-setsize%3D%22-1%22%20data-aria-posinset%3D%221%22%20data-aria-level%3D%221%22%3E%3CSPAN%20data-contrast%3D%22auto%22%3EClone%20the%20repository%3C%2FSPAN%3E%3CSPAN%20data-contrast%3D%22auto%22%3E%26nbsp%3B%3C%2FSPAN%3E%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2FAzure%2Fapi-management-developer-portal%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3E%3CSTRONG%3E%3CSPAN%20data-contrast%3D%22none%22%3Eapi%3C%2FSPAN%3E%3C%2FSTRONG%3E%3CSTRONG%3E%3CSPAN%20data-contrast%3D%22none%22%3E-management-developer%3C%2FSPAN%3E%3C%2FSTRONG%3E%3CSTRONG%3E%3CSPAN%20data-contrast%3D%22none%22%3E-%3C%2FSPAN%3E%3C%2FSTRONG%3E%3CSTRONG%3E%3CSPAN%20data-contrast%3D%22none%22%3Eportal%3C%2FSPAN%3E%3C%2FSTRONG%3E%3C%2FA%3E%3CSPAN%20data-contrast%3D%22auto%22%3E%2C%20switch%20to%20the%20latest%20developer%20portal%20release%2C%20and%20install%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%20data-contrast%3D%22auto%22%3Enpm%3C%2FSPAN%3E%3CSPAN%20data-contrast%3D%22auto%22%3E%26nbsp%3Bpackages.%3C%2FSPAN%3E%26nbsp%3B%3CSPAN%20data-contrast%3D%22auto%22%3EYou%20can%20also%20refer%20to%26nbsp%3B%3C%2FSPAN%3E%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2FAzure%2Fapi-management-developer-portal%2Fwiki%2FSelf-hosting-the-portal%23step-1-setup-local-environment%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3E%3CSPAN%20data-contrast%3D%22none%22%3Ethis%20document%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%20data-contrast%3D%22none%22%3Eabout%20how%20to%20p%3C%2FSPAN%3E%3CSPAN%20data-contrast%3D%22none%22%3Eull%20the%20repository%20to%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%20data-contrast%3D%22none%22%3Elocal%3C%2FSPAN%3E%3C%2FA%3E%3CSPAN%20data-contrast%3D%22auto%22%3E.%3C%2FSPAN%3E%3CSPAN%20data-ccp-props%3D%22%7B%26quot%3B201341983%26quot%3B%3A0%2C%26quot%3B335559739%26quot%3B%3A160%2C%26quot%3B335559740%26quot%3B%3A240%7D%22%3E%26nbsp%3B%3C%2FSPAN%3E%3C%2FLI%3E%0A%3C%2FUL%3E%0A%3CH2%20aria-level%3D%222%22%20id%3D%22toc-hId-1896307120%22%20id%3D%22toc-hId-1896306248%22%3E%26nbsp%3B%3C%2FH2%3E%0A%3CH2%20aria-level%3D%222%22%20id%3D%22toc-hId-88852657%22%20id%3D%22toc-hId-88851785%22%3E%3CSPAN%20data-contrast%3D%22none%22%3ESteps%20to%20implement%3A%3C%2FSPAN%3E%3CSPAN%20data-ccp-props%3D%22%7B%26quot%3B201341983%26quot%3B%3A0%2C%26quot%3B335559738%26quot%3B%3A40%2C%26quot%3B335559739%26quot%3B%3A0%2C%26quot%3B335559740%26quot%3B%3A259%7D%22%3E%26nbsp%3B%3C%2FSPAN%3E%3C%2FH2%3E%0A%3CP%3E%3CSPAN%20data-contrast%3D%22auto%22%3EOnce%20you%20are%20done%20with%20the%20above%3C%2FSPAN%3E%3CSPAN%20data-contrast%3D%22auto%22%3E%26nbsp%3Bpreparations%2C%20you%20can%20follow%20these%20steps%20to%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%20data-contrast%3D%22auto%22%3Eadd%20the%20JavaScript%20file.%3C%2FSPAN%3E%3CSPAN%20data-ccp-props%3D%22%7B%26quot%3B201341983%26quot%3B%3A0%2C%26quot%3B335559739%26quot%3B%3A160%2C%26quot%3B335559740%26quot%3B%3A259%7D%22%3E%26nbsp%3B%3C%2FSPAN%3E%3C%2FP%3E%0A%3COL%3E%0A%3CLI%3E%3CSPAN%20data-contrast%3D%22auto%22%3EN%3C%2FSPAN%3E%3CSPAN%20data-contrast%3D%22auto%22%3Eavigate%20to%20the%20local%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%20data-contrast%3D%22auto%22%3Eapi%3C%2FSPAN%3E%3CSPAN%20data-contrast%3D%22auto%22%3E-management-developer-portal%20repository.%3C%2FSPAN%3E%3CSPAN%20data-ccp-props%3D%22%7B%26quot%3B201341983%26quot%3B%3A0%2C%26quot%3B335559685%26quot%3B%3A540%2C%26quot%3B335559739%26quot%3B%3A160%2C%26quot%3B335559740%26quot%3B%3A240%7D%22%3E%26nbsp%3B%3C%2FSPAN%3E%3C%2FLI%3E%0A%3CLI%3ECreate%20the%20customized%20JavaScript%20file%2C%20named%26nbsp%3B%3CSTRONG%20style%3D%22font-family%3A%20inherit%3B%22%3E%3CSPAN%20data-contrast%3D%22auto%22%3Ecustom.js%3C%2FSPAN%3E%3C%2FSTRONG%3E%3CSPAN%20style%3D%22font-family%3A%20inherit%3B%22%20data-contrast%3D%22auto%22%3E.%3C%2FSPAN%3E%26nbsp%3B%3CSPAN%20style%3D%22font-family%3A%20inherit%3B%22%20data-contrast%3D%22auto%22%3EThis%20is%20the%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%20style%3D%22font-family%3A%20inherit%3B%22%20data-contrast%3D%22auto%22%3Efile%20to%20add%20all%20the%20functions%20you%20want%20to%20have%20in%20your%20self%20-hosted%20developer%20portal.%3C%2FSPAN%3E%3CSPAN%20style%3D%22font-family%3A%20inherit%3B%22%20data-ccp-props%3D%22%7B%26quot%3B201341983%26quot%3B%3A0%2C%26quot%3B335559685%26quot%3B%3A540%2C%26quot%3B335559739%26quot%3B%3A160%2C%26quot%3B335559740%26quot%3B%3A240%7D%22%3E%26nbsp%3B%3C%2FSPAN%3EIn%20my%20case%2C%20I%20just%20add%20one%20line%20code%2C%20which%26nbsp%3B%3CSPAN%20style%3D%22font-family%3A%20inherit%3B%22%20data-contrast%3D%22auto%22%3Eintends%20to%20print%20out%20%E2%80%98this%20is%20to%20test%20the%20custom%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%20style%3D%22font-family%3A%20inherit%3B%22%20data-contrast%3D%22auto%22%3Ejs%3C%2FSPAN%3E%3CSPAN%20style%3D%22font-family%3A%20inherit%3B%22%20data-contrast%3D%22auto%22%3E.%E2%80%99%20in%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%20style%3D%22font-family%3A%20inherit%3B%22%20data-contrast%3D%22auto%22%3Ethe%20console%20of%20browser.%3C%2FSPAN%3E%3CSPAN%20style%3D%22font-family%3A%20inherit%3B%22%20data-ccp-props%3D%22%7B%26quot%3B201341983%26quot%3B%3A0%2C%26quot%3B335559739%26quot%3B%3A160%2C%26quot%3B335559740%26quot%3B%3A240%7D%22%3E%26nbsp%3B%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%223.png%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F216009i0D1EACD435548B1F%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20title%3D%223.png%22%20alt%3D%223.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FLI%3E%0A%3CLI%3EOpen%3CSPAN%20style%3D%22font-family%3A%20inherit%3B%22%20data-contrast%3D%22auto%22%3E%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%20style%3D%22font-family%3A%20inherit%3B%22%20data-contrast%3D%22auto%22%3Efile%3C%2FSPAN%3E%3CSPAN%20style%3D%22font-family%3A%20inherit%3B%22%20data-contrast%3D%22auto%22%3E%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%20style%3D%22font-family%3A%20inherit%3B%22%20data-contrast%3D%22auto%22%3E.%3C%2FSPAN%3E%3CSTRONG%20style%3D%22font-family%3A%20inherit%3B%22%3E%3CSPAN%20data-contrast%3D%22auto%22%3E%5C%3C%2FSPAN%3E%3C%2FSTRONG%3E%3CSTRONG%20style%3D%22font-family%3A%20inherit%3B%22%3E%3CSPAN%20data-contrast%3D%22auto%22%3Esrc%3C%2FSPAN%3E%3C%2FSTRONG%3E%3CSTRONG%20style%3D%22font-family%3A%20inherit%3B%22%3E%3CSPAN%20data-contrast%3D%22auto%22%3E%5Cthemes%5Cwebsite%5Cassets%5Cpage.html%20%2C%3C%2FSPAN%3E%3C%2FSTRONG%3E%3CSTRONG%20style%3D%22font-family%3A%20inherit%3B%22%3E%3CSPAN%20data-contrast%3D%22auto%22%3E%26nbsp%3B%3C%2FSPAN%3E%3C%2FSTRONG%3E%3CSPAN%20style%3D%22font-family%3A%20inherit%3B%22%20data-contrast%3D%22auto%22%3Ethis%20page.html%20is%20the%20root%20h%3C%2FSPAN%3E%3CSPAN%20style%3D%22font-family%3A%20inherit%3B%22%20data-contrast%3D%22auto%22%3Etml%20for%20the%20self-hosted%20developer%20portal.%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%20style%3D%22font-family%3A%20inherit%3B%22%20data-ccp-props%3D%22%7B%26quot%3B201341983%26quot%3B%3A0%2C%26quot%3B335559685%26quot%3B%3A540%2C%26quot%3B335559739%26quot%3B%3A160%2C%26quot%3B335559740%26quot%3B%3A240%7D%22%3E%26nbsp%3B%3C%2FSPAN%3EThen%26nbsp%3B%3CSPAN%20style%3D%22font-family%3A%20inherit%3B%22%20data-contrast%3D%22auto%22%3Eadd%20the%20script%20into%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%20style%3D%22font-family%3A%20inherit%3B%22%20data-contrast%3D%22auto%22%3E%26lt%3B%3C%2FSPAN%3E%3CSPAN%20style%3D%22font-family%3A%20inherit%3B%22%20data-contrast%3D%22auto%22%3Eheader%3C%2FSPAN%3E%3CSPAN%20style%3D%22font-family%3A%20inherit%3B%22%20data-contrast%3D%22auto%22%3E%26gt%3B%20section%20like%20below.%3C%2FSPAN%3E%3CSPAN%20style%3D%22font-family%3A%20inherit%3B%22%20data-ccp-props%3D%22%7B%26quot%3B201341983%26quot%3B%3A0%2C%26quot%3B335559685%26quot%3B%3A540%2C%26quot%3B335559739%26quot%3B%3A160%2C%26quot%3B335559740%26quot%3B%3A240%7D%22%3E%26nbsp%3B%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%221.png%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F216010i280749FED6A25318%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20title%3D%221.png%22%20alt%3D%221.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FLI%3E%0A%3CLI%3E%3CSPAN%20class%3D%22NormalTextRun%20SCXW101934883%20BCX9%22%3EIn%20the%20local%20debug%20environment%2C%20we%20need%20let%20webpack%20to%20know%20the%20custom.js%20file.%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%20class%3D%22TextRun%20SCXW101934883%20BCX9%22%20data-contrast%3D%22auto%22%3E%3CSPAN%20class%3D%22NormalTextRun%20ContextualSpellingAndGrammarErrorV2%20SCXW101934883%20BCX9%22%3ESo%3C%2FSPAN%3E%3C%2FSPAN%3E%3CSPAN%20class%3D%22TextRun%20SCXW101934883%20BCX9%22%20data-contrast%3D%22auto%22%3E%3CSPAN%20class%3D%22NormalTextRun%20SCXW101934883%20BCX9%22%3E%26nbsp%3Bwe%20need%20to%20go%20to%26nbsp%3B%3C%2FSPAN%3E%3C%2FSPAN%3E%3CSTRONG%3E%3CSPAN%20class%3D%22TextRun%20SCXW101934883%20BCX9%22%20data-contrast%3D%22auto%22%3E%3CSPAN%20class%3D%22NormalTextRun%20SCXW101934883%20BCX9%22%3Ewebpack.designer.js%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FSTRONG%3E%3CSPAN%20class%3D%22TextRun%20SCXW101934883%20BCX9%22%20data-contrast%3D%22auto%22%3E%3CSPAN%20class%3D%22NormalTextRun%20SCXW101934883%20BCX9%22%3E%2C%20add%20the%20following%20code.%3C%2FSPAN%3E%3C%2FSPAN%3E%3CSPAN%20class%3D%22EOP%20SCXW101934883%20BCX9%22%20data-ccp-props%3D%22%7B%26quot%3B201341983%26quot%3B%3A0%2C%26quot%3B335559685%26quot%3B%3A540%2C%26quot%3B335559739%26quot%3B%3A160%2C%26quot%3B335559740%26quot%3B%3A240%7D%22%3E%26nbsp%3B%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%222.png%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F216011i05289221C79D9CAD%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20title%3D%222.png%22%20alt%3D%222.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FLI%3E%0A%3CLI%3E%3CSPAN%20data-contrast%3D%22auto%22%3ERun%20code%3A%26nbsp%3B%3C%2FSPAN%3E%3CSTRONG%3E%3CI%3E%3CSPAN%20data-contrast%3D%22auto%22%3Enpm%3C%2FSPAN%3E%3C%2FI%3E%3C%2FSTRONG%3E%3CSTRONG%3E%3CI%3E%3CSPAN%20data-contrast%3D%22auto%22%3E%26nbsp%3Brun%20build-designer%3C%2FSPAN%3E%3C%2FI%3E%3C%2FSTRONG%3E%3CSPAN%20data-contrast%3D%22auto%22%3E.%20This%20will%20create%20static%20files%20and%20put%20them%20into%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%20data-contrast%3D%22auto%22%3Ethe%26nbsp%3B%3C%2FSPAN%3E%3CSTRONG%3E%3CSPAN%20data-contrast%3D%22auto%22%3E.%3C%2FSPAN%3E%3C%2FSTRONG%3E%3CSTRONG%3E%3CSPAN%20data-contrast%3D%22auto%22%3E%5C%3C%2FSPAN%3E%3C%2FSTRONG%3E%3CSTRONG%3E%3CSPAN%20data-contrast%3D%22auto%22%3Edist%3C%2FSPAN%3E%3C%2FSTRONG%3E%3CSTRONG%3E%3CSPAN%20data-contrast%3D%22auto%22%3E%5Cdesigner%3C%2FSPAN%3E%3C%2FSTRONG%3E%3CSPAN%20data-contrast%3D%22auto%22%3E%26nbsp%3Bfolder.%3C%2FSPAN%3E%3CSPAN%20data-ccp-props%3D%22%7B%26quot%3B201341983%26quot%3B%3A0%2C%26quot%3B335559685%26quot%3B%3A540%2C%26quot%3B335559739%26quot%3B%3A160%2C%26quot%3B335559740%26quot%3B%3A240%7D%22%3E%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%20data-contrast%3D%22auto%22%3EWe%20will%20be%20able%20to%20see%20file%20custom.js%20added%20during%20the%20process.%3C%2FSPAN%3E%3CSPAN%20data-ccp-props%3D%22%7B%26quot%3B201341983%26quot%3B%3A0%2C%26quot%3B335559685%26quot%3B%3A540%2C%26quot%3B335559739%26quot%3B%3A160%2C%26quot%3B335559740%26quot%3B%3A240%7D%22%3E%26nbsp%3B%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%225.png%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F216013i506118143A186E07%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20title%3D%225.png%22%20alt%3D%225.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FLI%3E%0A%3CLI%3E%3CSPAN%20data-ccp-props%3D%22%7B%26quot%3B201341983%26quot%3B%3A0%2C%26quot%3B335559685%26quot%3B%3A540%2C%26quot%3B335559739%26quot%3B%3A160%2C%26quot%3B335559740%26quot%3B%3A240%7D%22%3E%3CSPAN%20class%3D%22TextRun%20SCXW256709980%20BCX0%22%20data-contrast%3D%22auto%22%3E%3CSPAN%20class%3D%22NormalTextRun%20SCXW256709980%20BCX0%22%3ENavigating%26nbsp%3B%3C%2FSPAN%3E%3C%2FSPAN%3E%3CSPAN%20class%3D%22TextRun%20SCXW256709980%20BCX0%22%20data-contrast%3D%22auto%22%3E%3CSPAN%20class%3D%22NormalTextRun%20SCXW256709980%20BCX0%22%3Eto%26nbsp%3B%3C%2FSPAN%3E%3C%2FSPAN%3E%3CSTRONG%3E%3CSPAN%20class%3D%22TextRun%20SCXW256709980%20BCX0%22%20data-contrast%3D%22auto%22%3E%3CSPAN%20class%3D%22NormalTextRun%20SCXW256709980%20BCX0%22%3E.%3C%2FSPAN%3E%3C%2FSPAN%3E%3CSPAN%20class%3D%22TextRun%20SCXW256709980%20BCX0%22%20data-contrast%3D%22auto%22%3E%3CSPAN%20class%3D%22NormalTextRun%20SCXW256709980%20BCX0%22%3E%5C%3C%2FSPAN%3E%3C%2FSPAN%3E%3CSPAN%20class%3D%22TextRun%20SCXW256709980%20BCX0%22%20data-contrast%3D%22auto%22%3E%3CSPAN%20class%3D%22SpellingError%20SCXW256709980%20BCX0%22%3Edist%3C%2FSPAN%3E%3C%2FSPAN%3E%3CSPAN%20class%3D%22TextRun%20SCXW256709980%20BCX0%22%20data-contrast%3D%22auto%22%3E%3CSPAN%20class%3D%22NormalTextRun%20SCXW256709980%20BCX0%22%3E%5Cdesigner%5Cscripts%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FSTRONG%3E%3CSPAN%20class%3D%22TextRun%20SCXW256709980%20BCX0%22%20data-contrast%3D%22auto%22%3E%3CSPAN%20class%3D%22NormalTextRun%20SCXW256709980%20BCX0%22%3E%26nbsp%3Band%20check%20if%20the%20custom.js%20file%20is%20showing%20up%20there.%3C%2FSPAN%3E%3C%2FSPAN%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%226.png%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F216012i650BD17A791E4904%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20title%3D%226.png%22%20alt%3D%226.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FLI%3E%0A%3CLI%3E%3CSPAN%20data-contrast%3D%22auto%22%3ERun%20code%3A%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%20data-contrast%3D%22auto%22%3Enpm%3C%2FSPAN%3E%3CSPAN%20data-contrast%3D%22auto%22%3E%26nbsp%3Bstart%2C%20to%20startup%20the%20local%20host.%20In%20the%20browser%20console%2C%20we%20will%20be%20able%20to%20see%20the%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%20data-contrast%3D%22auto%22%3Eline%20below%2C%20which%20shows%20that%20the%20custom.js%20has%20been%20successfully%20added.%3C%2FSPAN%3E%3CPRE%3E%3CSPAN%20data-contrast%3D%22none%22%3Ethis%E2%80%AFis%E2%80%AFto%E2%80%AFtest%E2%80%AFthe%E2%80%AFcustom%E2%80%AF%3C%2FSPAN%3E%3CSPAN%20data-contrast%3D%22none%22%3Ejs%3C%2FSPAN%3E%3C%2FPRE%3E%0A%3CSPAN%20data-contrast%3D%22auto%22%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%227.png%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F216015i35B257232E54AFAE%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20title%3D%227.png%22%20alt%3D%227.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FLI%3E%0A%3CLI%3E%3CSPAN%20data-contrast%3D%22auto%22%3EOnce%20local%20debug%20success%2C%20we%20can%20publish%20the%20web%20page.%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%20data-contrast%3D%22auto%22%3EThe%20same%20process%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%20data-contrast%3D%22auto%22%3Ehappens%2C%20and%3C%2FSPAN%3E%3CSPAN%20data-contrast%3D%22auto%22%3E%26nbsp%3Bwe%20will%20need%20to%20update%20the%20webpack%2C%20so%20that%20the%20custom.js%20will%20be%20included%20while%20publishing%20the%20website.%20The%20name%20of%20the%20webpack%20for%20publishing%20is%3C%2FSPAN%3E%3CSTRONG%3E%3CSPAN%20data-contrast%3D%22auto%22%3E%26nbsp%3Bwebpack.publisher.js.%3C%2FSPAN%3E%3C%2FSTRONG%3E%3CSPAN%20data-ccp-props%3D%22%7B%26quot%3B201341983%26quot%3B%3A0%2C%26quot%3B335559685%26quot%3B%3A540%2C%26quot%3B335559739%26quot%3B%3A160%2C%26quot%3B335559740%26quot%3B%3A240%7D%22%3E%26nbsp%3B%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%228.png%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F216014i11E4C82137C3D1AF%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20title%3D%228.png%22%20alt%3D%228.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FLI%3E%0A%3CLI%3E%3CSPAN%20data-contrast%3D%22auto%22%3ERun%20code%3A%26nbsp%3B%3C%2FSPAN%3E%3CSTRONG%3E%3CI%3E%3CSPAN%20data-contrast%3D%22auto%22%3Enpm%3C%2FSPAN%3E%3C%2FI%3E%3C%2FSTRONG%3E%3CSTRONG%3E%3CI%3E%3CSPAN%20data-contrast%3D%22auto%22%3E%26nbsp%3Brun%20publish%3C%2FSPAN%3E%3C%2FI%3E%3C%2FSTRONG%3E%3CSPAN%20data-contrast%3D%22auto%22%3E.%20This%20will%20create%20static%20files%20and%20put%20them%20into%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%20data-contrast%3D%22auto%22%3Ethe%26nbsp%3B%3C%2FSPAN%3E%3CSTRONG%3E%3CSPAN%20data-contrast%3D%22auto%22%3E.%3C%2FSPAN%3E%3C%2FSTRONG%3E%3CSTRONG%3E%3CSPAN%20data-contrast%3D%22auto%22%3E%5C%3C%2FSPAN%3E%3C%2FSTRONG%3E%3CSTRONG%3E%3CSPAN%20data-contrast%3D%22auto%22%3Edist%3C%2FSPAN%3E%3C%2FSTRONG%3E%3CSTRONG%3E%3CSPAN%20data-contrast%3D%22auto%22%3E%5Cwebsite%3C%2FSPAN%3E%3C%2FSTRONG%3E%3CSPAN%20data-contrast%3D%22auto%22%3E%26nbsp%3Bfolder.%3C%2FSPAN%3E%3CSPAN%20data-ccp-props%3D%22%7B%26quot%3B201341983%26quot%3B%3A0%2C%26quot%3B335559685%26quot%3B%3A540%2C%26quot%3B335559739%26quot%3B%3A160%2C%26quot%3B335559740%26quot%3B%3A240%7D%22%3E%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%20data-contrast%3D%22auto%22%3EWe%20will%20be%20able%20to%20see%20file%20custom.js%20added%20during%20the%20process.%3C%2FSPAN%3E%3CSPAN%20data-ccp-props%3D%22%7B%26quot%3B201341983%26quot%3B%3A0%2C%26quot%3B335559685%26quot%3B%3A540%2C%26quot%3B335559739%26quot%3B%3A160%2C%26quot%3B335559740%26quot%3B%3A240%7D%22%3E%26nbsp%3B%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%229.png%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F216017i5F7F4DF84A977D5D%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20title%3D%229.png%22%20alt%3D%229.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FLI%3E%0A%3CLI%3E%3CSPAN%20data-ccp-props%3D%22%7B%26quot%3B201341983%26quot%3B%3A0%2C%26quot%3B335559685%26quot%3B%3A540%2C%26quot%3B335559739%26quot%3B%3A160%2C%26quot%3B335559740%26quot%3B%3A240%7D%22%3E%3CSPAN%20class%3D%22TextRun%20%20BCX0%20SCXW14460621%22%20data-contrast%3D%22auto%22%3E%3CSPAN%20class%3D%22NormalTextRun%20%20BCX0%20SCXW14460621%22%3ENavigating%26nbsp%3B%3C%2FSPAN%3E%3C%2FSPAN%3E%3CSPAN%20class%3D%22TextRun%20%20BCX0%20SCXW14460621%22%20data-contrast%3D%22auto%22%3E%3CSPAN%20class%3D%22NormalTextRun%20%20BCX0%20SCXW14460621%22%3Eto%26nbsp%3B%3C%2FSPAN%3E%3C%2FSPAN%3E%3CSTRONG%3E%3CSPAN%20class%3D%22TextRun%20%20BCX0%20SCXW14460621%22%20data-contrast%3D%22auto%22%3E%3CSPAN%20class%3D%22NormalTextRun%20%20BCX0%20SCXW14460621%22%3E.%3C%2FSPAN%3E%3C%2FSPAN%3E%3CSPAN%20class%3D%22TextRun%20%20BCX0%20SCXW14460621%22%20data-contrast%3D%22auto%22%3E%3CSPAN%20class%3D%22NormalTextRun%20%20BCX0%20SCXW14460621%22%3E%5C%3C%2FSPAN%3E%3C%2FSPAN%3E%3CSPAN%20class%3D%22TextRun%20%20BCX0%20SCXW14460621%22%20data-contrast%3D%22auto%22%3E%3CSPAN%20class%3D%22SpellingError%20%20BCX0%20SCXW14460621%22%3Edist%3C%2FSPAN%3E%3C%2FSPAN%3E%3CSPAN%20class%3D%22TextRun%20%20BCX0%20SCXW14460621%22%20data-contrast%3D%22auto%22%3E%3CSPAN%20class%3D%22NormalTextRun%20%20BCX0%20SCXW14460621%22%3E%5Cwebsite%5Cscripts%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FSTRONG%3E%3CSPAN%20class%3D%22TextRun%20%20BCX0%20SCXW14460621%22%20data-contrast%3D%22auto%22%3E%3CSPAN%20class%3D%22NormalTextRun%20%20BCX0%20SCXW14460621%22%3E%26nbsp%3Band%20check%20if%20the%20custom.js%20file%20is%20showing%20up%20there.%3C%2FSPAN%3E%3C%2FSPAN%3E%3CSPAN%20class%3D%22EOP%20%20BCX0%20SCXW14460621%22%20data-ccp-props%3D%22%7B%26quot%3B201341983%26quot%3B%3A0%2C%26quot%3B335559685%26quot%3B%3A540%2C%26quot%3B335559739%26quot%3B%3A160%2C%26quot%3B335559740%26quot%3B%3A240%7D%22%3E%26nbsp%3B%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%2210.png%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F216016i87E3BBD9202E5048%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20title%3D%2210.png%22%20alt%3D%2210.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FLI%3E%0A%3CLI%3E%3CSPAN%20data-contrast%3D%22auto%22%3EFinally%2C%20we%20can%20upload%20the%20locally%20generated%20static%20files%20to%20a%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%20data-contrast%3D%22auto%22%3Eblob%2C%20and%3C%2FSPAN%3E%3CSPAN%20data-contrast%3D%22auto%22%3E%26nbsp%3Bmake%20them%20accessible%20to%20the%20visitors.%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%20data-contrast%3D%22auto%22%3EIn%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%20data-contrast%3D%22auto%22%3Ethe%3C%2FSPAN%3E%3CSPAN%20data-contrast%3D%22auto%22%3E%26nbsp%3Bblob%20container%20'%24web'%2C%20I%20can%20successfully%20see%20custom.js%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%20data-contrast%3D%22auto%22%3Ethere.%3C%2FSPAN%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%2211.png%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F216018i02941D9A0C65C5E1%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20title%3D%2211.png%22%20alt%3D%2211.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FLI%3E%0A%3C%2FOL%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-TEASER%20id%3D%22lingo-teaser-1627032%22%20slang%3D%22en-US%22%3E%3CP%3E%3CSPAN%20data-contrast%3D%22auto%22%3EIn%20Azure%20API%20management%2C%20you%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%20data-contrast%3D%22auto%22%3Ecan%20build%20your%20developer%20portal%20in%20two%20ways%3A%26nbsp%3B%3C%2FSPAN%3E%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fazure%2Fapi-management%2Fapi-management-howto-developer-portal%23managed-vs-self-hosted%22%20rel%3D%22noopener%20noreferrer%22%20target%3D%22_blank%22%3E%3CSPAN%20data-contrast%3D%22none%22%3Emanaged%20version%20and%20self-hosted%20version%3C%2FSPAN%3E%3CSPAN%20data-contrast%3D%22none%22%3E.%3C%2FSPAN%3E%3C%2FA%3E%3CSPAN%20data-contrast%3D%22auto%22%3E%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%20data-ccp-props%3D%22%7B%26quot%3B201341983%26quot%3B%3A0%2C%26quot%3B335559739%26quot%3B%3A160%2C%26quot%3B335559740%26quot%3B%3A240%7D%22%3E%26nbsp%3B%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%3CSPAN%20data-ccp-props%3D%22%7B%26quot%3B201341983%26quot%3B%3A0%2C%26quot%3B335559739%26quot%3B%3A160%2C%26quot%3B335559740%26quot%3B%3A240%7D%22%3E%26nbsp%3B%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%3CSPAN%20data-contrast%3D%22auto%22%3EBy%20using%20self-hosted%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%20data-contrast%3D%22auto%22%3Eportal%2C%20you%20can%3C%2FSPAN%3E%3CSPAN%20data-contrast%3D%22auto%22%3E%26nbsp%3Bedit%20the%20portal's%20codebase%20and%20extend%20the%20provided%20core%20functionality%3C%2FSPAN%3E%3CSPAN%20data-contrast%3D%22auto%22%3E.%26nbsp%3B%3C%2FSPAN%3E%26nbsp%3B%3CSPAN%20data-contrast%3D%22auto%22%3EAs%20in%20the%20self-hosted%20portal%2C%20sometimes%20you%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%20data-contrast%3D%22auto%22%3Ewill%3C%2FSPAN%3E%3CSPAN%20data-contrast%3D%22auto%22%3E%26nbsp%3Bneed%20to%20add%20some%20customized%20JavaScript%20files%20to%3C%2FSPAN%3E%3CSPAN%20data-contrast%3D%22auto%22%3E%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%20data-contrast%3D%22auto%22%3Efulfill%20a%20specific%20function%3C%2FSPAN%3E%3CSPAN%20data-contrast%3D%22auto%22%3E.%20This%20blog%20describes%3C%2FSPAN%3E%3CSPAN%20data-contrast%3D%22auto%22%3E%26nbsp%3Bhow%20you%20can%20add%20a%20customized%20JavaScript%20file%20into%20the%20self-hosted%20developer%20portal%3C%2FSPAN%3E%3CSPAN%20data-contrast%3D%22auto%22%3E%26nbsp%3Bfor%20your%20Azure%20API%20management%20service%3C%2FSPAN%3E%3CSPAN%20data-contrast%3D%22auto%22%3E.%3C%2FSPAN%3E%3CSPAN%20data-ccp-props%3D%22%7B%26quot%3B201341983%26quot%3B%3A0%2C%26quot%3B335559739%26quot%3B%3A160%2C%26quot%3B335559740%26quot%3B%3A240%7D%22%3E%26nbsp%3B%3C%2FSPAN%3E%3C%2FP%3E%3C%2FLINGO-TEASER%3E%3CLINGO-LABS%20id%3D%22lingo-labs-1627032%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EAzure%20API%20Management%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E
Version history
Last update:
‎Sep 02 2020 12:33 AM
Updated by: