2 posts tagged with "webdev"

Managing translations in Laravel projects can become a tedious task, especially when working with multi-language applications. Manually updating language files, synchronizing translations between environments, and keeping track of new keys can drain valuable development time.

Enter Localang, a localization SaaS that automates and simplifies the entire translation process. With features like automatic machine translation, seamless synchronization of i18n files, and tight integration with your Laravel project, Localang helps you streamline the management of your project’s translations. In this article, we'll walk through how Localang can make localization for your Laravel project smoother and more efficient.

Why Choose Localang for Laravel Localization?​

Localang is designed to simplify translation management by:

• Providing an intuitive platform to manage translations across languages.
• Enabling automatic machine translations to speed up content localization.
• Offering powerful GitHub Actions integration for effortless synchronization between Localang and your codebase.

By automating key processes, Localang reduces manual work, improves collaboration, and ensures consistency in localization across all stages of your project.

Setting Up Localang with Laravel​

Let's dive into how to integrate Localang with your Laravel project. By leveraging GitHub Actions, you can automate the synchronization of translation files, ensuring that both your repository and Localang are always up to date.

1. Preparation: Get Your API Key​

Before setting up GitHub Actions, you’ll need to retrieve your Localang API key. You can find this key in your repository’s secrets by following these instructions.

2. Pulling Translations Automatically​

You can automate the process of downloading the latest translations from Localang into your Laravel project using the pull action. This action ensures that your repository is always up-to-date with the latest translations managed in Localang.

Here’s a step-by-step guide to set up the pull action:

• Create a GitHub workflow file (e.g., .github/workflows/pull-translations.yaml) with the following content:

name: Pull Translations from Localang

on:
  schedule:
    - cron:  '0 * * * *'  # Runs every hour, adjust as needed

jobs:
  pull-translations:
    runs-on: ubuntu-latest

    steps:
      - name: Check out the repository
        uses: actions/checkout@v3

      - name: Pull translations
        uses: localang/localang-i18n-laravel-pull-action@v0.0.1
        with:
           api-key: ${{ secrets.LOCALANG_API_KEY }}
           project-id: 25

      - name: Commit translations
        run: |
          git config --global user.name 'Localang'
          git config --global user.email 'localang@users.noreply.github.com'
          git commit -am "Automatic translation merge"
          git push

This setup schedules an automatic pull of translations from Localang every hour. If changes are detected, the translations are automatically committed and pushed to your repository.

3. Pushing Translations from Laravel to Localang​

If your Laravel project frequently introduces new translation keys, you can automate the process of pushing these keysets to Localang. This ensures that your Localang dashboard is always in sync with your repository, making it easier to manage translations for new features or changes.

To set up the push action:

• Create another workflow file (e.g., .github/workflows/push-translations.yaml):

name: Push Translations to Localang

on:
  push:
    branches:
      - master

jobs:
  push-translations:
    runs-on: ubuntu-latest

    steps:
      - name: Check out the repository
        uses: actions/checkout@v3
        with:
          fetch-depth: 0

      - name: Push translations
        uses: localang/localang-i18n-laravel-push-action@v0.0.1
        with:
           api-key: ${{ secrets.LOCALANG_API_KEY }}
           project-id: 25

This workflow is triggered whenever changes are pushed to the master branch, ensuring that your Localang dashboard is always up-to-date with the latest translation keys.

Best Practices for Localang Integration​

To get the most out of Localang with Laravel, consider these best practices:

• Automate translation updates: Use both pull and push actions to synchronize translations regularly and avoid manually editing translation files.
• Use ESLint plugin: For JavaScript projects within Laravel (or any JavaScript-based functionality), the ESLint plugin can help you manage and generate i18n files automatically.
• Monitor workflow results: Check the status of your GitHub Actions workflows to ensure that translations are being synchronized properly, and review any issues quickly.

Conclusion​

Localang is a powerful tool for Laravel projects that deal with multiple languages. By automating translation pulls and pushes through GitHub Actions, Localang helps you focus more on building features and less on localization maintenance. Whether you're managing translations for a small site or a complex multi-language app, Localang has the tools you need to keep your translations up-to-date, accurate, and consistent.

Ready to streamline your localization process? Get started with Localang for Laravel today!

Localization is essential yet often cumbersome in modern web development. Managing translation files, ensuring consistency, and integrating updates can become overwhelming, especially in large codebases. Traditional i18n libraries require developers to handle these complexities manually, leading to inefficiencies and potential errors.

The Problem with Existing i18n Libraries​

Many existing i18n libraries require developers to:

• Manually create and manage JSON files: developers have to create and update JSON files for translations, which can be error-prone and time-consuming.
• Store all translations in one file: this can make it difficult to manage translations for large applications, resulting in bloated files that are hard to navigate.
• Use arbitrary keys: simple keys that don’t correspond to actual text make it harder to search for specific translations in the codebase.

These challenges add overhead and complexity, making localization a dreaded task.

How We're Handling It​

We created a localang-i18n-js and an eco-system around it that addresses these pain points with features designed to make localization straightforward and hassle-free:

Automatic Translation File Generation​

Using an integrated ESLint plugin, localang-i18n-js automatically generates translation files based on the text in your code. This means no more manual creation or updating of JSON files. The plugin ensures your translation files are always up-to-date and accurate.

Localized Translation Files​

Translation files are placed right next to the corresponding code files. This localized approach makes it easier to manage translations, as each component or module has its own set of translation files.

Text-Based Keys​

Instead of using arbitrary keys, localang-i18n-js uses the actual text as the key. This makes it easy to search for and find specific translations within your codebase. If you see a piece of text in the UI, you can quickly locate it in the code by searching for that exact text.

For example, if you write i18n('What is love?') and i18n('{count} left') in the index.js file, an index.i18n.js file will be created next to it with the following contents:

import { makeI18n } from 'localang-i18n-js';
// or const { makeI18n } = require('localang-i18n-js');

const keyset = {
    'What is love?': {
        en: 'What is love?',
        ar: '',
    },
    '{count} left': {
        en: {
            zero: 'Nothing left',
            one: 'One left',
            two: 'Two left',
            few: 'A few left',
            many: 'Many left',
            other: '{count} left',
        },
        ar: {
            zero: '',
            one: '',
            two: '',
            few: '',
            many: '',
            other: ''
        },
    },
};

export const i18n = makeI18n(keyset);
// or module.exports = makeI18n(keyset);

Localang Integration​

localang-i18n-js integrates with a Localang platform for managing translations, allowing non-developers to update translations directly within the codebase. This means your localization team can handle updates without needing to involve developers, streamlining the process and reducing the risk of errors.

GitHub Actions for Automation​

To further streamline the localization process, localang-i18n-js has ready to use GitHub Actions for automatic synchronization of translation files. You can set up workflows to pull the latest translations from the translation platform or push new translations to platform directly from your codebase. This automation ensures that your translations are always up-to-date without manual intervention.