How to add simple internationalization with i18next for a browser application
Tags: javascript, i18n
Published: 2021-08-24 12:42:47

In this article, we will take the [node example](https://how-to.dev/how-to-start-with-i18next-in-the-node-application) 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`:
```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:
```HTML
<!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:
```shell
$ 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`:
```JSON
{
  ...
  "scripts": {
     "build": "webpack --mode=none"
...
```
We can run the build with:
```shell
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bw3gtttaque2kryw5873.png)

# Links
* [repository](https://github.com/how-to-js/i18next-vanilla)
* [branch](https://github.com/how-to-js/i18next-vanilla/tree/browser-start)

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

%%[i18next]