Requirements

You need curl to be installed. It is installed per default on each unix-like machine.

Install

# ... as a dev dependency
npm i -D @zauberware/weblate-create-components
yarn add @zauberware/weblate-create-components -D

# ... as a global dependency
npm i -g @zauberware/weblate-create-components
yarn add @zauberware/weblate-create-components -g

Create Project on your weblate server

Create a new project at https://translations.zauberware.dev/. For the case you don't want everyone to access the translations you need to make the project private. Copy token and project name and your api token to your .env file. Go to personal profile to grap token and to project settings to grap project name.

.env

Configure and put these env variables to your .env file. IMPORTANT: If any of those is missing the whole process won't work!

REACT_APP_WEBLATE_TOKEN=token
REACT_APP_WEBLATE_PROJECT_ID=projectid
REACT_APP_WEBLATE_URL=https://translations.zauberware.dev
REACT_APP_WEBLATE_BRANCH=develop
REACT_APP_DEFAULT_LOCALE=de
REACT_APP_LOCALES=["de", "en"]
REACT_APP_WEBLATE_COMMIT_PENDING_AGE=<duration-in-hours>
[email protected]:zauberware/<project-name>.git
REACT_APP_LOCALES_FOLDER=public/locales
REACT_APP_GLOB_FILE_MASK=./public/locales/de/*.json
REACT_APP_LOCALES_FILE_TYPE=json

REACT_APP_WEBLATE_FILE_MASK=src/config/translations/*.json

Description

REACT_APP_WEBLATE_TOKEN:

The token of your weblate account or the specific weblate project. Can be found at Account API Settings

REACT_APP_WEBLATE_PROJECT_ID:

The slug you've added while creating the weblate project.

REACT_APP_WEBLATE_URL:

The host url of your weblate server. In our example: https://translations.zauberware.dev

REACT_APP_WEBLATE_BRANCH:

The Branch where Weblate will commit the changes to.

REACT_APP_DEFAULT_LOCALE:

The Branch where Weblate will commit the changes to.

REACT_APP_LOCALES:

Not used right now, but will add more languages in future releases.

REACT_APP_WEBLATE_COMMIT_PENDING_AGE:

The duration in hours after that weblate will create a commit of the pending changes.

REACT_APP_REPO_URL:

The Git Link of the connected repository where weblate will create the commit and read the translations from.

REACT_APP_LOCALES_FOLDER:

The folder where the translations are inside (without the trailing slash). For a React project normally: public/locales

REACT_APP_GLOB_FILE_MASK:

Glob pattern to match all files in the source langauge. For example: ./public/locales/de/*.json

REACT_APP_LOCALES_FILE_TYPE:

The ending of the locale files. For json files it's just json.

IMPORTANT:

Only required if only language files.

REACT_APP_WEBLATE_FILE_MASK:

If your translations file structure is not the default structure of i18next, you need to add the weblates file mask, where the '*'-character represents the different languages. Example: src/config/translations/*.json

package.json scripts

Put these scripts into your root package.json

# only necessary if you installed the package as dev dependency
"weblate-create-components": "npm explore @zauberware/weblate-create-components -- npm run create-components --env=$PWD"

Flows

With the following command you can generate all required components on your weblate project. Already existing components will be skipped by the weblate api.

# for local dev dependency
npm run weblate-create-components

If you installed weblate globally you can simply run the command:

# for global package
weblate-create-components -- npm run create-components --env=$PWD

S3 Bucket sync

tbd.