Hosting Customizable API Management Portals on Azure about api-management-developer-portal

[gabrielpulga]

Made a few tests deploying through Azure Apps and Functions but weren't able to because of the size of the project and scalability reasons - now experimenting with Containers and trying to deploy both versions of the designer and publisher side by side

Ideally what I would like to see is publishing a change in the designer and having that change be deployed to the published version while self-hosting the portal, but I'm still not sure whether this is feasible given the architecture of the APIM developer portal

[fpdutra]

I have made some projects using the Azure Static Web Apps that deal with something like that. What you can do is setup an azure function that publishes the website (The current version does not seem to work without some tweaks, but it can) and then from there you can push the new updates to the Static Web App OR you can build a new image for a container for the runtime. If you want to build a new image for the container, I would look into Container Apps (mini-k8s) as well, since they give you 2 million requests for free every month.

It is 100% possible to do what you are describing, but you will have to code the publisher according to your needs.

[gabrielpulga]

@fpdutra thank you for your response, I'm looking into Container Apps for this and maybe eventually upgrade to a K8S solution in AKS - which would be the most optimal

Right now I'm focused in maybe getting two local containers up and running (one for the publisher and one for the designer) with a shared volume to test this out

What do you mean with "code the publisher according to your needs"? Any help is very much appreciated

[fpdutra]

oh ok. Yeah, definitely doable. What I mean by that is that from the designer you will have to code to call a "publisher" endpoint which is an Javascript endpoint that is compiled with the deployment of the designer. When you call that endpoint, the "publisher" endpoint would them make the "runtime" and publish that to the destination.

Paperbits has all three of these lifetime cycles. So what I mean by code the publisher is that the Javascript endpoint is fully customizable from code and can move the static files to anywhere you want. If you want to move it to a folder destination, or make it publish a new docker image, you can do that.

In the examples folder, there is an azure function that will do that. The webpack for that is wrong, but the code is mostly right. If you want a full example, I can provide that for you.

[gabrielpulga]

In the examples folder, there is an azure function that will do that. The webpack for that is wrong, but the code is mostly right. If you want a full example, I can provide that for you.

@fpdutra that would be incredibly helpful actually. I'm experimenting hosting the designer portal online and found out that any changes I make are being published to the central APIM instance, so one of the questions I have is how to publish those changes to the isolated environment that is the portal I'm trying to build

Also, I found out that controlling API visibility and user access is not possible within the self-hosted portal after contacting Azure support (which has not helped me that much), according to them they are unable to help with anything besides what's explicitly written in the documentation, which is very basic considering what I'm trying to do :

About the visibility and access are not supported in the self-hosted portal

I consulted it with my team and the only information available is the same documentation since it is expected for the users to test it from their end and it is out of our scope of support.

So yeah, any help is very much appreciated

[fpdutra]

ok. I will fork this repo and post here a link to it when it is done.

This example has the azure function publisher.

Here is a diagram of what it should be:

In the designer, you will have to code a button (best place would be on src/components/content.ts). That button will make an HTTP call to the azure function.

The azure function is an HTTP call that will output the files to directory on my example.

The runtime will just statically serve that directory.

This will work as a POC, but for Production, you might want to adapt your azure function and your runtime to work better in case of deployment scenarios, rollbacks, and things like that.

I will keep you posted here when it is done.

[gabrielpulga]

@fpdutra I immensely appreciate your help, thank you very much. Were you able to make progress on this? Can I help you with anything? I see you already forked the repo so I assume you're working on the changes

[fpdutra]

Hey Gabriel. I have worked on it, but it is not done. Here is the link to branch I'm working on:

https://github.com/fpdutra/api-management-developer-portal/tree/azure-function-publisher

I have compiled the Azure function and ran it. I will move to a docker container and then just finish up a docker-compose for you which will wire up the three containers together. It is not necessary to have three, but it might help understand how each piece works together.

[gabrielpulga]

Hey Gabriel. I have worked on it, but it is not done. Here is the link to branch I'm working on:

https://github.com/fpdutra/api-management-developer-portal/tree/azure-function-publisher

I have compiled the Azure function and ran it. I will move to a docker container and then just finish up a docker-compose for you which will wire up the three containers together. It is not necessary to have three, but it might help understand how each piece works together.

Thank you @fpdutra! I see you made several adjustments to the source code, including the publish function. Again, I appreciate you helping out with all of this

So this means that when hosting the designer online and clicking on Publish, it should trigger an azure function which will output the static website objects to a place of our choosing? Like for instance to a blob storage which can then be served as a static website?