Alternative approaches to self-host developer portal

Article
04/03/2024

There are several alternative approaches you can explore when you self-host a developer portal:

Use production builds of the designer and the publisher.
Use an Azure Function App to publish your portal.
Front the files of your portal with a Content Delivery Network (CDN) to reduce page loading times.

This article provides information on each of these approaches.

If you have not already done so, set up a local environment for the latest release of the developer portal.

Build for production

If you want to host the development environment of the portal online for collaboration purposes, use production builds of the designer and the publisher. Production builds bundle the files, exclude source maps, etc.

Create a bundle in the ./dist/designer directory by running the command:

npm run build-designer

The result is a single page application, so you can still deploy it to a static web host, such as the Azure Blob Storage Static Website.

Similarly, place a compiled and optimized publisher in the ./dist/publisher folder:

npm run build-publisher

Use Function App to publish the portal

Run the publishing step in the cloud as an alternative to executing it locally.

To implement publishing with an Azure Function App, you need the following prerequisites:

Create an Azure Function. The Function needs to be a JavaScript language Function.

Install Azure Functions Core Tools:

npm install –g azure-function-core-tools

Step 1: Configure output storage

Uploading the content directly to the hosting website ("$web" container of output storage), instead of a local folder. Configure this change in the ./src/config.publish.json file:

{
   ...
   "outputBlobStorageContainer": "$web",
   "outputBlobStorageConnectionString": "DefaultEndpointsProtocol=...",
   ...
}

Step 2: Build and deploy the Function App

There is a sample HTTP Trigger Function in the ./examples folder. To build it and place it in ./dist/function, run the following command:

npm run build-function

Then, sign in to the Azure CLI and deploy it:

az login
cd ./dist/function
func azure functionapp publish <function app name>

Once it is deployed, you can invoke it with an HTTP call:

curl -X POST https://<function app name>.azurewebsites.net/api/publish

Hosting and CDN

In self-host a developer portal we suggested using an Azure storage account to host your website. However, you can publish the files through any solution, including services of hosting providers.

You can also front the files with a Content Delivery Network (CDN) to reduce page loading times. We recommend using Azure CDN.

Next steps

Learn more about the developer portal:

Azure API Management developer portal overview

Share via