Create custom index html in asp net core redoc as api documentation

Introduction

ASP.NET is a popular programming language used for web applications. In this article, we will explore how to create a custom index HTML in ASP.NET Core Redoc as API documentation.

What is ASP.NET Core Redoc?

ASP.NET Core Redoc is a tool that generates interactive API documentation for your ASP.NET Core web APIs. It provides a user-friendly to explore and test your APIs.

Creating a Custom Index HTML

To create a custom index HTML in ASP.NET Core Redoc, you need to these :

Step 1: Install the Redoc package

, you need to install the Redoc package in your ASP.NET Core project. Open the Package Manager Console and run the command:

Install-Package NSwag.AspNetCore

Step 2: Configure Redoc in Startup.cs

Next, you need to configure Redoc in the Startup.cs file of your ASP.NET Core project. Open the file and add the following code to the ConfigureServices :

.AddSwaggerDocument();

Then, add the following code to the Configure method:

app.UseOpenApi();
app.UseSwaggerUi3();

Step 3: Create a custom index HTML

Now, you can create a custom index HTML file for your Redoc documentation. Create a new HTML file in your project and add the following code:

<!DOCTYPE html>
<html>
<head>
    <title>API Documentation</title>
    <link href="https://cdn.jsdelivr.net/npm/redoc@next/redoc.min.css" rel="stylesheet" />
</head>
<body>
    <redoc spec-url='https://your-api-url/swagger/v1/swagger.json'></redoc>
    <script src="https://cdn.jsdelivr.net/npm/redoc@next/bundles/redoc.standalone.js"></script>
</body>
</html>

Replace “https://your-api-url/swagger/v1/swagger.json” with the URL of your API's Swagger JSON file.

Step 4: Use the custom index HTML

Finally, you need to tell Redoc to use your custom index HTML file. Open the Startup.cs file again and modify the Configure method as follows:

app.UseOpenApi(options =>
{
    options.PostProcess = (document, ) =>
    {
        document.Info.Title = "API Documentation";
        document.Info.Version = "v1";
        document.Info.Description = "Documentation for your API";
    };
});
app.UseSwaggerUi3(options =>
{
    options.DocumentPath = "/swagger/v1/swagger.json";
    options.IndexStream = () => GetType().Assembly.GetManifestResourceStream("YourProjectName.index.html");
});

“YourProjectName.index.html” with the path to your custom index HTML file.

Conclusion

In this article, we have learned how to create a custom index HTML in ASP.NET Core Redoc as API documentation. By following the steps outlined above, you can customize the appearance and behavior of your API documentation to suit your needs.

Rate this post

Leave a Reply

Your email address will not be published. Required fields are marked *

Table of Contents