How to add simple internationalization with i18next for a browser application
Published
•2 min readM
I'm JS developer with 13 years of professional experience. I'm always happy to teach my craft.
In this article, we will take the node example and put it to the browser-side.
Code
We will use the same code as in the previews article, but this time it will be in src/index.js:
import i18next from "i18next";
i18next
.init({
lng: "en",
resources: {
en: {
translation: {
hello_world: "hello world",
},
},
},
})
.then((t) => {
console.log(t("hello_world"));
});
HTML
The index.html is set up to work with default webpack output:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>i18next vanilla</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<script defer="defer" src="dist/main.js"></script>
</head>
<body></body>
</html>
Dependencies
Besides the library itself, this time we will need webpack packages as well:
$ npm install --save-dev webpack webpack-cli
npm WARN i18next-vanilla@1.0.0 No description
npm WARN i18next-vanilla@1.0.0 No repository field.
+ webpack-cli@4.8.0
+ webpack@5.51.1
added 121 packages from 158 contributors and audited 124 packages in 6.758s
17 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
Build script
After adding to package.json:
{
...
"scripts": {
"build": "webpack --mode=none"
...
We can run the build with:
webpack --mode=none
asset main.js 91.8 KiB [compared for emit] (name: main)
runtime modules 670 bytes 3 modules
modules by path ./node_modules/@babel/runtime/helpers/esm/*.js 3.53 KiB
./node_modules/@babel/runtime/helpers/esm/typeof.js 433 bytes [built] [code generated]
./node_modules/@babel/runtime/helpers/esm/objectSpread.js 612 bytes [built] [code generated]
./node_modules/@babel/runtime/helpers/esm/classCallCheck.js 176 bytes [built] [code generated]
./node_modules/@babel/runtime/helpers/esm/createClass.js 579 bytes [built] [code generated]
./node_modules/@babel/runtime/helpers/esm/possibleConstructorReturn.js 436 bytes [built] [code generated]
./node_modules/@babel/runtime/helpers/esm/assertThisInitialized.js 192 bytes [built] [code generated]
./node_modules/@babel/runtime/helpers/esm/getPrototypeOf.js 230 bytes [built] [code generated]
./node_modules/@babel/runtime/helpers/esm/inherits.js 490 bytes [built] [code generated]
./node_modules/@babel/runtime/helpers/esm/defineProperty.js 269 bytes [built] [code generated]
./node_modules/@babel/runtime/helpers/esm/setPrototypeOf.js 200 bytes [built] [code generated]
./src/index.js 338 bytes [built] [code generated]
./node_modules/i18next/dist/esm/i18next.js 77.1 KiB [built] [code generated]
webpack 5.51.1 compiled successfully in 268 ms
Working code
Now, the demo application should work as expected:
Links
Summary
In this article, we have seen minimal setup needed to start with i18next on the browser side.
