Search code examples
node.jsreactjstranslationstrapideepl

Auto translate on Strapi


I'm using Strapi for a project on which I need to implement an auto-translate functionnality on some Collection.

To do so I install the strapi-plugin-translate and I follow the process as indicated using the provider strapi-provider-translate-deepl. Next I create a free account on deepl website to get an API key enter image description here

However when I go to the collection and I choose translate from another local. The text is just copy from this local but not translate: enter image description here

I check that the checkbox field "Enable localization for this field" is check and that the field "Configure automated translation for this field?" is at "Translate".

What trigger me as something wrong is that the API call is made to the endpoint "localhost:1337/translate/translate" when I click the "Translate from another locale" button.

enter image description here

That does not seems right to me but I follow the exact same config as on the strapi-provider-translate-deepl.

Here is a copy of my config/plugin.js file (I replace each API key letter by a X):

module.exports = ({ env }) => ({
    translate: {
        enabled: true,
        config: {
            // Add the name of your provider here (for example 'deepl' for  or the full package name)
            provider: 'deepl',
            providerOptions: {
                // your API key - required and wil cause errors if not provided
                apiKey: 'XXXXXXXX-XXX-XXXX-XXXX-XXXXXXXXXXXX:fx',
                // use custom api url - optional
                apiUrl: 'https://api-free.deepl.com',
                // use custom locale mapping (for example 'en' locale is deprecated so need to choose between 'EN-GB' and 'EN-US')
                localeMap: {
                    // use uppercase here!
                    EN: 'EN-US',
                },
            },
            apiOptions: {
                // see <https://github.com/DeepLcom/deepl-node#text-translation-options> for supported options.
                // note that tagHandling Mode cannot be set this way. 
                // use with caution, as non-default values may break translation of markdown 
                formality: 'default',
                // ...
            },
            // Which field types are translated (default string, text, richtext, components and dynamiczones)
            // Either string or object with type and format
            // Possible formats: plain, markdown, html (default plain)
            translatedFieldTypes: [
                'string',
                { type: 'text', format: 'plain' },
                { type: 'richtext', format: 'markdown' },
                'component',
                'dynamiczone',
            ],
            // If relations should be translated (default true)
            translateRelations: true,
        }
    },
    // enable a custom plugin
    'drag-drop-content-types': {
      // my-plugin is going to be the internal name used for this plugin
      enabled: true
    }
});

I even try add the env variable DEEPL_API_KEY=XXXXXXXX-XXX-XXXX-XXXX-XXXXXXXXXXXX:fx and DEEPL_API_URL=https://api-free.deepl.com inside my .env file but no change.

So as I didn't find a lot of information on how to solve this problem I decided to try to use strapi-plugin-deepl that is completly outdated but I just wanted to test. I follow the process and arrive to an error (Fail to translate local): enter image description here

Would really appreciate your input on this problem.

Thx everyone.


Solution

  • I just went through the setup and it worked.

    Steps I followed.

    1. install Translate Plugin https://market.strapi.io/plugins/strapi-plugin-translate
    2. Install DeepL provider https://www.npmjs.com/package/strapi-provider-translate-deepl
    3. Get my api key from DeepL site. https://www.deepl.com/
    4. Add the plugins.js code to use tralnsate plugin with deep l

    Here is my plugins.js code.

    module.exports = {
      // ...
      translate: {
        enabled: true,
        config: {
          // Choose one of the available providers
          provider: 'deepl',
          // Pass credentials and other options to the provider
          providerOptions: {
            // your API key - required and wil cause errors if not provided
            apiKey: 'ENTER_YOUR_API_KEY_HERE',
            // use custom api url - optional
            apiUrl: 'https://api-free.deepl.com',
            // use custom locale mapping (for example 'en' locale is deprecated so need to choose between 'EN-GB' and 'EN-US')
            localeMap: {
              // use uppercase here!
              EN: 'EN-US',
            },
            apiOptions: {
              // see <https://github.com/DeepLcom/deepl-node#text-translation-options> for supported options.
              // note that tagHandling Mode cannot be set this way. 
              // use with caution, as non-default values may break translation of markdown 
              formality: 'default',
              // ...
            }
          },
          // other options ...
        },
      },
      // ...
    }
    
    
    1. Create a new collection type 'blog' and enable it18n plugin. enter image description here

    2. Here is where I was able to use the plugin.

    enter image description here

    Here is the code to the test repo: https://github.com/paulnotfromstrapi/strapi-testing-translate-with-deep-l