CODEWITHSUNDEEP
node.jsexpressroutesmultilingual
supercell
supercell

Reputation: 309

ExpressJS multi-language routes

I just got into NodeJS/ExpressJS development and I'm looking for a way to create multi language routes using Express.

app.get('/:language(en|nl)', function (req, res) {
    res.render('home', {
    });
});

app.get('/:language(en|nl)/news', function (req, res) {
    res.render('news', {
    });
 });

The idea is to extract the language and use that in a MySQL query to get the data in the requested language. The below piece of code gets me the language parameter.

req.params.language

This leaves me with two questions:

1) Is it possible to use middleware to extract the language, instead of doing this in each route?

2) If my webpage contains two country flag icons to switch between languages, what are the best practises in to make sure it goes back to the same page but in a different language, and how do I build the href in the html? I'm planning to use handlebars as the template engine.

Upvotes: 2

Views: 3768

Answers (1)

supercell
supercell

Reputation: 309

This is what I've come up with so far, and it's fairly easy.

It makes switching between languages possible, and also keeps the user on the same page when they switch to another language.

It's not done yet, but it's a start.

This only answers my second question. The language parameter still has to be supplied in each route, but I don't really mind that for now.

app.js

var express = require('express');
var app = express();

var handlebars = require('express-handlebars')
.create({
    defaultLayout: 'main'
});
app.engine('handlebars', handlebars.engine);
app.set('view engine', 'handlebars');

app.set('port', process.env.PORT || 3000);

app.get('/', function (req, res) {
res.redirect('/nl');
});

app.get('/:language(en|nl)', function (req, res) {
res.render('home', {
    language: req.params.language,
    originalUrl: ''
});
});

app.get('/:language(en|nl)/news', function (req, res) {
res.render('news', {
    language: req.params.language,
    originalUrl: 'news'
});
});

// custom 404 page
app.use(function (req, res) {
res.type('text/plain');
res.status(404);
res.send('404 - Not Found');
});

// custom 500 page
app.use(function (err, req, res, next) {
console.error(err.stack);
res.type('text/plain');
res.status(500);
res.send('500 - Server Error');
});

app.listen(app.get('port'), function () {
console.log('Express started on http://localhost:' +
    app.get('port') + '; press Ctrl-C to terminate.');
});

main.handlebars

<!doctype html>
<html>

<head>
<title>Hello World</title>
<style type="text/css">
    .menu {
        margin: 0;
    }
    .menu > li  {
        display: inline-block;
        margin: 0;
        list-style: none;
    }
</style>
</head>

<body>
<ul class="menu">
    <li><a href="/{{language}}">Home</a></li>
    <li><a href="/{{language}}/news">News</a></li>
    <li><a href="/nl/{{originalUrl}}">Dutch</a></li>
    <li><a href="/en/{{originalUrl}}">English</a></li>
</ul>
{{{body}}}
</body>

</html>

home.handlebars

<h1>Home</h1>
<a href="/{{language}}/page1.html" >Navigation 1</a>
<a href="/{{language}}/page2.html" >Navigation 2</a>
<a href="/{{language}}/page3.html" >Navigation 3</a>

news.handlebars

<h1>News</h1>
<h2>{{language}}</h2>

Upvotes: 3

Related Questions