I-edit

Ibahagi sa

Alternative approaches to self-host developer portal

APPLIES TO: Developer | Basic | Basic v2 | Standard | Standard v2 | Premium | Premium v2

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 developer portal.
  • Front the files of your developer portal with a content delivery network to reduce page loading times.

This article provides information on each of these approaches.

If you haven't 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 developer portal online for collaboration purposes, use production builds of the designer and the publisher. Production builds bundle the files and exclude source maps.

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 developer portal

Run the publishing step in the cloud as an alternative to running 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 instead of a local folder. This location is the $web container of output storage. Configure this change in the ./src/config.publish.json file:

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

Step 2: Build and deploy the Function App

There's 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>

After you deploy it, you can invoke it with an HTTP call:

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

Hosting and content delivery network

In self-host a developer portal, we suggest 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 to reduce page loading times. We recommend using Azure Content Delivery Network.

Related content

Learn more about the developer portal:

  • Last updated on