Awesome Open Source
Awesome Open Source

Flask i18n example

This is a roughly and badly documented test app that shows how to use Flask-Babel and gettext to translate a Flask app.

Its most interesting part is the translation of the javascript content, since no coherent documentation is to be found on the internet regarding this subject.

Create the application

Create a virtual env as usual:

# (FreeBSD commands)
make -C /usr/ports/devel/py-virtualenv install clean
virtualenv -p /usr/local/bin/python3.4 venv
source venv/bin/activate.csh

Install flask:

pip install flask

Create a route that outputs a template, add some js files.

Install Flask-Babel

Install flask-babel:

pip install flask-babel

Instantiate and configure the package in your app file:

from flask.ext.babel import Babel
babel = Babel(app)

Add some text everywhere in your app.

Extract the texts and create the translation files

Extract the texts from the files (see babel.cfg):

venv/bin/pybabel extract -F babel.cfg -o messages.pot .

Create or update your translation files:

venv/bin/pybabel init -i messages.pot -d translations -l fr


venv/bin/pybabel update -i messages.pot -d translations

Compile the translations:

venv/bin/pybabel compile -d translations

Configure jsgettext to translate content in javascript files

Get Gettext.js from and add it to the project:

See file static/js/scripts.js to see how to use it.

Use the PO/MO files

Copy the file somewhere in the static folder and inform jsgettext that the translations are in them:

<link rel="gettext" type="application/x-po" href="{{ url_for('static', filename='translations/fr.po') }}">

Use JSON files

Install pojson.

pip install pojson

Convert the PO file to JSON:

echo -n "{'flask-i18n-example': " > static/translations/fr.json
venv/bin/pojson translations/fr/LC_MESSAGES/messages.po >> static/translations/fr.json
echo "}" >> static/translations/fr.json

Inform jsgettext that the translation are in the JSON file:

<link rel="gettext" type="application/json" href="{{ url_for('static', filename='translations/fr.json') }}">

Alternative Project Comparisons
Related Awesome Lists
Top Programming Languages
Top Projects

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,072,185
Flask (20,750
Translation (13,583
Babel (7,999
Translate (5,093
I18n (4,846
Gettext (896