Multi-language website with frontity

Hi! :wink:

Is there any way to develop a multi-language website with frontity? I imagine that we can do it installing a wordpress plugin for translation but if I have custom pages I will need the translation in my frontity/react application too.

How can I do it? It’s possible? I dont know if is possible to pass a parameter to the frontity state and filter my posts/pages passing the selected language.

Best regards

Hey @christian.nascimento, welcome to the community :relaxed:

It depends on each case, but you can do whatever you want. In Frontity, you can work with different sites within the same project, and you could use it for this case. You may want to take a look at our documentation and this topic, where we explained a bit better how to configure it.

You could use a match for letting Frontity know if you are in one language or another. For example, if you are working with different urls like /en/my-post/ and /es/my-post, you could create two different sites and pass a parameter to the frontity state as you say to identify the language.

Let’s see a quick example. At your frontity.settings.js:

const settings = 
[
  //FIRST LANGUAGE
  {
    "name": "mysite-en",
    "match": [".*mysite.com\/en(\/.*)?$"], 
    //You can use any regex to match your case
    "state": {
      "frontity": {...},
      "theme":{
        "lang": "en"
      }
    },
    "packages": [...]
  },
  //SECOND LANGUAGE
  {
    "name": "mysite-es",
    "match": [".*mysite.com\/es(\/.*)?$"], 
    //You can use any regex to match your case
    "state": {
      "frontity": {...},
      "theme":{
        "lang": "es"
      }
    },
    "packages": [...]
  }
];

export default settings;

You could use the same packages for both sites, and you’ll have available state.theme.lang to know which language you should us. You could use it in your React theme to do whatever you want. For example:

if(state.theme.lang === en) { "Hello" }

If this is not your case, please give us a more detailed explanation and we’ll be glad to guide you. Hope it helps :relaxed:

Thanks very much @SantosGuillamot!

I’ve made a test with just one theme using react i18next and filtering the posts according the language I selected. Works fine but your solution is better :smiley:

Regards

1 Like

I’m glad it worked :relaxed: We’d love to know more about what you are building with Frontity, looking forward to seeing it!

Hello! I’m facing the same problem here.

I’m trying to make a test site (testing up frontity :stuck_out_tongue: ) and I want to add multilanguage. I’m using WPML plugin and I setted up /es/ for spanish and /en/ for english.

The problem is the homepage is resolving a 404. Posts and other pages are showing correctly. Also my localhost domain without the /es or /en is giving an error:

Internal Server Error
TypeError: Cannot read property 'split' of undefined at __webpack_exports__.default (webpack-internal:///./node_modules/@frontity/wp-source/src/libraries/handlers/utils/capitalize.ts:2:73) at Object.eval (webpack-internal:///./node_modules/@frontity/wp-source/src/libraries/handlers/postType.ts:10:205) at runMicrotasks (<anonymous>) at processTicksAndRejections (internal/process/task_queues.js:97:5) at eval (webpack-internal:///./node_modules/@frontity/wp-source/src/actions.ts:18:101)

Here is my frontify.settings.js
const settings = [

      "name": "Spanish-es",
      "match": [".*localhost:3000\/es(\/.*)?$"],
      "state": {
        "frontity": {
          "url": "",
          "title": "Test Frontity Blog",
          "description": "WordPress installation for Frontity development"
        }
      },
      "packages": [
        {
          "name": "@frontity/mars-theme",
          "state": {
            "lang": "es",
            "theme": {
              "menu": [
                [
                  "Home",
                  "/es/"
                ],
                [
                  "Sobre nosotros",
                  "/es/sobre-nosotros/"
                ],
                [
                  "Blog",
                  "/es/blog/"
                ],
                [
                  "English",
                  "/en/"
                ]
              ],
              "featured": {
                "showOnList": false,
                "showOnPost": false
              }
            }
          }
        },
        {
          "name": "@frontity/wp-source",
          "state": {
            "source": {
              "api": "",
              "homepage": "/es/inicio",
              "postsPage": "/es/blog",
              "params": {
                "lang": "es",
              }
            }
          }
        },
        "@frontity/tiny-router",
        "@frontity/html2react"
      ]
    },
    {
      "name": "English",
      "match": [".*localhost:3000\/en(\/.*)?$"],
      "state": {
        "frontity": {
          "url": "",
          "title": "Test Frontity Blog",
          "description": "WordPress installation for Frontity development"
        }
      },
      "packages": [
        {
          "name": "@frontity/mars-theme",
          "state": {
            "lang": "en",
            "theme": {
              "menu": [
                [
                  "Home",
                  "/en"
                ],
                [
                  "About us",
                  "/en/about-us/"
                ],
                [
                  "Blog",
                  "/en/blog/"
                ],
                [
                  "Spanish",
                  "/es/"
                ]
              ],
              "featured": {
                "showOnList": false,
                "showOnPost": false
              }
            }
          }
        },
        {
          "name": "@frontity/wp-source",
          "state": {
            "source": {
              "api": "",
              "homepage": "/en/homepage",
              "postsPage": "/en/blog",
              "params": {
                "lang": "en",
              }
            }
          }
        },
        "@frontity/tiny-router",
        "@frontity/html2react"
      ]
    }
    ]

export default settings;

Any idea how to make homepage visible and the path “/” redirecting to /es or /en?

Can’t find the way of making this work :confused:

Hi @Edgar

In frontity.settings.js check that the state.source.homepage value is identical to the slug (not the title) of the page that you have defined as the homepage in your WordPress admin under Settings -> Reading.

      "name": "@frontity/wp-source",
      "state": {
        "source": {
          "api": "http://example.com/wp-json",
          "homepage": "home", // <- "home" should be replaced with the slug of the homepage
          "postsPage": "blog"
        }
      }
    },```

Hope this helps.