In this post we will show you how to create a simple Node.js application using Express.js, EJS templates and Bootstrap. We will then translate our application using TML syntax in and host our translations on Translation Exchange.

Creating Node.js Application

Let’s start by creating a simple Node.js application.

[shell title=”Shell”]
$ mkdir my-app
$ cd my-app
$ npm init
[/shell]

Once you answer all of the questions in the project creation wizard, you will end up with a package.json that looks something like this:

[js title=”package.json”]
{
“name”: “my-webapp”,
“version”: “0.0.0”,
“description”: “My app”,
“main”: “app.js”,
“scripts”: {
“test”: “echo \”Error: no test specified\” && exit 1″
},
“author”: “”,
“license”: “MIT”
}
[/js]

Let’s add the libraries we want to use:

[shell title=”Shell”]
$ npm i –save express ejs cookie-parser
[/shell]

Open app.js with an editor of your choice and update application details:

[js title=”app.js”]
var express = require(‘express’);
var routes = require(‘./routes/index’);
var cookieParser = require(‘cookie-parser’);

var app = express();

app.set(‘views’, __dirname + ‘/views’);
app.set(‘view engine’, ‘ejs’);

app.use(cookieParser());
app.use(express.static(__dirname + ‘/public’));

app.use(‘/’, routes);

app.use(function(req, res, next) {
var err = new Error(‘Not Found’);
err.status = 404;
next(err);
});

app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render(‘error’, {
message: err.message,
error: err
});
});

app.listen(8000);
[/js]

Let’s create a default router for our application.

[shell title=”Shell”]
$ mkdir routes
$ edit routes/index.js
[/shell]

[js title=”routes/index.js”]
var express = require(‘express’);
var router = express.Router();

router.get(‘/’, function(req, res) {
res.render(‘index’);
});

module.exports = router;
[/js]

And finally, let’s add a view at views/index.ejs. For our app, we will use the “Jumbotron” bootstrap template.

[shell title=”Shell”]
$ mkdir views
$ edit views/index.ejs
[/shell]

[html title=”views/index.ejs”]

[/html]

Let’s start the server and view our app:

[shell title=”Shell”]
$ node app.js
$ open “http://localhost:8000”
[/shell]

We should see our sample template render as follows:

Translating Node.js Application

Let’s now translate this template to a few languages using TML. We start by adding the tml-express package.

[shell title=”Shell”]
$ npm i –save tml-express
[/shell]

Then let’s add TML middleware to our app.js file before the router middleware.

[js title=”app.js”]
var cookieParser = require(‘cookie-parser’);
var tml = require(‘tml-express’);

app.use(cookieParser());
app.use(tml.init({
key: “YOUR_PROJECT_KEY”,
}));

…
app.use(‘/’, routes);
[/js]

We now need to register an application on Translation Exchange and get the project token. Visit your dashboard at dashboard.translationexchange.com and create a project:

After you create a project, you will be presented with the project token:

Copy the access token and paste it in your tml initialization code:

[js title=”app.js”]
app.use(tml.init({
key: “YOUR-PROJECT-KEY”,
}));
[/js]

We now can markup the content we want to translate and activate the translation library:

[html title=”views/index.ejs” mark=”13,24,34,37,39,47,49,50,51,53,60,61,62,65,66,67,70,71,72,80″]

[/html]

Let’s examine some of the highlighted code. First of all, we have added a line to initialize tml scripts. The scripts (on line 13) provide functionality for in-context translations, key registration and analytics.

Similarly, we have added the default language selector (line 80).

Then we used the “tr” and “trl” function to internationalize all of content we want to translate.

Let’s restart our server and see what we get:

Let’s switch a language to Russian, and activate translation mode. To do so, click on the language selector and choose Russian language. Click on the language selector and choose “Help us translate” button. This will automatically activate translation mode and query the service for the latest translations. Refresh the page again and see what you get.

All of the content that has not been translated yet will appear in red. Everything that has been translated will appear in green. Translation Exchange is working hard to look for the right translations for our app. Refresh again, now you should see more content.

Right-mouse click on any untranslated content and provide a translation yourself:

Click on “Help us translate” and this would deactivate the translation mode. Your site should now be in Russian.

That’s it. Your site is now translated to Russian. Repeat the last couple of steps with as many other languages as you want.

You can find all of the above source code at our GitHub repository:

https://github.com/translationexchange/blog/tree/master/getting-started-with-node-js-express-ejs-bootstrap-and-tml

Our next post will look into caching, sources, performance optimization and some more advanced TML syntax.