Code Monkey home page Code Monkey logo

i18n-express's Introduction

i18n-express

Build Status npm version

A simple i18n middleware for Express.js This module just reads all the .json files in a directory. Then calculates the user lang and exposes "texts" variables in your views with the texts in that json.

By default, the user will see the site in the language set by the cookieLangName session. If the session is not set, the language set by the browser will be used.

If the user wants to set the language to spanish for example, he would have to visit http://site.com/?clang=es (clang is defined at paramLangName).

This can be done by using a html 'select' or any other means you want. Once that is done, the cookieLangName session will be updated with the new language and the user will forever see the site in the new language until he decides to set a new language again.

NOTE: When using this module, we recommend also using the geolang-express module, which sets the cookieLangName session to a language based on the visit IP address.

Requirements

  • Node >= 0.12
  • Express.js

Instalation

$ npm install i18n-express

Usage

var i18n=require("i18n-express");

app.use( i18n(options) );

Options

  • translationsPath : (default: i18n) The path where you store translations json files.
  • cookieLangName : (default: ulang) If you provide a cookie name, try to get user lang from this cookie.
  • browserEnable : (default: true) If enabled, try to get user lang from browser headers.
  • defaultLang : (default: en) If all others methods fail, use this lang.
  • paramLangName : (default: clang) Get param to change user lang. ej: visiting 'example.com?clang=es' the lang switchs to 'es'
  • siteLangs : (default: ['en']) Array of supported langs. (posbile values for clang and json files)
  • textsVarName : (default: texts) Name of variable which holds the loaded translations.

Example

Create a directory "i18n" with .json files for each lang. Ej:

  • en.json
  • es.json
  • en-us.json

With translations like this (en.json):

{
"WELCOME_MSG": "Hi! Welcome!",
"CONTACT_TEXT": "More bla"
}

In your Express app.js:

var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var i18n=require("i18n-express"); // <-- require the module

var indexRoutes = require('./routes/index');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use(session({
  secret: 'secret',
  saveUninitialized: true,
  resave: true
}));

app.use(i18n({
  translationsPath: path.join(__dirname, 'i18n'), // <--- use here. Specify translations files path.
  siteLangs: ["en","es"],
  textsVarName: 'translation'
}));
...

app.use('/', indexRoutes);

module.exports = app;

...

Now in your ejs view you have texts object and lang variable with the active language:

<div>
  Choose your language:
  <ul>
    <li><a class="<%=(lang=="es"?"active":"")%>" href="/?clang=es">Spanish</a></li>
    <li><a class="<%=(lang=="en"?"active":"")%>" href="/?clang=en">English</a></li>
  </ul> 

	<p><%=translation.WELCOME_MSG%></p>
  
</div>

Or in your handlebars view:

<div>
  Choose your language:
  <ul>
    <li><a href="/?clang=es">Spanish</a></li>
    <li><a href="/?clang=en">English</a></li>
  </ul> 

	<p>{{translation.WELCOME_MSG}}</p>

</div>

License

MIT

Author

i18n-express's People

Contributors

koalazak avatar peanutbother avatar boiram avatar dependabot[bot] avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.