DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,155 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for How to make multilingual node.js app?!
Dmitrijs
Dmitrijs

Posted on • Originally published at npmjs.com

How to make multilingual node.js app?!

Hello!

You are looking how to easy make multilingual website with seo urls? You are in right place! I will tell you about "smws" module.

So we are going to test this module, full test code can be found on Github.
Check npmjs.com for documentation.

First off all, setup app.js. "smws" module work with Express, body-parser, cookie-parser and view engine (tested with Eta and ejs).

Module install:

npm i express body-parser cookie-parser eta smws
Enter fullscreen mode Exit fullscreen mode

app.js example:

const express = require('express'),
      cookieParser = require('cookie-parser'),
      bodyParser = require("body-parser"),
      smws = require("smws"),
      app = express();

app.set('view engine', 'Eta');

app.use(bodyParser.urlencoded({extended: true}));
app.use(express.static(__dirname + '/public'));
app.use(cookieParser());

app.listen(process.env.PORT || 3000, () => {
   console.log('Server running on port 3000');
});
Enter fullscreen mode Exit fullscreen mode

Next step, we need to configure "smws":

smws.config({
    languages: ['en','ru'],
    defaultLang: 'en'
});
Enter fullscreen mode Exit fullscreen mode

So, I will use two languages and default is 'en'. I don't need to add other options in config because they can stay with default values.

Language switcher

To change language from front-end setup view engine templates. We need form to send chosen language to the server:

<!-- action will be "/<%= smws.lang %>/language" if you use ejs -->
<!-- I'm using eta view engine -->
<form action="/<%= it.smws.lang %>/language" method="post">
    <button class="en-button" type="submit" name="lang" value="en">EN</button>
    <button class="ru-button" type="submit" name="lang" value="ru">RU</button>
</form>
Enter fullscreen mode Exit fullscreen mode

To receive this language changes, add to your app.js:

app.post('/:lang/language', (req,res)=>{
    smws.switcher(req,res);
});
Enter fullscreen mode Exit fullscreen mode

smws.switcher(req,res); controles language changes.

GET requests with smws

Next we add our paths to app.js:

app.get('/', function (req, res) {
    smws.run(req, res, {
        page: 'index'
    });
});

app.get('/:lang', function (req, res) {
    smws.run(req, res, {
        page: 'index'
    });
});

app.get(smws.split('/:lang/:category'), function (req, res) {
    smws.run(req,res,{
        page: 'category',
        useParams: ['lang', 'category']
    });
});
Enter fullscreen mode Exit fullscreen mode

smws.split('path') use for your paths where you need to translate and control more than only language parameter.
smws.run(req,req,{options}); use to response your template and control parameters. page: option is mandatory.

I'm using two paths for homepage to cover main url like domain.com and with language param like domain.com/en.

When user first time visit your main page, it will be rendered in default language which chosen in smws.config({....

If someone visit your website using some url. For example click somewhere domain.com/ru/kategoriya, page will be rendered in ru language, so chosen from params.

Language files

In the end we need language files. By default "smws" use .json files from "languages" folder in root directory. But you can change it in:

smws.config({
...
langDir: 'your/dir/name'
...
});
Enter fullscreen mode Exit fullscreen mode

Language file names must be same with your website languages. In this tutorial en.json and ru.json.
Example:

//en.json
{
    "smws": {

            "category": "category",
            "lang": "en"

    },
    "hello": "This is main page in 'EN'"
}
Enter fullscreen mode Exit fullscreen mode
//ru.json
{
    "smws": {

            "category": "kategoriya",
            "lang": "ru"

    },
    "hello": "Главная страница Π½Π° 'RU'"
}
Enter fullscreen mode Exit fullscreen mode

So in the end we get:

  • website with changeable languages,
  • can set SEO friendly urls,
  • only one app.get(... for all languages,
  • no page duplicates like domain.com/ru/kategoriya and domain.com/ru/category. Last one will send 404 status because param :category does not match :lang param "ru".

Thank you for attention! Hope this will be helpful for someone!

Top comments (4)

Collapse
 
jkalandarov profile image
Jasurbek Kalandarov

What about database? Do I have to store date in multilanguages in db? For example, products table both in Russian and English, but in different tables? And does the package change api call to the specific table according to the chosen language?

Collapse
 
docodern profile image
Dmitrijs Author

So this package are used with view engines and get content for each language from separate language files. Check GitHub code example (link on top of the post).
This should not change any third party API calls. So if you use data base with date, picture, this should be called for each language from one table.

Collapse
 
peterugah profile image
peterugah

Cool

Collapse
 
docodern profile image
Dmitrijs Author

Thank you!

Visualizing Promises and Async/Await 🀯

async await

☝️ Check out this all-time classic DEV post