The remix-i18n demo

A Remix application demonstrating path-based localization on both the client and the server.

• Remix Docs

Development

From your terminal:

npm run dev

This starts your app in development mode, rebuilding assets on file changes.

Build for deployment

First, build your app for production:

npm run build

Then run the app in production mode:

npm start

Build container image

The easiest way to build a container image is to use the following commands:

podman build . --file containerfile --tag remix-i18n             \
    --build-arg BUILD_DATE="$(date -u +%Y-%m-%dT%H:%M:%SZ)"      \
    --build-arg BUILD_ID="0000"                                  \
    --build-arg BUILD_REVISION="$(git rev-parse --short=8 HEAD)" \
    --build-arg BUILD_VERSION="0.0.0"
podman inspect remix-i18n
podman run --init --interactive --tty --rm --publish 3000:3000 --name remix-i18n remix-i18n

If you use Docker, consider switching to Podman. If Podman is too cool for you, then you can always just replace podman with docker in the above commands.

Tips and tricks

• Loading namespaces: you need to tell i18next which i18n translation files to load in the browser. This is handled by using (abusing?) Remix route handlers. Specify all i18n namespaces by exporting a handle object:

  export const handle = {
    i18nNamespaces: ['common'],
  } satisfies RouteHandle;

• Translating page metadata (ie: <title>): to translate page metadata, expose the translated string via a Remix loader:

  export const loader: LoaderFunction = async ({ request }) => {
    const language = getLang(request);
    const t = await getFixedT(request, handle.i18nNamespaces);
    return json({ pageTitle: t('application:page-title') });
  };
  
  export const meta: MetaFunction<typeof loader> = ({ data }) => {
    return [{ title: data.pageTitle }];
  }

Credits

Some of the code in this application is based on the work of Sergio Xalambrí and his remix-i18next project. Remix-i18next does not directly support path-based i18n, which is why it was not used directly.