Skip to main content

JavaScript

Get started with a vanilla JavaScript (or TypeScript) app running on Node or in the browser with this quickstart guide

Sign up​

Create your organisation and first project by signing in at https://localisefox.com. Navigate to the API page and take note of your Project ID and API key.

Install LocaliseFox and FormatJS​

npm install --save @formatjs/intl
npm install --save-dev localisefox
info

LocaliseFox recommends and currently only supports FormatJS (formatjs/intl) for i18n because of its adherence to Unicode ICU, light package footprint and ergonomic API

Initialise LocaliseFox​

Prepare the project structure by running the following command and following the prompts in the root of your project:

npx localisefox init

Be sure to select the JavaScript option when selecting your project type.

info

Commands such as localisefox init and localisefox pull generate code to ensure full type safety and provide boilerplate implementations on your behalf

Create provider​

You can create a provider for a specific locale:

import { createProvider } from "./i18n/provider";

function init(user: User) {
  const intl = createProvider(user.locale);
}

Create strings​

import { IntlShape } from "@formatjs/intl";

function widget(intl: IntlShape) {
  const hello = intl.formatMessage({
    id: "widget.hello",
    defaultMessage: "hello, world",
    description:
      'Classical "Hello, World!" greeting to demonstrate creating a simple string',
  });
}
info

You can explore more of the functions available from FormatJS on their docs

Setup environment​

Set the LOCALISEFOX_API_KEY environment variable to the API key found in the API settings for your project:

export LOCALISEFOX_API_KEY=<your_api_key>

Alternatively, you can consider using dotenv CLI (or similar) and storing the environment variable in a .env file.

Push strings to LocaliseFox​

After adding some strings to your codebase, you can run the following command which will push them to LocaliseFox ready for translation:

npx localisefox push

(Optional) Add GitHub Action for Continuous Localisation​

info

Coming soon

You can add the LocaliseFox action from the GitHub marketplace to push new and updated strings to LocaliseFox automatically on each commit to ensure your app is continuously localised.

Add translations in LocaliseFox​

Now that your newly created strings have been pushed to LocaliseFox, they'll appear on the strings page for your project where you'll be able to add translations or have LocaliseFox's AI do it on your behalf.

Pull strings from LocaliseFox​

Once strings have been translated in LocaliseFox, you can pull the translations ready to make a build using the following command:

npx localisefox pull

That's it!​

You're now ready to show your awesome software to millions more people.