Getting Started

Installation

Getting started with LocaleCloud is quick and easy. Follow these steps to add it to your project.

Installing the Package

LocaleCloud can be installed using npm, yarn, or pnpm. Choose the package manager you prefer:

npm install @localecloud/client

Configuration

After installing the package, you need to configure LocaleCloud with your API key. You can get your API key from the LocaleCloud dashboard.

LocaleCloud uses an edge caching system to optimize performance. Translations are cached at the edge, ensuring fast load times in production environments. During development, new terms will be processed by the AI translation model and then cached for future use.

// Initialize LocaleCloud
import { initLocaleCloud } from '@localecloud/client';

initLocaleCloud({
  apiKey: "your_api_key_here",
  defaultLocale: "en",
  debug: process.env.NODE_ENV !== "production",
  // Enable edge caching for optimal performance (default: true)
  useEdgeCache: true
});

Framework-Specific Setup

React Setup

For React applications, we recommend using our context provider to handle locale changes and re-renders:

import { LocaleCloudProvider, useTranslation } from '@localecloud/react';

// In your app root
function App() {
  return (
    <LocaleCloudProvider
      apiKey="your_api_key_here"
      defaultLocale="en"
    >
      <YourApp />
    </LocaleCloudProvider>
  );
}

// In your components
function Greeting() {
  const { t } = useTranslation();
  
  return (
    <h1>{t("Hello, welcome to our app!")}</h1>
  );
}

Environment Variables

We recommend using environment variables to store your API key. Here's how to set it up:

.env

LOCALECLOUD_API_KEY=your_api_key_here
LOCALECLOUD_DEFAULT_LOCALE=en

config.js

import { initLocaleCloud } from '@localecloud/client';

initLocaleCloud({
  apiKey: process.env.LOCALECLOUD_API_KEY,
  defaultLocale: process.env.LOCALECLOUD_DEFAULT_LOCALE || "en",
  debug: process.env.NODE_ENV !== "production"
});

Verifying Installation

To verify that LocaleCloud has been correctly installed and configured, you can run a simple test:

import { t, setLocale } from '@localecloud/client';

// Test basic functionality
console.log(t("Hello")); // Should output "Hello" in default locale

// Test locale switching
setLocale("es");
console.log(t("Hello")); // Should output "Hola" after the translation is loaded

Note: Translation loading may be asynchronous in real applications. For production use, consider handling loading states with the useTranslation hook or withLocaleReady HOC.

Previous: Introduction Next: How It Works