CODEWITHSUNDEEP
c#.net-coreopenapiswashbuckle
user22548444
user22548444

Reputation:

.NET Core using Swagger/OpenAPI to generate docs, how to generate in different languages?

I have a .NET Core Web API that is using OpenAPI/Swagger to generate the api endpoints. Is it possible for the page to support different languages (for example, I want my page to be in French and English and Spanish).

I have this in my startup

In my services

services.AddSwaggerGen();

In my app builder

app.UseSwagger();
app.UseSwaggerUI(options =>
{
   var path = string.IsNullOrWhiteSpace(options.RoutePrefix) ? "." : "..";
   options.SwaggerEndpoint($"{path}/swagger/v1/swagger.json", "API v1");
});

I want the generated page to be able to have the entire page translated. As of now, there is only English being translated.

I've tried adding routing to the controllers such as this link

https://github.com/domaindrivendev/Swashbuckle.AspNetCore/issues/640

It does generate different docs but no translation really

Upvotes: 2

Views: 957

Answers (1)

Corey Sutton
Corey Sutton

Reputation: 1025

You can generate multiple swagger documents in your app for multiple different languages. Here is a simple example:

services.AddSwaggerGen(c =>
{
    c.SwaggerDoc("v1-en", new OpenApiInfo { Title = "API (English)", Version = "v1" });
    c.SwaggerDoc("v1-fr", new OpenApiInfo { Title = "API (French)", Version = "v1" });
    c.SwaggerDoc("v1-es", new OpenApiInfo { Title = "API (Spanish)", Version = "v1" });
});

Another thing you can do that you may prefer is customize the Swagger UI to allow language selection. Here is a basic example of how you can do that:

app.UseSwagger();
app.UseSwaggerUI(c =>
{
    c.SwaggerEndpoint("/swagger/v1-en/swagger.json", "English");
    c.SwaggerEndpoint("/swagger/v1-fr/swagger.json", "French");
    c.SwaggerEndpoint("/swagger/v1-es/swagger.json", "Spanish");
});

Also refer to the Swagger Github Documentation for more info, there are other options as well, like translating the texts, using browser language settings, and more.

Edit (based on comments):

If you want to change the language of the static content (buttons, labels, etc) then you will have to do a few more things.

  1. You can create a custom swagger ui and translate that content. This will involve hosting your own swagger ui and replacing the static text with translations. You can use JS or any client-side library to switch between languages dynamically.

or

  1. use the browsers language settings to serve the swagger ui in the user's preferred language. you can detect the browser's language and load the corresponding translated swagger ui.

or

  1. This is the answer I think you are looking for. You can translate texts in the swagger ui dynamically using JS. Here is a basic example:

Include a JavaScript Library for Translation:

Use a library like i18next to handle the translation. Add Translation Files:

Create JSON files containing the translations for all static texts in the Swagger UI. Initialize the Translation Library:

Initialize the translation library and load the appropriate language file based on the user’s selection or browser’s language setting. Translate Texts Dynamically:

Use the translation library to replace static texts in the Swagger UI with their translations.

Basic example using i18next:

<!-- Include i18next and i18nextXHRBackend libraries -->
<script src="https://unpkg.com/[email protected]/i18next.min.js"></script>
<script src="https://unpkg.com/[email protected]/i18nextXHRBackend.min.js"></script>

<script type="text/javascript">
    i18next
        .use(i18nextXHRBackend)
        .init({
            lng: 'en', // set the default language
            fallbackLng: 'en',
            backend: {
                loadPath: '/locales/{{lng}}/translation.json' // path to the translation files
            }
        }, function(err, t) {
            // translate the texts
            document.getElementById('title').innerHTML = i18next.t('title');
            // ... translate other texts
        });
</script>

In this example, the i18next library is used to translate texts dynamically. You need to create translation files (e.g., en.json, fr.json, es.json) containing the translations for all static texts in the Swagger UI.

Upvotes: 0

Related Questions