What is localization?

If you are building a website where you have to deal with different languages and you want your website to be available in different languages.

The term localization refers to handle multi-language for your website or a web app. Let's learn how to support multi-languages in our website.

Following will be the flow for our application:

  • Your website has default language set to english
  • When user from different country lands on your website you detect their country and language
  • using detected country code and language code you redirect user to a special url with lang and country code
  • laravel app detects the url with country and lang code and sets the website language accordingly

Laravel localization package

I have created a small laravel package that you can use for your website if you want to support localization feature. Let's go to laravel project root directory and run following commands in terminal window:

# load my package in your vendor
composer require phpcodebooster/laravel

# copy my module configuration file (optional)
php artisan vendor:publish

Let's enable our localization feature, open up app/Providers/AppServiceProvider.php file and edit:

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
class AppServiceProvider extends ServiceProvider
{
    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        \PCBLaravel::setLocale();
    }

   // ... other methods go down below
}

When laravel app loads above function will detect the language based on url or set default to english if none found in url. Next, we have to make changes to all of our routes to use new prefix function.

Open app/Providers/RouteServiceProvider file and make following changes:

<?php

namespace App\Providers;

use Illuminate\Support\Facades\Route;
use Illuminate\Foundation\Support\Providers\RouteServiceProvider as ServiceProvider;

class RouteServiceProvider extends ServiceProvider
{
    /**
     * This namespace is applied to your controller routes.
     *
     * In addition, it is set as the URL generator's root namespace.
     *
     * @var string
     */
    protected $namespace = 'App\Http\Controllers';

    /**
     * Define the routes for the application.
     *
     * @return void
     */
    public function map()
    {     
        Route::prefix(\PCBLaravel::setPrefix())
            ->middleware('web')
            ->namespace($this->namespace)
            ->group(base_path('routes/web.php'));

        Route::prefix(\PCBLaravel::setPrefix('api'))
            ->middleware('api')
            ->namespace($this->namespace)
            ->group(base_path('routes/api.php'));
    }
}

How does localization package works?

Once you have make all the changes required for our new package to work. It is time to verify if everything works fine. By default laravel stores translations in following manner:

/resources
    /lang
        /en
            messages.php
        /es
            messages.php

Let's create a sample page with laravel to check if our package works. Let's create a new route for our app in routes/web.php file with following content:

Route::get('/', function () {
    return __('messages.welcome');
});

Next, let's define english translation first in resources/lang/en/messages.php :

<?php

return [
    'welcome' => 'Welcome to our application'
];

Let's define another translation in resources/lang/es/messages.php:

<?php

return [
    'welcome' => 'Bienvenido a nuestra aplicación'
];

Alright, we have setup a new route to test with and two different languages to play with.

Let's run laravel app by running following command in laravel project root:

php artisan serve

Now, try to access following different urls on your browser:

  • http://127.0.0.1:8000                 - default english
  • http://127.0.0.1:8000/en           - english specified
  • http://127.0.0.1:8000/es           - spanish
  • http://127.0.0.1:8000/en/ca     - canadian english
  • http://127.0.0.1:8000/en/us     - us english
  • http://127.0.0.1:8000/es/mx    - mexican spanish

When you visit these different urls you will notice that your page will be translated accordingly.

How to auto-detect country and language?

If you notice that language does not change automatically with our package. A developer has to auto detect the language and redirect user to appropriate url for specified country and language.

For example, with all above changes if user from Quebec trying to access this website it does not automatically set french as a language.

You can try to use following geo location api to that finds appropriate user language code and country code and then once user lang and country is identified you can redirect them to target page or else use default english.

Geo Location Finder APIGeo Location Finder API

Another way you can provide list of country and language in dropdown menu and when user switch the menu item you can redirect them to appropriate url.