Translating Your Web App Via Flask-Babel 🌎
By: Alejandra Lopez
Tags: Flask, Translation, Python, Babel, Web App Development

While building my first web app I decided to have a language feature that allowed users to pick between Spanish or English. Following the Flask-Babel documentation was confusing for me since it was my first time using it. Now that I have implemented this library, I wanted to create a blog that can be used by developers who are also learning Babel. It is important to know that this blog is targeted towards developers that can manually create their translations and for those using Flask as their framework, so here we go!

Installation 🚀

$ easy_install Flask-Babel

or

$ pip3 install Flask_Babel

Configuration File 📁

Once, you have installed Babel you will move on to creating a babel.cfg configuration file and add the following:

babel.cfg lets Babel know where to look for your translations.

In your server file you will add the following to instantiate flask and babel. I only used gettext() for flash messages so that is why I imported that as well.

Backend 🔙

Through Babel you can make your translations based on the locale of the user or the user preferred browser language. However, I designed my web app to allow users to make those changes. To do this I created the following POST request and then used the babel.localeselector to make those changes.

There are many ways to do this so feel free to use what makes sense in your web app.

gettext()

Any messages that will be rendered to your user via Flask (backend) will be formatted this way.

Here are some examples:

Frontend (HTML & Jinja)

The way you will communicate to Babel that you want something translated in your frontend will be by using the following format (parentheses preceded by an underscore),

{{ _(‘Translate Me’) }}

Here are some examples of what I translated. You can translate the placeholders, labels, heading, inputs. EVERYTHING! As long as you wrap it around the example format. DON’T translate “name” as that can create errors with POST and GET requests.

Creating messages.pot & messages.po 💻

Now that you have arranged all the strings you want translated we will compile them and create our translations folder. To do this we will return to the terminal and type the following.

Make sure you do this in your project directory. This will allow babel to extract all the strings you want translated (both in your server file and Jinja templates)

$ pybabel extract -F babel.cfg -o messages.pot

This will create a new file called messages.pot which is the template.

Then, type this to your terminal

$ pybabel init -i messages.pot -d translations -l es

es is for Español but you can choose your preferred language

Here are other languages you can choose: https://flask-user.readthedocs.io/en/v0.6/internationalization.html

This will create a new file called messages.po and will be in a translations folder. Messages.po will include all the strings that you want to translate. It looks like this:

Looks very similar to messages.pot but it is not the same. Here you will make translations.

In this file you will make the translations in msgstr.

Translations Completed ✅

Once you have translated all your strings you will compile them with pybabel

$ pybabel compile -d translations

YAY! You have translated your Web app! 😁