🇨🇿 Setup spreadsheet translations

There is a tool called ackee-localize-spreadsheet-sdk that is built up to help us manage localizations in our applicationss that use react-intl library.

Our motivation for building such tool was a move of responsibility for filling translations out of repositories. We likely want to let customer (or some translations specialized department) fill translations independently on our source code.

Here are a few steps you need to go through to set up a project for translations from a spreadsheet

Make a spreadsheet

Create a spreadsheet on Google drive. It is better to duplicate an existing spreadsheet rather than making a new one. You can try Abibuch project spreadsheet or a Spreadsheet template.

Don't forget to clone a spreadsheet to you own location. The best place to keep project's spreadsheet is the Projekty > My Project > Web folder on Google Drive, where My Project is name of your project, eg. Abibuch.

Important step is to make the spreadsheet published. Go to File > Publishing on web in your spreadshet and press Publish if there is one.

Note: If you publish the whole spreadsheet you can use more tabs, not just one.

Setup config

In your project root open .ackeeconfig.json (make one if it's not there) and fill these fields: sheet_id, dir, cols.

  • sheet_id - id of your spreadsheet, you can get it from the spreadsheet url
  • dir - directory to generate translation files into
  • cols - comman separated list of languages to use. Names should correspond to column headers in the spreadsheet. Also they are used as a names for generated translation files.

Typical .ackkeconfig.json looks like

    "localization": {
        "sheet_id": "1Klsl7XqBxPdeAgGA84kho49-_dwOpFXmWOeRzV3pWd4",
        "dir": "src/app/localization",
        "cols": "en,de",
        "type": "key_web"

Install npm package

Install ackee-localize-spreadsheet-sdk to your project

yarn add -D ackee-localize-spreadsheet-sdk


npm install -D ackee-localize-spreadsheet-sdk

then make localize npm script (or however you want to name it) and use it in other build scripts

  "scripts": {
    "start": "yarn localize && cross-env NODE_ENV=development webpack-dev-server --progress --inline --colors",
    "build": "yarn localize && yarn build:dev",
    "localize": "ackee-localize-spreadsheet-sdk",

which ensures your scripts are generated before each app build or start.

Generate translations

Before you generate first localization files, make few other steps:

  • Add ignoring translation files - since now translation files are generated from spreadsheet thus there is no reason to version them anymore. Add pattern for ignoring them into project's .gitignore.

    # .gitignore

    where src/app/localization is a folder you put into .ackeeconfig.json) as a dir field.

  • Eventually remove old files - if they are any versioned localizations files like cs.yml, etc., it's time to remove them from the repository.

  • Import JSONs

    Make sure that you're importing localization files as a JSON files like in the example below

    // src/app/localization/index.js
    import de from './de.json';
    import en from './en.json';

It's done

Now you can run yarn localize or yarn start which will first run the localize script.

results matching ""

    No results matching ""