DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 968,547 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Tobias Rydberg
Tobias Rydberg

Posted on

Localization (l10n) with type safety tutorial

Most software projects start out in English since the majority of terms in software development are in English. The problem is that it is unlikely that every user will be comfortable with your app when it isn’t in a language that they use on a daily basis. This is where internationalization (i18n) and localization (l10) comes in.

The act of localizing an app is a common problem because of the dynamic nature, which stops tools like Google Translate from working. Therefore a large wealth of internationalization tools exists solves the problem in various ways, but in this tutorial I am going to showcase inlang which is a way to ensure type safety in your translations so you never miss a translation again.

If you would rather just give it a try without committing to a full project, give our interactive example a try in our GitHub repo.

For this tutorial I will go through how to install typesafe-i18n in a React JS project and connect to inlang, but similar methods can be found in documentations for any other JS framework. Once it has all been set up, it will be as seamless as just a few presses, just see it in action below!

Alt text

Initialization

The first step consists of initializing the project with the necessary config files and optional vscode extension. This is done by installing the npm packages inlang and concurrently:

npm i --save-dev @inlang/typesafe-i18n-importer
npm i concurrently
Enter fullscreen mode Exit fullscreen mode

Afterwards two config files should be created in the root directory, one for typesafe-i18n and one for inlang:

.typesafe-i18n.json

{
  "$schema": "https://unpkg.com/typesafe-i18n@2.40.1/schema/typesafe-i18n.json",
  "adapter": "react"
}
Enter fullscreen mode Exit fullscreen mode

package.json

{
"scripts": {
   "start": "npx concurrently --kill-others 'react-scripts start' 'npx typesafe-i18n' 'npx @inlang/typesafe-i18n-importer'",
 },
}
Enter fullscreen mode Exit fullscreen mode

Lastly an optional step if using Visual Studio Code is to use the inlang extension which allows key generation directly in the code, automatically creating the key, putting in the base translation and changing your source code to be using the correct key.

ext install inlang.vscode-extension
Enter fullscreen mode Exit fullscreen mode

Next up is initializing internationalization by wrapping your app in like below:

_app.tsx

{
ReactDOM.render(
  <React.StrictMode>
    <TypesafeI18n initialLocale="en">
      <App />
    </TypesafeI18n>
  </React.StrictMode>,
  document.getElementById("root")
);
}
Enter fullscreen mode Exit fullscreen mode

That was it, we can boot it up by running npm start and everything else should be handled automatically! The typesafe-i18n package will start setting up the whole type safety environment, so keys can be validated while developing and all the base translations will be visible.

Coding flow

When using the Visual Studio Code extension, the only required steps to make new keys is simply to select the full text you want to translate, right click and send the inlang. This will handle everything, and you can continue your work, translations can be handled whenever you have time, or by someone else!

If using a different editor or IDE, do not worry, an extension for you is on the way. For now though, we would recommend everyone to use the extension as it is speeds up the process tremendously. In case you do want to stick with another editor, the process consists of creating the keys on the dashboard, which will automatically sync to the source code. Afterwards the key can be added like below:

function HelloWorld(props) {
    const { LL } = useContext(I18nContext)

    return LL.helloWorld()
}
Enter fullscreen mode Exit fullscreen mode

Lastly, it is probably useful to be able to change the language. This is very simple and just means running setLocale() like below:

<button onClick={() => setLocale('de')}>Deutsch</button>
Enter fullscreen mode Exit fullscreen mode

That was it, now you’re ready to localize your whole app doing nothing more as a developer! Head on over to the online platform at http://www.app.inlang.dev to write your translations, or let your non-technical teammates be in charge of all that. There will be an article for non-technical teammates on how to use the dashboard soon!

Feel free to star inlang's GitHub Repository, it helps us out a lot!

Top comments (0)

This post blew up on DEV in 2020:

js visualized

πŸš€βš™οΈ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! πŸ₯³

Happy coding!