I have a create react app, and I have two requirements that I am trying to achieve:

1 Language management for index.html:

• When a user visits my-app/any/subpath?lng=en or my-app/any/subpath they should be served index_en.html which links to bundle.js
• When a user visits my-app/any/subpath?lng=de they should be served index_de.html linking to the same bundle bundle.js
• This requirement is pretty easy. I can solve it by serving my frontend with something like NGINX and selecting the html document by the query string lng. However, the hard part is getting this functionality in my local React development environment, which is my second requirement below:

2 I want to achieve this in my local dev environment, preferrably keeping Webpack Dev Server, so that I don't loose the benefits of hot reloading and automatic rebuilding on react code changes.

What I have done so far:

It seems that Create React App does not support this by default, so I have ejected through npm run eject. I build index_en.html and index_de.html from a base html document as a part of npm run start/build commands. To build several html documents, I had to modify the webpack.config.js as so:

const languages = ["en", "de"]
...
module.exports = function(webpackEnv){
   ...
   return {
      plugins: [
         ...otherPlugins,
         ...languages.map(lng=> new HtmlWebpackPlugin({
             inject: true,
             template: path.resolve(appDirectory, `public/index_${lng}.html`),
             filename: `index_${lng}.html`,
             ...(isEnvProduction ? productionConfig : {}),
          }))
      ]

   }
}

This produces index_en.html and index_de.html the way I want, both linking to bundle.js.

Now the issue is that if I run npm run start, they are both served at the same path, so the Webpack Dev Server doesn't know which one to serve. I want to select between them based on a query parameter ?lng=de. Is this even possible with the webpack dev server? And what are my options?

I have also tried putting the localized index.html's into separate folders per language. E.g. public/de/index.html, but if I access myapp/de/some/subpath I will still be served the root index.html (english).