New 🎉 Next.js 13 & Subscriptions. Learn more →

Add localazy to translate your app in minutes

Add localazy to translate your app in minutes

#Internationalization #Localazy

Jonathan Wilke

Written by

Jonathan Wilke

Published on

2022-09-01

Localazy is an internationalization tool with powerful features like auto-translate that enable you to translate your app in minutes. In this tutorial, we'll show you how to integrate localazy with your supastarter app.

1. Setup localazy project

Before you get started, make sure you have a localazy account. If you don't have one yet, you can create one for free.

After signing in, you'll be redirected to the dashboard. Now create a new project for your app. You can name it whatever you want.

Then navigate to Project settings > Access keys and copy both the writeKey and the readKey. You'll need them in the next step.

2. Configure localazy in your app

First install the localazy CLI in your project as a dev dependency:

npm install @localazy/cli

Next, create a new file called localazy.json in the root of your project and add the following content:

{
  "writeKey": "<your-write-key>",
  "readKey": "<your-read-key>",
  "upload": {
    "type": "json",
    "files": "public/locales/en/*.json"
  },
  "download": {
    "files": "public/locales/${lang}/${file}"
  }
}

In case you changed your define locale to something other then en, you'll need to update the upload.files setting accordingly.

Open the package.json file and add the following to the scripts section:

{
  "scripts": {
    "i18n:upload": "localazy upload",
    "i18n:download": "localazy download"
  }
}

3. Translate your app

Now you are ready already able to sync your app with localazy. To upload the locales, run:

npm run i18n:upload

In your localazy dashboard you can now add the languages you want to translate your app to:

Localazy dashboardLocalazy dashboard

After adding the languages, you can start translating your app manually or automatically:

Localazy translation flowLocalazy translation flow

When you are done translating, you can download the locales by simply running the following command in your project:

npm run i18n:download

You should see the locales in the public/locales/{lang} folders.

That's it! Your app is now ready to be translated to every language you want.

supastarter

Get your SaaS started in minutes

Save time and focus on your business with supastarter, the scalable and production-ready boilerplate for your SaaS.

Get started →
supastartersupastarter

© 2022 supastarter. All rights reserved.

Product

  • Demo
  • Pricing
  • FAQ
  • Documentation
  • Changelog
  • Roadmap
  • Starter templates