Swagger UI is an open-source tool that allows developers to visualize and interact with the APIs they are building. It provides a user-friendly interface that allows developers to explore the API’s resources, parameters, and responses. Swagger UI is particularly useful for developers who want to test and debug their APIs before deploying them.

Azure Functions can be used to build RESTful APIs, making it a popular choice for developers who want to create lightweight and scalable APIs. Azure Functions also provides built-in support for Swagger UI, making it easy for developers to add it to their APIs.

So, let’s dive in!

Azure Functions V4 and .NET 6/7

Out-of-the-box solution

To generate an OpenAPI document and to customize the Open API Configuration, you don't need third libraries or special implementations.
Everything is out-of-the-box and easy to implement.
You can start from an existing project or from a new Azure Function project.
Add a new class to the project and choose the name you like the most.
I use "OpenApiConfigurationOptions" but you can change it.
The class must implement the interface "IOpenApiConfigurationOptions". This is the only requirement.

The code

Below you can find the code you need to customize OpenApi Configuration in your functions.
You can copy and paste the code below and change some settings as the Title, the version and the description.

    public class OpenApiConfigurationOptions : IOpenApiConfigurationOptions
    {
        public OpenApiInfo Info { get; set; } =
          new OpenApiInfo
          {
              Title = "My API Documentation",
              Version = "1.0",
              Description = "a long description of my APIs",
              Contact = new OpenApiContact()
              {
                  Name = "My name",
                  Email = "myemail@company.com",
                  Url = new Uri("https://github.com/Azure/azure-functions-openapi-extension/issues"),
              },
              License = new OpenApiLicense()
              {
                  Name = "MIT",
                  Url = new Uri("http://opensource.org/licenses/MIT"),
              }
          };

        public List<OpenApiServer> Servers { get; set; } = new();

        public OpenApiVersionType OpenApiVersion { get; set; } = OpenApiVersionType.V2;

        public bool IncludeRequestingHostName { get; set; } = false;
        public bool ForceHttp { get; set; } = true;
        public bool ForceHttps { get; set; } = false;
        public List<IDocumentFilter> DocumentFilters { get; set; } = new();
    }

In the next post, we will see how to customize the UI with an additional JavaScript and an additional CSS.

View the new page

Now you are ready to see the result of our changes.
Launch the Azure Function project in debug or without debug and navigate to "{hostname}/api/swagger/ui".
You should view the Swagger UI page with the new information.

Are you interested in learning GitHub but don't know where to start? Try my course on LinkedIn Learning: Learning GitHub.

Thanks for reading this post, I hope you found it interesting!

Feel free to follow me to get notified when new articles are out 🙂

Emanuele BartolesiFollow

🏆 Microsoft MVP & GitHub Star ⭐ | 🔓 Auth0 Ambassador & 📢 Codemotion Ambassador | 👨‍🎓 LinkedIn Technical Instructor