# How i18n works?

*According to [w3c](https://www.w3.org/International/questions/qa-i18n)*:
> Internationalization is the design and development of a product, application or document content that enables easy localization for target audiences that vary in culture, region, or language.    
Internationalization is often written i18n, where 18 is the number of letters between i and n in the English word.

### Webpack
The starter use [`i18n-webpack-plugin`]() for Internationalization. It'd be better to read docs for this plugin before continue reading.
Application language can be specified using `process.env.APP_LANGUAGE` (env variable).
`APP_LANGUAGE` default value - `'en'`

### Development
In development starter ignores i18n:
```js
if (process.env.NODE_ENV === 'development') {
	// ignore i18n plugin in development
	definePluginArgs['i18n'] = str => {
		return str
	}
}
```

### i18n file
Take a look at `/i18n/index.js`.
Here we store object that contains translations, that can be accepted by `i18n-webpack-plugin`
```javascript
module.exports = {
	en: null,
	ru: {
		'RSUIS on @Github': 'Привет, буду рад фидбеку :)'
	}
}
```


### Production

By default, you can bundle only one language.
```js
// ...
// `/i18n/index.js` file
const languages = config.i18n
const languageName = process.env.APP_LANGUAGE || 'en'
// ...
new I18nPlugin(languages[languageName], {functionName: 'i18n'}),
// ...
```

#### Build multiple languages

If you want to build more than one language using one command:   
**CAUTION**: It's a *pseudocode* for this feature. Don't paste it!
```js
const builds = Object.keys(languages).map(language => {
  // base - base webpack config without i18n-webpack-plugin and html-webpack-plugin
	let baseConfigForLang = _.cloneDeep(base)
  // set new output path
	baseConfigForLang.output.path = path.join(
		baseConfigForLang.output.path,
		language
	)
  // add html-webpack-plugin and i18n-webpack-plugin
	baseConfigForLang.plugins.push(
		new I18nPlugin(languages[language], {functionName: 'i18n'}),
		new HtmlWebpackPlugin({
			title: config.title,
			language,
			template: path.resolve(config.srcCommonPath, 'index.ejs'),
			filename: path.resolve(baseConfigForLang.output.path, 'index.html'),
			chunksSortMode: 'dependency'
		})
	)
	return baseConfigForLang
})
// return multiple webpack configs
module.exports = builds
```


### I18n in components
Just wrap your string in `i18n` function.
```javascript
<Popup
  // If APP_LANGUAGE equals 'ru'
  // This function returns => ''Привет, буду рад фидбеку :)''
  content={`${i18n('RSUIS on @Github')}`}
  inverted
/>
```