Express

This guide provides a step by step tutorial on how to integrate the Translation Exchange SDK with your Node Express based web applications and allows you to translate your site into multiple languages.

Before Getting Started

Make sure you have a Translation Exchange account, and have created a project in your dashboard.

1. Install the SDK

The Tml Express SDK can be installed using NPM:

npm install "tml-express"  

2. Configure the SDK

Configure the SDK with the required tml.init() middleware. Make sure to use your project key from the Dashboard integration section.

var express       = require('express');  
var cookieParser  = require('cookie-parser');  
var tml           = require('tml-express');

var app = express();  
app.use(cookieParser());

app.use(tml.init({  
  key: "YOUR-PROJECT-KEY"
}));

For the best performance, translations should be cached in your application. Multiple cache adapters are supported.

To learn more about configuring the SDK, go to the Express Configuration section of the docs.

3. Add the Translation Exchange Script

Copy and paste the following code between the <head> and </head> tags of your layout file(s).

// Example uses EJS
<%- tml_scripts() %>  

Use the following code anywhere on your page to add a language selector. Optionally, you can pass the type of selector you want.

<%- tml_language_selector("default") %>  

There are a few language selectors to choose from. You can view all the available selectors or learn how to create your own in the Language Selectors section of the docs.

4. Mark Up Your Content

Now you can use our helper methods and TML (Translation Markup Language) to translate your strings.

The following examples use EJS templates for views:

<%- tr("Hello World") %>  
// Hello World

<%- tr("You have {count || message}", {count: 5}) %>  
// You have 5 messages

<%- tr("{actor} sent {target} [bold: {count || gift}]", {actor: "John", target: "Jane", count: 5}) %>  
// John sent Jane <bold>5 gifts</bold>

<%- tr("{actor} uploaded [bold: {count || photo}] to {actor | his, her} photo album.", {actor: current_user, count: 1}) %>  
// Jill uploaded <bold>1 photo</bold> to her photo album

Learn more about marking up your content in the Translation Markup section of the docs

5. Activate Translation Mode

Once the script has been added to your layout you can start using translation mode. To activate translation mode, press CTRL+Shift+i on your keyboard.

Once translation mode has been activated, the content of your application will be synchronized with Translation Exchange and your strings will appear in your Dashboard.

Make sure to browse your entire application while in translation mode to ensure that all your content gets sent to the Translation Exchange service.

Now that your strings have been synchronized, you can start translating. Go to the Translation Options section of the docs to learn more about the different ways your content can be translated.

Make sure to Publish your translations so that they can be seen by your users.