Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Cover image for How to make multilingual node.js app?!
Dmitrijs
Dmitrijs

Posted on • Originally published atnpmjs.com

     

How to make multilingual node.js app?!

Hello!

You are looking how toeasy makemultilingual 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 foundon Github.
Checknpmjs.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 modeExit fullscreen mode

app.js example:

constexpress=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 modeExit fullscreen mode

Next step, we need to configure"smws":

smws.config({languages:['en','ru'],defaultLang:'en'});
Enter fullscreen modeExit 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 --><formaction="/<%= it.smws.lang %>/language"method="post"><buttonclass="en-button"type="submit"name="lang"value="en">EN</button><buttonclass="ru-button"type="submit"name="lang"value="ru">RU</button></form>
Enter fullscreen modeExit fullscreen mode

To receive this language changes, add to yourapp.js:

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

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

GET requests with smws

Next we add our paths toapp.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 modeExit fullscreen mode

smws.split('path') use for your paths where you need to translate and controlmore 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 likedomain.com and with language param likedomain.com/en.

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

If someone visit your websiteusing someurl. For example click somewheredomain.com/ru/kategoriya, page will be rendered inru 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 modeExit fullscreen mode

Language file names must be same with your website languages. In this tutorialen.json andru.json.
Example:

//en.json{    "smws": {            "category": "category",            "lang": "en"    },    "hello": "This is main page in 'EN'"}
Enter fullscreen modeExit fullscreen mode
//ru.json{    "smws": {            "category": "kategoriya",            "lang": "ru"    },    "hello": "Главная страница на 'RU'"}
Enter fullscreen modeExit fullscreen mode

So in the end we get:

  • website with changeable languages,
  • can set SEO friendly urls,
  • only oneapp.get(... for all languages,
  • no page duplicates likedomain.com/ru/kategoriya anddomain.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)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss
CollapseExpand
 
jkalandarov profile image
Jasurbek Kalandarov
QA Automation Engineer
  • Email
  • Location
    Uzbekistan
  • Education
    MBA in Finance
  • Work
    Epam Systems
  • Joined

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?

CollapseExpand
 
docodern profile image
Dmitrijs
Developer
  • Location
    Latvia, Riga
  • Joined

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.

CollapseExpand
 
peterugah profile image
peterugah
  • Location
    Lagos Nigeria
  • Work
    Software Development at Chevron
  • Joined

Cool

CollapseExpand
 
docodern profile image
Dmitrijs
Developer
  • Location
    Latvia, Riga
  • Joined

Thank you!

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

Developer
  • Location
    Latvia, Riga
  • Joined

Trending onDEV CommunityHot

DEV Community

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

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp