Express, Ejs and i18next how to switch between languages? - express

Question

I have been trying to figure out how to make the switcher or language selector work from the frontend part of the website. Also my first time working with SSR, so I am not sure about the communication in between. So far what I handled and works well, the inclusion for the translation rendering is working, also when i manually change the language for testing purpose.
I have been reading the documentation, but there is not specific tutorial about how to handle this, more than the function "changeLanguage" and some solutions I found are older as 5 years and involves, deprecated version and some kind of extra library to handled some template views, and I don't know if if this actually is still feasible. However inside the repository from i18next-http-middleware, there is an example that basically does kind what I want. So can be found under the "basic-pug" folder. The difference is that it is used "Pug" as a template engine, which I don't think it should affect or make any difference. so I used exactly the same configuration as the example, which i downloaded and tested and it was working, so it supposed enabled a cookie, and then on the url can pass the cookie as a param, with the locale, and it supposed to work, however not working with in my project, and I also wondering if it possible to have "/de/" instead "/?lang=de", example www.myweb.com/de/about and not www.myweb.com/about/?lang=de, because that's not exactly what I was imagining, and also no clear how to handled when u have nested or several routes.
In general, I was wondering how to use the "changelanguage" function in the frontend side, so I have, for example, something like:
<div>
<div onclick="Changelanguage("de")"> Deutsch</div>
<div onclick="Changelanguage("en")"> English</div>
</div>
Because by declaring the function just like in the views, on a script tag, I the changelanguage is not a function, because there is no communication between both.
Please find below my configuration:
Json file:
{
"name": "project",
"version": "0.0.0",
"private": true,
"author": "project",
"main": "dist/index.js",
"scripts": {
"start": "node dist/index.js",
"dev": "nodemon src/index.js --exec \"node -r dotenv/config -r #babel/register\"",
"clean": "rimraf dist",
"build": "npm run clean && mkdir -p dist && babel src -s -D -d dist",
"postinstall": "npm run build"
},
"dependencies": {
"#babel/cli": "^7.18.9",
"#babel/core": "^7.18.9",
"#babel/plugin-proposal-class-properties": "^7.18.6",
"#babel/plugin-proposal-object-rest-spread": "^7.18.9",
"#babel/preset-env": "^7.18.9",
"body-parser": "^1.19.0",
"ejs": "^3.1.8",
"express": "^4.18.1",
"graphql": "^16.5.0",
"graphql-request": "^4.3.0",
"i18next": "^21.9.1",
"i18next-fs-backend": "^1.1.5",
"i18next-http-middleware": "^3.2.1",
"locomotive-scroll": "^4.1.4",
"morgan": "^1.10.0",
"node-sass-middleware": "^1.0.1",
"rimraf": "^3.0.0"
},
"devDependencies": {
"#babel/register": "^7.18.9",
"dotenv": "^16.0.1",
"nodemon": "^2.0.19"
},
"babel": {
"presets": [
[
"#babel/preset-env",
{
"targets": {
"node": "current"
}
}
]
],
"plugins": [
"#babel/plugin-proposal-class-properties",
"#babel/plugin-proposal-object-rest-spread"
]
}
}
My routes file js
import { GraphQLClient
} from "graphql-request";
import { Router
} from "express";
import * as queries from "./queries";
import i18next from "i18next";
const routes = Router();
export function request({ query, variables, preview, includeDrafts
}) {
// ...some headers and client configs
};
return client.request(query, variables);
}
let generalInfo = null;
const getData = async (options) => {
options.page = options.page ? options.page : "";
if (!generalInfo) {
generalInfo = await request({
query: queries.getGeneralInfo,
variables: {
locale: options.lang
}
});
}
let q = queries.getPage(options.page);
let data = await request({
query: q,
variables: {
locale: options.lang
}
});
data = Object.assign(data, generalInfo);
return data;
};
const getCase = async (slug, lang) => {
if (!generalInfo) {
generalInfo = await request({
query: queries.getGeneralInfo,
variables: {
locale: lang
}
});
}
slug = slug ? slug : "";
let q = queries.getCase;
let data = await request({
query: q,
variables: {
locale: lang
}
});
data = Object.assign(data, generalInfo);
const filter = data.allCases.filter((n) => n.slug == slug)
return filter;
};
const getInnerPage = async (slug, lang) => {
if (!generalInfo) {
generalInfo = await request({
query: queries.getGeneralInfo,
variables: {
locale: lang
}
});
}
slug = slug ? slug : "";
let q = queries.getInner;
let data = await request({
query: q,
variables: {
locale: lang
}
});
data = Object.assign(data, generalInfo);
const filter = data.allPages.filter((n) => n.slug == slug);
return filter;
};
routes.get("/cases/:slug", (req, res) => {
let slug = req.params.slug;
getCase(slug, req.locale).then(filter => {
if (filter.length) {
res.render("case",
{ title: filter.project_title, filter, t: i18next.t
});
} else {
res.render("404");
}
}).catch(e => {
console.error(e);
});
});
routes.get("/page/:slug", (req, res) => {
let slug = req.params.slug;
getInnerPage(slug, req.locale).then(filter => {
if (filter.length) {
res.render("page",
{ title: filter[
0
].titlePage, filter, t: i18next.t
});
} else {
res.render("404");
}
}).catch(e => {
console.error(e);
});
});
routes.get("/", (req, res) => {
let options = { 'lang': req.locale, 'page': ""
}
//console.log(req.locale + " locale selected");
getData(options).then(data => {
res.render("home",
{ title: "Home", data, t: i18next.t
});
}).catch(e => {
console.error(e);
});
});
export default routes;
My index js
import express from "express";
import path from "path";
import logger from "morgan";
import bodyParser from "body-parser";
import routes from "./routes";
import sassMiddleware from "node-sass-middleware";
import i18next from "i18next";
import i18nextBackend from "i18next-fs-backend";
import i18nextMiddleware from "i18next-http-middleware";
const { PORT = 5050 } = process.env;
const app = express();
i18next.use(i18nextBackend)
.use(i18nextMiddleware.LanguageDetector)
.init({
//lng: 'de',
debug: true,
fallbackLng: 'en',
preload: ['de', 'en'],
backend: {
loadPath: './locales/{{lng}}/translation.json'
},
detection: {
order: ['querystring', 'cookie'],
caches: ['cookie'],
lookupQuerystring: 'lang',
lookupCookie: 'lang',
ignoreCase: true,
cookieSecure: false
},
})
app.use(i18nextMiddleware.handle(i18next));
//i18next.changeLanguage('de');
app.set("views", path.join(__dirname, "../views"));
app.set("view engine", "ejs");
app.use(logger("dev"));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.locals = { config: { whatever: 'this is' } };
app.use(
sassMiddleware({
src: path.join(__dirname, "../public/scss"),
dest: path.join(__dirname, "../public"),
indentedSyntax: false,
sourceMap: false
})
);
app.use(express.static(path.join(__dirname, "../public")));
app.use("/", routes);
app.use(function (req, res) {
res.status(404).render('404.ejs');
});
app.use(function (req, res) {
res.status(500).render('500.ejs');
});
app.listen(PORT, () => {
console.log(`Listening on port ${PORT}`);
});
export default app;
Thank you in advance for any help, I think I am mainly struggling because I use to work on client side, but still learning about SSR.

Answer 1

You should be able to define the language also in the route, like described here: https://github.com/i18next/i18next-http-middleware#language-detection
Define the 'path' in the detection options: order: ['path', /*'session', */ 'querystring', 'cookie', 'header'],
Regarding the language change. You probably just need to navigate to the route with the appropriate language.