CODEWITHSUNDEEP
javascriptnode.jsexpressinternationalizationi18next
ravi_javi
ravi_javi

Reputation: 55

How to take user input and change language with i18next-express-middleware?

I am new to node.js and I want to internationalize my application. I have started off with the template from i18next-express-middleware github along with i18next website. I want the user to click the button and have the server fetch the .json file and serve the translation back to the user. Below is my code:

HTML

<script src="https://unpkg.com/i18next/i18next.js"></script>
<div style="height: 100px">
  <button onclick="i18next.changeLanguage('en')">
  english
  </button>
  <button onclick="i18next.changeLanguage('de')">
  german
  </button>
  <div id="output" />
 </div>

Node.js/Express

const express = require('express');
const i18next = require('i18next');
const i18nextMiddleware = require('i18next-express-middleware');
const Backend = require('i18next-node-fs-backend');

const app = express();
const port = process.env.PORT || 8080;

i18next
  .use(Backend)
  //.use(i18nextMiddleware.LanguageDetector)
  .init({
backend: {
   loadPath: '/translate/i18next-express-middleware-master/examples/basic/locales/{{lng}}/{{ns}}.json',
   addPath: '/translate/i18next-express-middleware-master/examples/basic/locales/{{lng}}/{{ns}}.missing.json'
},
fallbackLng: 'en',
preload: ['en', 'de'],
saveMissing: true
});
app.use(i18nextMiddleware.handle(i18next));

app.get('/', (req, res) => {
  res.send(req.t('home.title'));
});

app.listen(port, (err) => {
  console.log(`Server is listening on port ${port}`);
});

I have looked for documentation on how to communicate with the client's choice for language, but I simply have no idea how you go about it. Am I missing a key component? In the docs, they talk about how to set the language, but never how to use user input and have their choice reflected in the HTML that the user receives. Any guidance would be appreciated.

P.S. I am not married to the i18next express, so if you are aware of a much better method to serve translation to the client via backend, feel free to suggest it/provide proof of concept.

Upvotes: 1

Views: 2420

Answers (1)

jamuhl
jamuhl

Reputation: 4498

using express i expect you to want the translation happening on the serverside. So you need to trigger the change language on the serverside. For that you can use the language detector coming with the i18next-express-middleware: https://github.com/i18next/i18next-express-middleware#language-detection

on client just do a location change setting the language:

<button onclick="function() { window.location = '/?lng=de'; }">

this will reload the page setting lng to de - server will detect that lng and render your template in correct language (using the t helper in your templates).

if you like doing all the translations on clientside just follow the samples on i18next (if doing clientside translations i highly recommend using one of the framework integrations and not doing all the heavy lifting manually by setting innerHTML -> https://www.i18next.com/supported-frameworks.html).

Upvotes: 1

Related Questions