DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Automating Internationalization with Google Spreadsheet and i18next.
Anlisha Maharjan
Anlisha Maharjan

Posted on • Originally published at anlisha.com.np on

Automating Internationalization with Google Spreadsheet and i18next.

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

  1. React app that supports multiple languages (with i18next and react-i18next library)
  2. Setup Google Spreadsheet as JSON Hosting + v4 Google sheet API authentication
  3. 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 scanned key 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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
|
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"
}
Enter fullscreen mode Exit fullscreen mode
  • 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!

  1. List of all config options available for i18next_._
  2. 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)

18 Useful Github Repositories Every Developer Should Bookmark

18 Useful GitHub repositories every developer should bookmark: everything from learning resources and roadmaps to best practices, system designs, and tools.