--- name: lokalise-reference-architecture-d334e6cc78fe description: | Implement Lokalise reference architecture with best-practice project layout. Use when designing new Lokalise integrations, reviewing project structure, or establishing architecture standards for Lokalise applications. Trigger with phrases like "lokalise architecture", "lokalise best practices", "lokalise project structure", "how to organize lokalise", "lokalise layout". allowed-tools: Read, Grep version: 1.0.0 license: MIT author: Jeremy Longshore --- # Lokalise Reference Architecture ## Overview Production-ready architecture patterns for Lokalise integrations. ## Prerequisites - Understanding of layered architecture - Lokalise SDK knowledge - TypeScript project setup - Testing framework configured ## Project Structure ``` my-app/ ├── src/ │ ├── i18n/ │ │ ├── index.ts # i18n library setup │ │ ├── config.ts # Lokalise configuration │ │ ├── types.ts # TypeScript types │ │ └── loaders/ │ │ ├── static.ts # Bundled translations │ │ ├── dynamic.ts # Runtime loading │ │ └── ota.ts # Over-the-air (mobile) │ ├── services/ │ │ └── lokalise/ │ │ ├── index.ts # Service facade │ │ ├── client.ts # Lokalise client wrapper │ │ ├── cache.ts # Caching layer │ │ ├── sync.ts # Translation sync │ │ └── webhooks.ts # Webhook handlers │ ├── locales/ │ │ ├── en.json # English (source) │ │ ├── es.json # Spanish │ │ ├── fr.json # French │ │ └── index.ts # Locale exports │ └── api/ │ └── webhooks/ │ └── lokalise.ts # Webhook endpoint ├── scripts/ │ ├── lokalise-pull.sh # Download translations │ ├── lokalise-push.sh # Upload source strings │ └── check-translations.ts # Validation script ├── tests/ │ ├── unit/ │ │ └── i18n/ │ └── integration/ │ └── lokalise/ ├── config/ │ ├── lokalise.development.json │ ├── lokalise.staging.json │ └── lokalise.production.json ├── .env.example ├── lokalise.json # CLI configuration └── package.json ``` ## Layer Architecture ``` ┌─────────────────────────────────────────┐ │ Application Layer │ │ (React/Vue/Angular Components) │ ├─────────────────────────────────────────┤ │ i18n Library Layer │ │ (i18next, react-intl, vue-i18n) │ ├─────────────────────────────────────────┤ │ Translation Service Layer │ │ (Loading, Caching, Fallback Logic) │ ├─────────────────────────────────────────┤ │ Lokalise Layer │ │ (SDK Client, Sync, Webhooks) │ ├─────────────────────────────────────────┤ │ Infrastructure Layer │ │ (Cache, Queue, Monitoring) │ └─────────────────────────────────────────┘ ``` ## Key Components ### Step 1: Lokalise Client Wrapper ```typescript // src/services/lokalise/client.ts import { LokaliseApi } from "@lokalise/node-api"; let instance: LokaliseApi | null = null; export interface LokaliseConfig { apiKey: string; projectId: string; enableCompression?: boolean; } export function getLokaliseClient(config?: Partial): LokaliseApi { if (!instance) { instance = new LokaliseApi({ apiKey: config?.apiKey || process.env.LOKALISE_API_TOKEN!, enableCompression: config?.enableCompression ?? true, }); } return instance; } export function getProjectId(): string { return process.env.LOKALISE_PROJECT_ID!; } // Reset for testing export function resetClient(): void { instance = null; } ``` ### Step 2: Translation Service Facade ```typescript // src/services/lokalise/index.ts import { getLokaliseClient, getProjectId } from "./client"; import { TranslationCache } from "./cache"; import { syncTranslations } from "./sync"; export interface TranslationService { getTranslations(locale: string): Promise>; getKey(locale: string, key: string): Promise; syncFromLokalise(): Promise; invalidateCache(locale?: string): void; } const cache = new TranslationCache(); export const translationService: TranslationService = { async getTranslations(locale) { // Try cache first const cached = cache.get(locale); if (cached) return cached; // Load from bundled files or Lokalise const translations = await loadTranslations(locale); cache.set(locale, translations); return translations; }, async getKey(locale, key) { const translations = await this.getTranslations(locale); return translations[key] ?? null; }, async syncFromLokalise() { await syncTranslations(getProjectId()); }, invalidateCache(locale) { if (locale) { cache.delete(locale); } else { cache.clear(); } }, }; ``` ### Step 3: Translation Loader Pattern ```typescript // src/i18n/loaders/static.ts // For bundled translations (build-time) export async function loadStaticTranslations( locale: string ): Promise> { try { const translations = await import(`../../locales/${locale}.json`); return translations.default; } catch { console.warn(`Locale ${locale} not found, falling back to English`); const fallback = await import("../../locales/en.json"); return fallback.default; } } // src/i18n/loaders/dynamic.ts // For runtime loading (CDN/API) export async function loadDynamicTranslations( locale: string, baseUrl = "/locales" ): Promise> { const response = await fetch(`${baseUrl}/${locale}.json`); if (!response.ok) { console.warn(`Failed to load ${locale}, falling back to English`); return loadDynamicTranslations("en", baseUrl); } return response.json(); } ``` ### Step 4: i18n Library Integration ```typescript // src/i18n/index.ts import i18n from "i18next"; import { initReactI18next } from "react-i18next"; import { loadStaticTranslations } from "./loaders/static"; export const SUPPORTED_LOCALES = ["en", "es", "fr", "de", "ja"]; export const DEFAULT_LOCALE = "en"; export async function initI18n(locale = DEFAULT_LOCALE) { const resources: Record = {}; // Load initial locale resources[locale] = { translation: await loadStaticTranslations(locale), }; // Load English fallback if different if (locale !== "en") { resources.en = { translation: await loadStaticTranslations("en"), }; } await i18n.use(initReactI18next).init({ resources, lng: locale, fallbackLng: "en", supportedLngs: SUPPORTED_LOCALES, interpolation: { escapeValue: false, }, }); return i18n; } // Lazy load additional locales export async function loadLocale(locale: string) { if (i18n.hasResourceBundle(locale, "translation")) { return; } const translations = await loadStaticTranslations(locale); i18n.addResourceBundle(locale, "translation", translations); } ``` ## Data Flow Diagram ``` Developer adds string │ ▼ ┌───────────────┐ │ en.json │──────────────────┐ │ (source) │ │ └───────┬───────┘ │ │ ▼ │ git push ┌───────────────┐ │ │ CI/CD │ ▼ │ Pipeline │ ┌───────────────┐ └───────┬───────┘ │ Lokalise │◀───────────────────┘ │ Project │ lokalise push └───────┬───────┘ │ │ Translators work ▼ ┌───────────────┐ │ Translations │ │ Complete │ └───────┬───────┘ │ │ Webhook / CI sync ▼ ┌───────────────┐ │ App Build │────▶ Production │ with i18n │ └───────────────┘ ``` ## Configuration Management ```typescript // config/lokalise.ts import devConfig from "./lokalise.development.json"; import stagingConfig from "./lokalise.staging.json"; import prodConfig from "./lokalise.production.json"; type Environment = "development" | "staging" | "production"; interface LokaliseEnvConfig { projectId: string; enableWebhooks: boolean; cacheEnabled: boolean; cacheTtlSeconds: number; } const configs: Record = { development: devConfig, staging: stagingConfig, production: prodConfig, }; export function getLokaliseEnvConfig(): LokaliseEnvConfig { const env = (process.env.NODE_ENV || "development") as Environment; return configs[env] || configs.development; } ``` ## Instructions ### Step 1: Create Directory Structure Set up the project layout following the reference structure. ### Step 2: Implement Client Wrapper Create the singleton client with caching support. ### Step 3: Build Translation Service Implement the facade pattern for translation operations. ### Step 4: Integrate i18n Library Connect Lokalise translations to your UI framework. ## Output - Structured project layout - Client wrapper with caching - Translation service facade - i18n library integration ## Error Handling | Issue | Cause | Solution | |-------|-------|----------| | Circular imports | Wrong layering | Separate by layer | | Missing locale | Not bundled | Add fallback logic | | Stale translations | Cache not invalidated | Use webhooks to invalidate | | Type errors | Missing types | Generate from source locale | ## Examples ### Quick Setup Script ```bash #!/bin/bash # Create reference structure mkdir -p src/i18n/loaders mkdir -p src/services/lokalise mkdir -p src/locales mkdir -p scripts mkdir -p config mkdir -p tests/{unit,integration}/lokalise touch src/i18n/{index,config,types}.ts touch src/i18n/loaders/{static,dynamic,ota}.ts touch src/services/lokalise/{index,client,cache,sync,webhooks}.ts touch scripts/{lokalise-pull.sh,lokalise-push.sh,check-translations.ts} touch config/lokalise.{development,staging,production}.json ``` ## Resources - [Lokalise SDK Documentation](https://lokalise.github.io/node-lokalise-api/) - [i18next Documentation](https://www.i18next.com/) - [React i18next](https://react.i18next.com/) ## Flagship Skills For multi-environment setup, see `lokalise-multi-env-setup`. --- Source attribution: Dicklesworthstone Original project: https://github.com/Dicklesworthstone/pi_agent_rust/blob/f28fc46ee0db8e710d95b8b55592cd38d60f2b26/tests/ext_conformance/artifacts/plugins-community/plugins/saas-packs/lokalise-pack/skills/lokalise-reference-architecture/SKILL.md License: MIT License information: https://opensource.org/license/mit Original upstream instructions; downloaded from Mega AI Hub. ## Upstream license notice MIT License (with OpenAI/Anthropic Rider) Copyright (c) 2026 Jeffrey Emanuel Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: ADDITIONAL RIDER / RESTRICTION (OpenAI / Anthropic): This rider is part of the "conditions" of this License. In the event of any conflict between this rider and any other portion of this License, this rider controls. "Restricted Parties" means OpenAI, L.L.C.; Anthropic, PBC; any of their respective Affiliates; and any person or entity acting directly or indirectly on behalf of, for the benefit of, or under the direction of any of the foregoing (including any officer, director, employee, contractor, agent, consultant, service provider, or representative). Notwithstanding any other provision of this License, no rights are granted to any Restricted Party. Any purported license, sublicense, assignment, transfer, or other permission to any Restricted Party is null and void absent the express prior written permission of Jeffrey Emanuel. You may not provide, disclose, distribute, sublicense, sell, lease, lend, host, make available, or otherwise permit access to the Software or any derivative work of the Software (as defined in applicable copyright law) (collectively, "Derivative Works") to or for any Restricted Party. For purposes of this rider, "use" includes, without limitation: copying, modifying, merging, publishing, distributing, sublicensing, selling, transferring, making available, hosting, deploying, executing, benchmarking, testing, analyzing, indexing, or incorporating the Software or any Derivative Works into any dataset, training corpus, evaluation harness, or pipeline for machine learning or other automated systems. This rider applies to the Software and all Derivative Works. As a condition of use, you agree that this rider is a precondition to exercising any rights under this License, and you agree that any distribution of the Software or any Derivative Works must include this rider provision unmodified. Any breach of this rider automatically and immediately terminates the permissions granted by this License. Upon termination, you must immediately cease all use and distribution of the Software and any Derivative Works and destroy all copies under your control. You agree that a breach of this rider would cause irreparable harm and that Jeffrey Emanuel may seek injunctive or other equitable relief to enforce this rider, in addition to any other remedies available at law. To the maximum extent permitted by applicable law, the prevailing party in any action to enforce this rider shall be entitled to recover reasonable attorneys' fees and costs. For purposes of this rider, "Affiliate" means any entity that directly or indirectly controls, is controlled by, or is under common control with the specified party. "Control" means ownership of more than 50% of the voting securities or other ownership interest, or the power to direct management or policies by contract or otherwise. The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. # Mega AI Hub resource metadata Creator / publisher: Dicklesworthstone Original project: https://github.com/Dicklesworthstone/pi_agent_rust/blob/f28fc46ee0db8e710d95b8b55592cd38d60f2b26/tests/ext_conformance/artifacts/plugins-community/plugins/saas-packs/lokalise-pack/skills/lokalise-reference-architecture/SKILL.md Attribution basis: Source repository record Fields of work: Design, Development & Engineering, Product Management Roles: Backend Developer, Frontend Developer, Growth Product Manager, Product Manager, UX Designer Specialties: Backend Tools: Lokalise Country applicability: Country not specified Classification basis: Source catalog labels Instruction SHA-256: 6c60c5c841907162101e13fd09aa430d64d0c6ef25a411a9632a5233bc9f2747