Unifying i18n in Spring Boot: Merging frontend and backend approaches

Frontend
1

I’m working on a Spring Boot web app and I’m trying to figure out how to handle internationalization (i18n) more efficiently. Right now, I’ve got separate setups for the backend and frontend.

For the backend, I’m using a ReloadableResourceBundleMessageSource bean to read properties files. It looks something like this:

@Bean
public MessageSource createMessageSource() {
    ReloadableResourceBundleMessageSource source = new ReloadableResourceBundleMessageSource();
    source.setBasename("classpath:i18n/backend/translations");
    source.setCacheSeconds(1800);
    return source;
}

On the frontend side, I’m using a static file loader with AngularJS’s $translate service:

function setupTranslations($translateProvider) {
    $translateProvider.useStaticFilesLoader({
        files: [{
            prefix: 'i18n/frontend/translations-',
            suffix: '.json'
        }]
    });
}

Is there a way to combine these two approaches? It would be great to have a single source of truth for translations. Any ideas on how to streamline this setup?

2

hmm, interesting challenge! have you considered using webpack to bundle your translations? it could potentially bridge the gap between frontend and backend. you could create a shared folder for translations, then use webpack to package them for angular and spring boot to read directly. just a thought - what do you think?

3

Have u tried using JSON for both? u could keep all translations in JSON files, then use Jackson to load em in Spring and fetch the same files for Angular. this way, u got one source and both ends can read it. might need to tweak ur loading logic a bit, but could solve ur problem

4

Having worked on similar internationalization challenges, I can suggest a unified approach that has worked well for me. Consider using a shared resource bundle that both your Spring Boot backend and AngularJS frontend can access. You can achieve this by exposing your backend message source through a REST API endpoint.

Create a controller in Spring Boot that serves translation data:

@RestController
@RequestMapping("/api/translations")
public class TranslationController {
    @Autowired
    private MessageSource messageSource;

    @GetMapping("/{lang}")
    public Map<String, String> getTranslations(@PathVariable String lang) {
        // Logic to fetch and return translations as a map
    }
}

Then, modify your AngularJS setup to fetch translations from this endpoint instead of static files. This approach maintains a single source of truth in your backend while allowing your frontend to access the same translations dynamically.