Subscribe
How to Build a Multi-Language Web Application with Flask-Babel
3 mins read

By: vishwesh

How to Build a Multi-Language Web Application with Flask-Babel

Building a web application that supports multiple languages can be a challenging task. However, with Flask-Babel, the process is much easier. Flask-Babel is a Flask extension that allows you to internationalize your web application, making it accessible to users all over the world. In this article, we'll take a look at how to use Flask-Babel to build a multi-language web application.

Prerequisites

Before we begin, you should have some basic knowledge of Flask and Python. You should also have Flask-Babel installed in your virtual environment. If you haven't already done so, you can install it by running the following command:

pip install Flask-Babel

Setting Up Flask-Babel

Once you have Flask-Babel installed, the first thing you need to do is initialize it in your Flask application. To do this, create a new file called babel.py in the root directory of your application and add the following code:

from flask_babel import Babel

babel = Babel()

This will initialize Flask-Babel and create a new instance of the Babel class.

Next, you need to configure Flask-Babel to use the languages you want to support. To do this, add the following code to your babel.py file:

LANGUAGES = {
    'en': 'English',
    'fr': 'French',
    'es': 'Spanish'
}

def configure(app):
    babel.init_app(app)
    app.config['LANGUAGES'] = LANGUAGES

This code defines a dictionary of languages that you want to support and a configure function that initializes Flask-Babel and sets the LANGUAGES configuration parameter.

Finally, you need to import and call the configure function in your Flask application:

from babel import configure
from flask import Flask

app = Flask(__name__)
configure(app)

Translating Your Application

Now that Flask-Babel is set up, you can start translating your application. To do this, you need to wrap all the strings that need to be translated with the gettext function. For example:

from flask_babel import gettext

@app.route('/')
def index():
    return gettext('Hello, world!')

This code uses the gettext function to translate the string "Hello, world!" into the user's language.

Adding Translations

To add translations for a specific language, you need to create a new translation file. For example, to add translations for French, create a new file called messages.fr.po in the translations directory of your application. This file should contain the translated strings for your application in the msgid and msgstr format:

msgid "Hello, world!"
msgstr "Bonjour, le monde!"

This code translates the string "Hello, world!" into French as "Bonjour, le monde!".

Switching Languages

To allow users to switch between languages, you need to add a language selector to your application. To do this, create a new route that sets the user's language preference in a cookie:

from flask import redirect, request, make_response

@app.route('/language/<language>')
def set_language(language=None):
    response = make_response(redirect(request.referrer or '/'))
    response.set_cookie('lang', language)
    return response

This code creates a new route that sets a cookie called lang to the user's language preference.

Next, you need to modify your configure function to read the user's language preference from the cookie:

def configure(app):
    babel.init_app(app)
    app.config['LANGUAGES'] = LANGUAGES
    
@babel.localeselector
def get_locale():
    return request.cookies.get('lang', 'en')

This code adds a localeselector to the Babel instance that reads the user's language preference from the lang cookie. If the cookie is not set, it defaults to English.

Conclusion

In this article, we have learned how to build a multi-language web application with Flask-Babel. We covered the basics of setting up Flask-Babel, translating your application, and adding language support. We also learned how to switch between languages using cookies.

Flask-Babel is a powerful tool that makes it easy to internationalize your web application. With its simple API and intuitive syntax, you can easily build a web application that is accessible to users all over the world.

Recent posts

Don't miss the latest trends

    Popular Posts

    Popular Categories