How to dev

How to dev

How to add simple internationalization with i18next for a browser application

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:

hello-world-console.png

Links

Summary

In this article, we have seen minimal setup needed to start with i18next on the browser side.

Interested in reading more such articles from Marcin Wosinek?

Support the author by donating an amount of your choice.

 
Share this
Proudly part of