>> Hey, friends. You may already know that you can easily publish
your APIs with Azure API Management
with a built-in developer portal.
But did you know that portal is built
on the lightweight JAMstack architecture?
Mike Budzynski is here to show me how
its extensive capabilities will enable you to make it your own,
today on Azure Friday.
[MUSIC].
>> Hey, I'm Scott Hanselman, and it's Azure Friday.
We're back to look at the API Management developer portal.
Thank you, Mike, for coming by.
>> Thanks for having me.
>> So last time, you showed me this was in preview.
>> That's right.
>> It's on JAMstack.
I've heard of LAMP and WAMP.
What is JAMstack?
>> That's right. So before we jump into that,
let's maybe explain what a developer portal is.
>> Good point.
>> So it's an out-of-pocket-generated
website with the documentation of
the APIs and that you can fully customize,
so you can make it your own.
Also, this website set
a guide for the developers that
built applications that rely on your APIs.
We have just released a new developer portal in API Management,
so completely new, to replace
the old developer portal that came with the product.
We want to make it scalable and lightweight,
and that's why we adopted the JAMstack architecture.
JAMstack stands for JavaScript, APIs, and Markup.
What it means is that all the content of the portal,
for example, page, configuration settings, etc.,
are stored as markup documents;
in our case, JSON,
which are then compiled into a set
of static HTML pages and media files.
Then those static HTML pages and media files are
the portal that you deploy to expose your visitors.
>> Is this a static site generator?
>> Yes. So this static site generator is
just one step of this approach to building websites.
You can think of it as server-less website that doesn't rely on
any infrastructure or on
any servers or anything. It is not database-based.
>> Okay. So it is static in the sense of,
it's not calling anything other than your own APIs or Internet.
>> Yes. So all the static information is within the static files.
But the dynamic information app,
for example, your user profile information,
is fetched for an API using client side JavaScript in the browser.
>> I've noticed that as the security is increased on the Internet,
there's cores, rules in
same site cookies and all things like that.
Does this take care of
all those things where I'm able to call my own APIs from this?
>> Yes. It's definitely easier to secure.
It's also easier to scale,
and there is no bottlenecks,
like database that are coupled to it,
and it can host a basic [inaudible].
But we'll get to that in the later part of the demo.
>> All right, let's do it.
>> So the second thing,
that when we made a developer portal,
I wanted to make sure that
our customers can go to market with it as soon as possible.
So for that, we decided to provision default content in
the developer portal that minimizes the amount
of customization that you need to do to publish your website.
So the default content holds the latest design trends,
and it also has been thoroughly tested for accessibility.
It works across devices, different screen sizes,
and it also is carefully crafted for structure and navigation.
So you can just easy and go with it to
the market and start to productize your APIs.
I would like to show you the default content
that comes with API Management and for that,
I have an Azure Friday vanilla, API Management service.
For now, we'll focus on the landing page.
So I can open the developer portal by clicking
the "Developer portal" button on Azure portal.
This is the landing page.
As you can see on the left and on the bottom,
I have administrative panels and on the landing page,
I have the top navigation bar with the level-end menu,
the call to action section,
the header, the featured trace of an API,
About us section, featured APIs,
the technical sample of the API for
more technical users, and customer references.
But they've also started customizing
another developer portal in
a different API Management Service to brand it with Azure Friday.
So I actually placed an image of one of my heroes right there,
in the top section and I also changed the title.
>> So professional.
>> Yeah. As you can see,
I can edit pretty much everything.
So right now, I am in a role of a content editor.
So I can fix the typo in
the title, for example, and save the portal.
I could also add a component on this page.
So this page is drag and drop components.
>> Wow.
>> So for example, a button is a component.
Text is a component.
Image is a component.
But so is a list of APIs or the sign-in form or a sign-up form.
So I could paste any component there,
whatever I would like to do.
This is typically what content editors would do.
Then I can go to the styling guide page,
which is a special page where you can style your developer portal.
So all the visual elements across all the pages,
you can control them here,
and this is a page for designers.
So you can style your type of graphic,
you can style the colors, buttons,
shadows, images, cards, video players, manuals, etc.
>> This is so sophisticated.
It's a shame it's just for API Management.
>> Maybe, who knows. Maybe it will go further.
So for example, I can change the colors from blue to
black so that they can match
the top picture that I replaced the background with.
>> Changing the palette, just like changing a palette
in PowerPoint changes it everywhere.
>> Exactly. Now, I could go back to the homepage,
and maybe I need to refresh it.
As you can see, the blue is now replaced with black.
So that was how easy it was to change the colors.
Of course, there are many more customization that you can perform,
but this is just not the basics of it.
>> So is this a thing that you host for me,
or that I might make an instance of it and host it on my own.
When is it a portal as
a service versus something I take responsibility for?
>> Exactly. So we'll get back to that in a minute.
This is the portal that is built into our API Management service.
So whenever your project came out on service,
the portal is there and all you can see,
this is attached to my API management service.
The third thing that you wanted to
get right when designing the new developer portal is,
I wanted to make it pluggable
into any DevOps pipeline that the customers might have.
>> Okay.
>> So to do that, we made all the contents of
the portal accessible for APIs.
So for example, you can program it with
export or import pages, those JSON documents.
You can perform or restore backups,
or you can migrate the portal between
the environments between different API Management services.
Lastly, the biggest challenge is we wanted to
be able to satisfy all the requirements of all the customers.
That's definitely a challenge.
To do that, we adopted
this component-based architecture of
the portal that will open-source the code base.
So if there is
a certain thing that a developer portal can't perform,
for example, integrate with a third-party data source.
You can fork the GitHub repository,
extend the code base of the portal.
So for example, it determines your own component
or extend existing component,
and then self-host as a developer portal.
We're still relying on our product,
but you can customize it to extend it to match your requirements.
Self-hosting the portal is very simple because of the JAMstack.
So all you get is a compiled portal,
just a set of static HTML pages and media files.
So the easiest way to self-host it is to drag
and drop it onto an Azure Storage account,
and use the static websites feature on the storage account.
So this is very easy.
Of course, if you like more complexity,
you can place a proxy there or a web server.
You can do it, for example,
on Kubernetes, in the Cloud on-premises, up to you.
So I would like to show that as well.
So I have already formed the code base.
This is my Visual Studio code with the code base of the portal.
I'm not going to make any changes,
but I will run the publishing step.
So the static sites and media file-generation step,
it usually takes around half a minute.
But as you can see, I already have a folder
which contains some of the data there.
For example, it has all the HTML pages,
and it also has the images that I
used in my management on the portal.
So right now, I'm
migrating from the managed version of the portal to
the self-hosted portal with keeping
all the data and customization that I have already made.
So once this step finishes,
I would like to upload those files into an Azure Storage account.
So let's give it a few seconds,
and then I will just run this script to upload
this local folder to a remote block storage.
>> Doing things with an Azure Storage static site is so easy.
It literally is using storage explorer.
>> Easy, fast, available, and cheap.
>> Yeah, it's super cheap.
>> You can also use CDN to distribute
your portal across the globe, if you like to.
But this is the easiest configuration right now.
As you can see, I'm using Azure CLI,
just a short command with my connection string.
>> All right. The command is quite short.
The connection string is quite long.
>> Yeah, the connection string is.
>> Azure Storage blob upload-batch.
>> That's that.
>> That's it?
>> Yeah, that's it. I just upload
the local folder to a remote storage,
and then I can refer this website.
As you can see, the host name points at the Azure Storage,
and this is the same portal that we've already customized.
For example, as you can see, this is black, not blue.
>> So now we are self-hosting the customized version.
>> Exactly. So if you wanted to,
you could extend some widgets.
You can create your own widget,
and this will be part of that portal.
We then have a chance to dive deeper into the portal.
So let's do that now.
I can go to APIs,
and as you can see, I have a bunch of Azure Friday APIs here.
Interesting, right? One of them is Azure Friday summit,
a secret conference from Azure Friday.
>> We should have that. We should do that.
>> This API contains all the API operations,
all the reference for this API.
So for example, I can go to the "GetSpeakers" API operation.
It tells me what actions or what URL I need to call.
What query parameters.
I'll talk about [inaudible] defined.
But if I had it, it would also show up here.
I can test this API right from the portal.
So if I want to develop my own applications, there's this API.
This is very handy,
so I can make a test for this API.
I received a 200 okay response.
So I know how this API works,
and what I can expect from it.
>> Like at the top, in this panel,
you got a list of all the different languages,
and that is interesting [inaudible].
>> That's right. Your can just copy-paste
the code snippets to the different languages.
>> How would I do that?
>> If you are writing, for example,
code in C#, just copy-paste,
and there's even a button that lets you
copy the whole code and run it easy.
>> That's cool. We're so used to a dynamic Web.
This is a dynamic Web,
it's a dynamic website.
But the JAMstack, it's just not initially intuitive.
It's so simple, but also so perfect.
>> Exactly. So JAMstack is the latest trend in web development.
Thanks to its simplicity.
I think it's becoming very, very popular.
Lastly, if you want to get started with your new portal,
I suggest you read the documentation.
We have some video tutorials for it.
You can also engage with our community,
and maybe even contribute to our open-source projects on GitHub.
It's under the Azure organization,
API management development portal.
>> Very cool. So imagine this slider bar between
gets your own quick self-hosted developer portal,
totally custom, get involved in open-source,
fork it, update your own components.
You have full power hosted by us to self-hosting.
>> You can make contributions privately to let extend the portal,
or you can actually open
a pull request and contribute to the code base.
We've already had quite a few contributions
towards [inaudible] feature.
>> Fantastic. People should head over to
GitHub and give them some stars.
I'm learning all about how to catalog my APIs with
the new developer portal in
Azure API Management today on Azure Friday.
[MUSIC]