How can I make my Ode application available in many languages?

Question

Hello, I have a Ode application that uses express and handlebars, I would like to make it available in 3 different languages (Portuguese, Spanish and English).

I managed to do this by creating a different file for each language, but it ended up getting very messy, and I’m not sure if this is the right way.

    const renderLang = ['en', 'pt', 'es']
    const renderTitle = ['What is my IP?', 'Qual é o meu IP?', '¿Cual es mi IP?']

router.get('/lookup', function(req, res) {
    let getSubDomain = req.headers.host.split(`.`)
    let renderSelectLang = verifyLang(getSubDomain[0])

    res.render(renderSelectLang[0] + '/lookup', {lang: renderSelectLang[0], title: renderSelectLang[1]})
})

function verifyLang(subDomain) {
    let renderSelectLang = [renderLang[0], renderTitle[0]]

    if(subDomain == 'pt') {
        renderSelectLang = [renderLang[1], renderTitle[1]]
    } else if(subDomain == 'es') {
        renderSelectLang = [renderLang[2], renderTitle[2]]
    }

    return renderSelectLang
}

And I’m also using sub-domains, one for each language 'pt' and 'es' and the default route is in English.

I need some more efficient way to define languages but I don’t know how to do it.

I thought of creating an external file such as a JSON and storing the messages but I don’t know if this is correct and also don’t know how it can be done.

Answer 1

One of the ways to do this would be to use a package called i18n. You can install and integrate it into your Express. It will create a folder called "locales" in your project, and inside you will have a Json file with the language code name. Inside it, you will have a file with the key/value format, that is, the keys will be the same for all languages, changing only the value according to the language.

All the content of your pages will be variable, which you will replace according to language.

The routes would be unique to any language.

The language it will pick up from the browser you are accessing (this can be configured).

Here is a small example:

Express:

var express = require('express'),
var I18n = require('i18n-2');
 
// Express 
app.configure(function() {
    // ...
 
    // Anexar propriedade i18n property para o objeto request
    // Vincular helpers para todos os templates
    I18n.expressBind(app, {
        // Configurar idiomas, em caso de idioma nao localizado o padrão é "en"
        locales: ['en', 'de']
    }));
 
    // Restante configuração express
    app.use(app.router);
    app.use(express.static(__dirname + '/public'));
});

Controller:

module.exports = {
    index: function(req, res) {
        req.render("index", {
            title: req.i18n.__("My Site Title"),
            desc: req.i18n.__("My Site Description")
        });
    }
};

View:

{% extends "page.swig" %}
{% block content %}
<h1>{{ __("Welcome to: %s", title) }}</h1>
<p>{{ desc }}</p>
{% endblock %}

I recommend you follow the documentation:

https://github.com/mashpie/i18n-node