Vite app that uses i18next for translation, to write translation keys to files?

152 Views Asked by At

I have gotten to the point where there are post requests happening to the backend, but there is nothing listening because vite doesn't have a backend that listens. I am at an loss.

Stuff that I need to get translated is coming from an API, on component load in the app, so I can't just parse files that I've written.

// i18n.ts
import i18n from 'i18next';
import HttpBackend from 'i18next-http-backend'
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import enTranslations from './locales/en/translation.json';
import etTranslations from './locales/et/translation.json';
import ruTranslations from './locales/ru/translation.json';

i18n
  .use(LanguageDetector)
  .use(initReactI18next)
  .use(HttpBackend)
  .init({
    fallbackLng: 'en',
    debug: true,
    keySeparator: false,
    nsSeparator: false,
    saveMissing: true, // this is important
    saveMissingTo: 'all',
    interpolation: {
      escapeValue: false,
    },
    resources: {
      en: {
        translation: enTranslations,
      },
      et: {
        translation: etTranslations,
      },
      ru: {
        translation: ruTranslations,
      },
    },
  });

export default i18n;
// App.tsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import "./i18n.ts"
import './index.scss'
import App from './App.tsx'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

result:

Request URL:
http://localhost:5173/locales/add/en/translation
Request Method:
POST
Status Code:
404 Not Found
Remote Address:
127.0.0.1:5173
Referrer Policy:
strict-origin-when-cross-origin

I have no idea where to move on, I do not want to use anything I can't run locally, just wish to add missing keys to translations.

0

There are 0 best solutions below