How to generate paths statically and the content dynamically(serverside)?

[jiriToman]

Hi, I am a beginner and I am trying to create multilingual static site generated dynamically from handlebars template. I am trying to have static routes(SEO) and the HTML with translations generated on the server side.

To be 100% honest I tried to finish this myself, but I have failed multiple times (there must be something I am something missing)

I have index.js file that looks like this:

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

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

i18next
  .use(Backend)
  .use(i18nextMiddleware.LanguageDetector)
  .init({
    backend: {
      loadPath: __dirname + '/locales/{{lng}}/{{ns}}.json',
      addPath: __dirname + '/locales/{{lng}}/{{ns}}.missing.json'
    },
    fallbackLng: 'en',
    preload: ['en', 'de','cs'],
    saveMissing: true,
  }

  );
app.engine('hbs', expressHbs({extname:'hbs', defaultLayout:'main.hbs'}));
app.set('view engine', 'hbs')
app.use(i18nextMiddleware.handle(i18next));

app.get("/locales/resources.json", i18nextMiddleware.getResourcesHandler(i18next));

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

I have 2 problems with that :

• The language shows as a parameter (I am trying to have static routes like this '/' for en '/de' for de and so on..)
• the second issue is I am trying to have the language assigned to a specific route and to redirect the user if the preferred language is detected something along those lines lang redirect for en page using express only app.get('/', (req, res) => { var slang = req.acceptsLanguages('de', 'cs', 'en'); if (slang == 'en') { res.render('index'); } else if (slang == 'de') { res.redirect('/de'); } else if (slang == 'cs') { res.redirect('/cs'); } else { res.render('index'); }; });

I have tried to add the routes to the i18next middleware from the tutorial, but it never worked for me. I will appreciate any help, tips or link to the example/tutorial (If this is considered as spamming or this is not the place for these kind of questions I apologize in advance. ) Thank you.

[jamuhl]

1) https://github.com/i18next/i18next-express-middleware#add-localized-routes

2) use https://github.com/i18next/i18next-express-middleware#language-detection

[jiriToman]

Hi I have tried that to simply add localized routes before

const express = require('express');
const i18next = require('i18next');
const i18nextMiddleware = require('i18next-express-middleware');
const Backend = require('i18next-node-fs-backend');
const expressHbs = require('express-handlebars');
router = require("express").Router();

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

i18next
  .use(Backend)
  .use(i18nextMiddleware.LanguageDetector)
  .init({
    backend: {
      loadPath: __dirname + '/locales/{{lng}}/{{ns}}.json',
      addPath: __dirname + '/locales/{{lng}}/{{ns}}.missing.json'
    },
    fallbackLng: 'en',
    preload: ['en', 'de','cs'],
    saveMissing: true
  },
  function() {
    i18nextMiddleware.addRoute(
      i18next,
      "/:lng/key-to-translate",
      ["en", "de", "it"],
      router,
      "get",
           function (req, res) {
        res.render('index');
      }
    );
    app.use("/", router);
  }
  );

app.engine('hbs', expressHbs({extname:'hbs', defaultLayout:'main.hbs'}));
app.set('view engine', 'hbs')
app.use(i18nextMiddleware.handle(i18next));
app.get("/locales/resources.json", i18nextMiddleware.getResourcesHandler(i18next));

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

and the result is _Cannot GET /de

I am unable to figure out what am I doing wrong. What am I missing?

[jamuhl]

Use i18nextMiddleware.addRoute outside not inside the callback...before you start your server

[jiriToman]

Thank you very much, I am sorry for the delay. One more question is the middleware supporting https://www.i18next.com/translation-function/essentials#multiple-fallback-keys and https://www.i18next.com/translation-function/context#context?

[jamuhl]

yes...middleware just passes down the i18next instance (or a request bound clone of it)

[jamuhl]

closing due inactivity