Skip to content
I18Next HMR 🔥webpack plugin that allows to reload translation resources on client & server
JavaScript
Branch: master
Clone or download
Latest commit 665613a Dec 19, 2019

README.md

i18next-hmr

npm CircleCI

I18Next HMR 🔥webpack plugin that allows to reload translation resources on client & server

Requirements

  • Node.js v8 or above
  • Webpack 4.x

Installation

$ npm install --save-dev i18next-hmr 

Usage

Add the plugin to your webpack config (or nextjs).

// webpack.config.js 
const { I18NextHMRPlugin } = require('i18next-hmr/plugin');    

module.exports = {  
  ...
  plugins: [    
    new I18NextHMRPlugin({  
      localesDir: path.resolve(__dirname, 'static/locales'),    
    }) 
  ]
}; 
// i18next.config.js 
const i18next = require('i18next'); 
i18next.init(options, callback);    
if (process.env.NODE_ENV === 'development') {    
  const { applyClientHMR } = require('i18next-hmr/client');    
  applyClientHMR(i18next); 
}
// server.js 
const express = require('express');

const i18n = require('./i18n');

if (process.env.NODE_ENV === 'development') {
  const { applyServerHMR } = require('i18next-hmr/server');
  applyServerHMR(i18n);
}

const port = process.env.PORT || 3000;

(async () => {
  const server = express();
  server.get('*', (req, res) => handle(req, res));

  await server.listen(port);
  console.log(`> Ready on http://localhost:${port}`);
})();

Start the app with NODE_ENV=development

Server side

The lib will trigger i18n.reloadResources([lang], [ns]) on the server side with lang & namespace extracted from the translation filename that was changed.

Client side

The lib will invoke webpacks hmr to update client side, that will re-fetch (with cache killer) the updated translation json, and trigger i18n.changelanguage(lang) to trigger listeners (in React app it will update the UI).

Example

A working examples can be found in the examples folder.

nextjs with next-i18next

screenshot

You can’t perform that action at this time.