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:

Summary

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

How to add simple internationalization with i18next for a browser application

Comments

i18next tutorial

How to use basic translation features in i18next

More from this blog

Changes in programming made possible with AI

Advantages of unit testing—with examples in Jasmine

Pure functions and basic tests in Jasmine

How to prepare for a job interview

How to build a demo project

Code

HTML

Dependencies

Build script

Working code

Links

Summary

Command Palette

Comments

i18next tutorial

How to use basic translation features in i18next

More from this blog

Code

HTML

Dependencies

Build script

Working code

Links

Summary