# How to add simple internationalization with i18next for a browser application
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
i18next vanilla
```
# 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:
# 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]