Usage example for i18next-http-backend + react-scripts

[vmstarchenko]

Documentation issue

The saveMissing option looks really handy. It requires setting up an endpoint on the devserver side. Option The documentation for this library contains many examples of server configuration using various libraries. However, there is no description here for a common use case: react-scripts. As far as I can see, this is also not described in the github issues, the first tutorials in Google and on stackoverflow.

Motivation

It would be most convenient for beginners to be able to configure this library using react-scripts, because they (and me) don't know how it works and which one server library used under the hood.

[adrai]

Why react-scripts for i18next-http-middleware? A module used only on server side? Overkill?

[vmstarchenko]

A simple example. I'm making a single page app built from a template using react-scripts. It does not have a full backend. The only backend that is present there is the default development backend (webpackDevServer). I suggest adding an example of how, in this case, people can add an endpoint to such a backend to save missing translations.

Perhaps I understand something wrong and this case has already been described. However, I did not find any understandable recommended way of how to save translations using the option (saveMissing), neither in the documentation for the i18next-http-middleware package nor in other i18next libraries. i18next-http-middleware library (imho) looks suitable for this functionality.

[adrai]

That's a bit out of scope of this module... But basically you need your own server that integrates i18next-http-middleware (like one of the examples, i.e. this one) and hook that up in your react setup via a proxy, like described here: https://medium.com/free-code-camp/how-to-make-create-react-app-work-with-a-node-backend-api-7c5c48acb1b0

[vmstarchenko]

In my case, I also have a server. It is a development server that is created automatically via react-scripts. It could potentially include a handle to save translations. The main question is how to do it with this or some other i18next library

[adrai]

https://github.com/i18next/i18next-http-middleware#add-routes https://github.com/i18next/i18next-http-middleware/blob/master/example/basic/index.js#L77

[vmstarchenko]

Yes, I have already read this documentation. I mean an example of using this middleware with yet another server library.

WebpackDevServer: https://webpack.js.org/configuration/dev-server/ https://github.com/webpack/webpack-dev-server https://www.npmjs.com/package/webpack-dev-server

This is a quite popular development server.

[adrai]

Like said, you need a way to define your custom routes. Like here: https://webpack.js.org/configuration/dev-server/#devserveronaftersetupmiddleware

Something like this:

const i18next = require('i18next')
const Backend = require('i18next-fs-backend')
const i18nextMiddleware = require('i18next-http-middleware')

i18next
  .use(Backend)
  .use(i18nextMiddleware.LanguageDetector)
  .init({
    backend: {
      loadPath: __dirname + '/locales/{{lng}}/{{ns}}.json',
      addPath: __dirname + '/locales/{{lng}}/{{ns}}.missing.json'
    },
    fallbackLng: 'en',
    load: 'languageOnly',
    saveMissing: true
  })

module.exports = {
  //...
  devServer: {
    onAfterSetupMiddleware: function (devServer) {
      if (!devServer) {
        throw new Error('webpack-dev-server is not defined');
      }

      devServer.app.get('/locales/:lng/:ns', i18nextMiddleware.getResourcesHandler(i18next))
      // loadPath for client: http://localhost:8080/locales/{{lng}}/{{ns}}

      devServer.app.post('/locales/add/:lng/:ns', i18nextMiddleware.missingKeyHandler(i18next))
      // addPath for client: http://localhost:8080/locales/add/{{lng}}/{{ns}}
    },
  },
};

[vmstarchenko]

I'll try it. Thanks.

[adrai]

fyi: https://github.com/i18next/react-i18next/tree/master/example/devserver-save-missing