CODEWITHSUNDEEP
node.jsexpressinternationalizationhandlebars.js
Paul
Paul

Reputation: 41

Using i18n with hbs and express

I am trying to properly use i18n with hbs, but haven't had any success.

Here is my server.js code:

var express =      require('express');
var server  =      express();
var hbs = require('hbs');
var i18n = require('i18n');
var cookieParser = require('cookie-parser');

i18n.configure({
  locales: ['en', 'fr'],
  cookie: 'locale',
  directory: __dirname + "/locales"
});

hbs.registerPartials(__dirname + '/views');
server.set('view engine', 'hbs');
server.engine('hbs', hbs.__express);

server.use(cookieParser());

server.use(i18n.init);

hbs.registerHelper('__', function () {
  return i18n.__.apply(this, arguments);
});
hbs.registerHelper('__n', function () {
  return i18n.__n.apply(this, arguments);
});

server.get('/', function(req, res) {  
  res.render('index');
});

And my HTML code :

<ul class="nav navbar-nav navbar-right">
       <li><a href="/">{{__ 'HOME'}}</a></li>
       <li><a href="team">{{__ 'TEAM'}}</a></li>
       <li><a href="#">{{__ 'SERVICES'}}</a></li>
       <li><a href="#">{{{__ 'LEL'}}}</a></li>
</ul>

And one of my Json files :

{
    "HOME": "HOME",
    "TEAM": "TEAM",
    "SERVICES": "SERVICES",
    "LEL": "CONTACT"
}

I can't see what I am doing wrong, if someone could help me bit it would be really helpful! Thank you!

Edit : It seems that my helpers are recognized, but i18n is not translating words..

Édit : Ok I changed my template engine and it worked !

Upvotes: 4

Views: 2329

Answers (1)

CompaCode
CompaCode

Reputation: 21

I did it like this

const express = require('express');
const path = require('path');
const handlebars =  require('handlebars');
const app = express();
const i18n = require('i18n');
// Language
i18n.configure({
 locales: ['es', 'en'],
 directory: path.join(__dirname, 'locales'),
 defaultLocale: 'es',
 queryParameter: 'lang',
});
    
app.engine('.hbs', exphbs({
 defaultLayout: 'index',
 layoutsDir: path.join(app.get('views'), 'layouts'),
 partialsDir: path.join(app.get('views'), 'partials'),
 extname: '.hbs',
 handlebars: allowInsecurePrototypeAccess(handlebars),
 helpers: {
  i18n: function(){
   return i18n.__.apply(this,arguments);
  },
  __n: function(){
   return i18n.__n.apply(this, arguments);
  },
 }
}));
app.set('view engine', 'hbs');
app.use(i18n.init);

and in any .hbs file

<h1>{{i18n 'Hello'}}<h1>

Upvotes: 1

Related Questions