How to provide multi languages support in single page applications?

Question

We want all our static resouces(HTML, CSS, JS) to be static pages(rather than being rendered at server), but encountered problems. In order to support multi languages, we have to embed the contexts of different languages in our code. As a result, in development, we have to compile the source files to many copies on every file changes. As the project becomes larger and larger, the compilation could be quite slow, and projects hard to manage.

Is there a best practice of supporting multi languages in single page applications?

Answer 1

I think use a Server-side script to response HTML/CSS/JS file is good approach.

A small example

index.php

<?php
    include_once 'lang.txt.php'; // Language dictionary file
    $lang = isset($_GET['lang']) ? $_GET['lang'] : 'en'; // Default is English
?>
<!-- Include JS/CSS -->
<script src="js/myScript.js.php?lang=<?=$lang?>"/>
<link href="css/style.css.php?lang=<?=$lang?>" rel="stylesheet"/>

<!-- Your HTML -->
<div class="welcome-div">
   <!-- echo text base on $lang variable -->
   You are viewing this page in <?=$getTextByLanguage[$lang]['welcome_message']?>
    <script>
        showMessage();
    </script>
</div>

myScript.js.php

<?php
    include_once 'lang.txt.php';
    $lang = isset($_GET['lang']) ? $_GET['lang'] : 'en';
?>
function showMessage() {
    alert('<?=$getTextByLanguage[$lang]['welcome_message']?>');
}

Pros

• Won't affect page load speed, request size, browser cache files (keep performance)

Cons

• Need more work on server-side or maybe you should build a small framework to do that.

This is just my personal idea, I think people have created some design pattern about this.