The article is for the front-end developers who are suffering from the manual “copy-and-paste” internationalization process. Through this guide executing a single line of script shall automate the entire process.
Use Case
- React app that supports multiple languages (with i18next and react-i18next library)
- Setup Google Spreadsheet as JSON Hosting + v4 Google sheet API authentication
- Script that auto synchronize translations between Google Spreadsheet & JSON file (with google-spreadsheet library & Google Sheets API) by given two methods:
– Scanning the
key
from the source code and uploading the scannedkey
to Google spreadsheet. – Downloading the translated strings from Google spreadsheet when building the source code.
Let’s Start
Step 1 — Install and configure i18next & react-i18next library
npx create-react-app react-internationalization
cd react-internationalization
npm install @mui/material @emotion/react @emotion/styled
This will create a basic CRA. We also installed MUI 5 for creating UI components.
npm install i18next react-i18next i18next-browser-languagedetector i18next-http-backend
This will install i18next framework and its React wrapper.
Next create a file i18n.js at the top level of the project with given configuration below:
Then import the file in index.js as shown below:
All translations goes into — _public/locales _— with a separate JSON file for each supported language.
├── public/
│ ├── locales/
│ ├── en/
| ├── translation.json
|
│ ├── no
| ├── translation.json
|
Also place the snippet below in App.js for UI components that reflects switch between multiple languages.
Step 2 — Setup Google Spreadsheet
Create a Google Sheet with the following structure:
Note the spreadsheet id.
1B1njd441X7di47joj9OvQGuJZ-mR9yFQrpr0WNW6c94
To handle v4 Google sheet API authentication follow service account option. Generated JSON file as shown below; secret.json is kept at the top level of the project and add it to .gitignore!
{
"type": "service_account",
"project_id": "XXXXXXXXXXXXXXX",
"private_key_id": "XXXXXXXXXXXXXXX",
"private_key": "XXXXXXXXXXXXXXX",
"client_email": "service-account-google-sheet-a@XXXXXXXXXXXX.iam.gserviceaccount.com",
"client_id": "XXXXXXXXXXXXXXX",
"auth_uri": "https://accounts.google.com/o/oauth2/auth",
"token_uri": "https://oauth2.googleapis.com/token",
"auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
"client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/service-account-google-sheet-XXXXXXXXXXXXX.iam.gserviceaccount.com"
}
Step 3 — Automated script to synchronize translations between Google Spreadsheet & JSON file
google-spreadsheet is a wrapper library that lets you use the Google Sheets API. It can be used to create a new sheet or to read, write, and manage cells and rows.
npm i google-spreadsheet
Create fetch-google-spreadsheet.js and push-google-spreadsheet.js file at the top level of the project and insert the below code in it.
Insert scripts in package.json
{
"start": "npm run fetch:i18n && react-scripts start",
"build": "npm run fetch:i18n && react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"push:i18n": "node push-google-spreadsheet.js",
"fetch:i18n": "node fetch-google-spreadsheet.js"
}
- Developer: Run
npm run push:i18n
then request translation. - Translator: Enter translations in the spreadsheet
This is it. Every time you build/start application, the npm run fetch:i18n
will be executed and the most recent translation will be applied to the build. I hope this helps.
Source Code!
The full source code is available here — https://github.com/anlisha-maharjan/react-internationalization-googlespreadsheet-i18next.
More info!
- List of all config options available for i18next_._
- v4 google sheets API Authentication using service account.
The post Automating Internationalization with Google Spreadsheet and i18next. first appeared on Anlisha Maharjan.
Top comments (0)