In this you translate
the user interface (UI) of a Magnolia app to another language by creating a new i18n properties file for the language and adding the file to the app. Don't worry if not a developer. You don't need a development environment – all you need is language skills and Magnolia.
The app whose UI labels and messages you are going to translate is the Bookshelf app, created in the My first content app tutorial. The labels and messages are in English and in this tutorial you internationalize the app for Spanish-speaking users.
Prerequisites
The Bookshelf app is meant to be run as an app in Magnolia, so first you must install Magnolia. Before installing Magnolia, check that the following system components are already installed on your system.
Java
Magnolia needs a Java Runtime Environment (JRE) version 8 or higher. Type java -version
in a terminal or command prompt. If the system reports a version number, Java is installed on your computer.
$ java -version
java version "10.0.1" 2018-04-17
Java(TM) SE Runtime Environment 18.3 (build 10.0.1+10)
If you don't have Java, install it:
Mac OS X
Java is not pre-installed on Mac OS X 10.7 and later. Download the latest Java from Oracle.
Windows
On Windows you need a Java SE Development Kit (JDK). The Java Runtime Environment (JRE) is not enough because the Tomcat application server does not recognize it.
What is the difference?
- JRE is for users who run Java programs on their computer.
- JDK is for developers who write Java-based applications.
Download and install JDK. By default JDK is installed in C:\Program Files\Java\jdk-10.0.xx\
. You can choose another location.
Check JAVA_HOME environment variable
- Open the command prompt.
- Type
set
and press ENTER. - Find
JAVA_HOME
in the command output and verify that the path points to your JDK installation directory, for example C:\Program Files\Java\jdk-10.0.xx
. - If
JAVA_HOME
is missing or it points to the wrong directory, see Set JAVA_HOME environment variable below.

Set JAVA_HOME environment variable
- Right-click My Computer and select Properties.
- Go to the Advanced tab.
(In Windows 7+, right-click Computer and select Advanced System Settings, then Environment variables.) - If the
JAVA_HOME
environment variable does not exist in User variables or System variables, create it:
- User variables apply to the currently signed-in user only. Create
JAVA_HOME
here if you want it to apply only to the currently logged in user. These variables take precedence over system variables. - System variables apply to all users. Create
JAVA_HOME
here if you want it to apply to all users. You must be an administrator to modify a system environment variable.

- Set the value of
JAVA_HOME
to the path of your JDK installation directory, for example C:\Program Files\Java\jdk-10.0.xx
. - Optional step: Add the Magnolia
bin
directory to the PATH
variable, for example C:\Program Files\magnolia\apache-tomcat-x.y\bin
. Setting the PATH
allows you to issue the Magnolia start
and stop
commands from anywhere without navigating to the installation directory first. Separate the path from existing paths with a semicolon ( ; ). If you do this, you also need to add CATALINA_HOME
to environment variables. Set the value of CATALINA_HOME
to the Tomcat installation directory, for example C:\Program Files\magnolia\apache-tomcat-x.y
- Click OK.
- Go back to Check JAVA_HOME environment variable above and test that the variable is found and has the correct value. You need to open a new command prompt since environment variables are session specific.
Alternatively you can set JAVA_HOME with a batch file. Add this line to /apache-tomcat/bin/magnolia_control.bat
:
set JAVA_HOME=C:\Program Files\Java\jdk-10.0.xx
The set
command creates the JAVA_HOME
environment variable and sets its value to the JDK directory. The command is executed when Magnolia starts.
Linux
Download the latest Java from Oracle. The installation directory varies from one Linux system to another. For example, on Ubuntu Linux 10 the OpenJDK Runtime Environment is installed in /usr/lib/jvm/java-10-openjdk/jre
by default.
Solaris
Download the latest Java from Oracle. You can install it in any directory such as /usr/java
.
Magnolia CLI is an npm package providing a command line interface (CLI) tool to set up and facilitate light development with Magnolia. The Magnolia CLI tool runs on Node.js. If you do not have Node.js installed, go to Node.js and download and install the latest LTS version.
To check the version of your node installation, run the following command in a shell:
Magnolia CLI
Run the following command in a shell to install Magnolia CLI:
npm install @magnolia/cli -g
Depending on your permissions and the location where you have installed Node.js, you may have to execute the command above with root permissions. Without installation permissions you will notice messages such as npm ERR!
in the shell.
On Linux or Mac OS X to run this command as root use:
sudo npm install @magnolia/cli -g
If the installation is successful, you see the following or a similar output in the shell:
Expand to see an example output of an npm installation
/usr/bin/mgnl -> /usr/lib/node_modules/@magnolia/cli/bin/mgnl.js
> spawn-sync@1.0.15 postinstall /usr/lib/node_modules/@magnolia/cli/node_modules/spawn-sync
> node postinstall
+ @magnolia/cli@2.2.0
added 209 packages in 11.40
Once you have installed Magnolia CLI, test the installation by running the following command in the shell:
Expand to show the output of mgnl help
Usage: mgnl <command> [options]
A tool to setup and facilitate light development with Magnolia CMS
Options:
-v, --version output the version number
-h, --help output usage information
Commands:
jumpstart download and setup a Magnolia CMS instance for development.
start start up a Magnolia CMS instance. To stop it, enter CTRL+C
add-availability add component availability.
build scan a node_modules folder for npm packages with the keyword "magnolia-light-module" (in package.json) and extract them to a directory of choice.
create-app create an app.
create-block create a block.
create-component create a component and optionally add availability for it.
create-content-type create a content type.
create-light-module create a light module.
create-page create a page template.
create-virtual-uri create a virtual uri mapping.
customize-local-config extract "mgnl-cli-prototypes" folder and "mgnl-cli.json" file to customize CLI configuration.
install install a light module from npm to the local Magnolia instance.
search search for a light module on npm.
tab-completion install tab autocomplete feature for Bash, zsh or PowerShell
version display mgnl and node.js versions
help [cmd] display help for [cmd]
mgnl: 3.1.0 node: v8.10.0 os: linux
In this you ne e the Bookshelf app from our repository into your local Magnolia installation. You can check that G installed on your system by executing the git --version
command. If it is not installed, go to https://git-scm.com/downloads page and install it.
Installing and starting Magnolia
Now install Magnolia.
Installing Magnolia
Use the jumpstart
command to install Magnolia. This command downloads, unpacks and pre-configures a Magnolia bundle of your choice.
To install Magnolia:
Change to the directory to where you want to install the Magnolia bundle. For example:
cd /Users/<username>/dev/
Execute the Magnolia CLI jumpstart
command:
containing Magnolia Community Edition bundled with the Travel Demo and a Tomcat server. It creates folders for the Tomcat server and for the light modules according to the CLI configuration.
Once the setup operation is complete, you should see a message similar to this one:
info Magnolia has been successfully setup for light development!
info You can now open a new terminal tab or window and start it up with the CLI command 'mgnl start'
info Magnolia will be ready after a few seconds at localhost:8080/magnoliaAuthor. Username and password is superuser
The following files and folders are created:
dev/
├── apache-tomcat/
│ ├── bin/
│ ├── conf/
│ ├── lib/
│ ├── logs/
│ ├── temp/
│ └── webapps/
├── light-modules/
└── downloads/
Start Magnolia
Use the mgnl start
command to start Magnoolia. In the parent directory of light-modules
, enter:
The command installs and starts Magnolia. This is complete when you see a message like Server startup in 112737 ms
. You can then access the UI of the Author instance.
Log into the Author instance
Go to http://localhost:8080/magnoliaAuthor
and log in to the Author instance with:
- Username:
superuser
- Password:
superuser
Installing the Bookshelf app
- Go to the
dev/light-modules/
directory. the
bookshelf
Git repository:
git clone -b release/6.1 --single-branch https://git.magnolia-cms.com/scm/documentation/bookshelf.git
- Make sure the app is accessible in the App launcher: Open the Configuration app and verify that
bookshelf-app
is a subnode of the ui-admincentral/config/appLauncherLayout/groups/edit/apps
node. - In the App launcher, . The app should now appear in the group.
- In your user profile, set the language preference to Spanish. Log out and into Magnolia again. Open the Bookshelf app. Only some of the labels are shown in Spanish. These are typically the more generic message and label keys coming from the UI framework:

Translating the app UI to Spanish
- Go to the
dev/light-modules/booshelf/i18n/
subfold
the English values for the . -
bookshelf-messages_es.properties
. In the new file, translate the values from English to Spanish and save your work.
Example translation:
# App label
bookshelf-app=Estantería
# Book browser subapp labels.
bookshelf-app.browser.label=Navegador de libros
bookshelf-app.browser.actionbar.sections.root.label=Acciones
bookshelf-app.browser.actionbar.sections.item.label=Acciones
bookshelf-app.browser.actionbar.sections.folder.label=Acciones
bookshelf-app.browser.actionbar.sections.deletedItem.label=Acciones
bookshelf-app.browser.actionbar.sections.deletedFolder.label=Acciones
bookshelf-app.browser.actions.addItem.label=Añadir libro
bookshelf-app.browser.actions.confirmDeletion.label=Borrar
bookshelf-app.browser.actions.editItem.label=Editar
bookshelf-app.browser.actions.rename.label=Renombrar
bookshelf-app.browser.actions.addFolder.label=Añadir estante
bookshelf-app.browser.actions.confirmDeleteFolder.label=Borrar
bookshelf-app.browser.actions.editFolder.label=Renombrar
bookshelf-app.browser.actions.moveFolder=Mover
bookshelf-app.browser.actions.confirmDeleteFolder.confirmationHeader=¿Borrar {0,choice,1#estante|1< {1} estantes}?
bookshelf-app.browser.actions.confirmDeleteFolder.confirmationMessage={0,choice,1# Se borrará el estante selectionado.|1< Se borrarán los estantes selectionados.}
bookshelf-app.browser.actions.confirmDeletion.confirmationHeader=¿Borrar {0,choice,1#libro|1< {1} libros}?
bookshelf-app.browser.actions.confirmDeletion.confirmationMessage={0,choice,1#Se borrará el libro selectionado.|1< Se borrarán los libros selectionados.}
bookshelf-app.browser.actions.confirmDeleteFolder.proceedLabel=Sí, borrar
bookshelf-app.browser.actions.confirmDeleteFolder.cancelLabel=No
bookshelf-app.browser.actions.duplicate=Duplicar
bookshelf-app.browser.actions.move=Mover
bookshelf-app.browser.actions.copy=Copiar
bookshelf-app.browser.actions.paste=Pegar
bookshelf-app.browser.views.treeview.name.label=Nombre del estante o Nombre de catalogación del libro
bookshelf-app.browser.views.listview.name.label=Nombre de catalogación
bookshelf-app.browser.views.listview.path.label=Localización del libro
# Book detail subapp labels and descriptions.
bookshelf-app.bookDetailsTab.label=Detalles del libro
bookshelf-app.bookDetailsTab.name.label=Nombre de catalogación
bookshelf-app.bookDetailsTab.name.description=Éste campo es obligatorio. Su valor se utiliza para crear un nombre único de catalogación de libro, el cual será visible en la subapp NAVEGADOR DE LIBROS y almacenado en el <i>books</i> workspace.
bookshelf-app.bookDetailsTab.authors.label=Autor(es)
bookshelf-app.bookDetailsTab.ed.label=Autor(es) en función editorial
bookshelf-app.bookDetailsTab.ed.buttonLabel=
bookshelf-app.bookDetailsTab.ed.description=Marque la casilla si la función principal de "Autor(es)" es editorial.
bookshelf-app.bookDetailsTab.title.label=Título completo
bookshelf-app.bookDetailsTab.description.label=Descripción
bookshelf-app.bookDetailsTab.publisher.label=Editor
bookshelf-app.bookDetailsTab.publish_date.label=Fecha de publicación
bookshelf-app.bookDetailsTab.publish_date.description=Si solo conoce el año de publicación, introduzca la fecha en formato AAAA-01-01.
bookshelf-app.bookDetailsTab.isbn13.label=ISBN-13
bookshelf-app.bookDetailsTab.isbn13.description=Si hay un ISBN-13 disponible para el libro, introduzcalo sin guiones ni espacios.
bookshelf-app.bookDetailsTab.isbn13.validation.errorMessage=El número ISBN-13 contiene 13 caracteres. Los 12 primeros caracteres solo pueden ser númeréricos, el último carácter puede ser un número o "X". El número tiene que comenzar con 978 o 979.
bookshelf-app.detail.actions.cancel=Cancelar
bookshelf-app.detail.actions.commit=Guardar datos
# Other messages and button labels
ui-admincentral.dateField.timeZone.description=AAAA-MM-DD
ui-framework.actions.copyItem.successOneItemCopied=El elemento ha sido copiado.
ui-framework.actions.copyItem.successManyItemsCopied={0} elementos han sido copiados.
ui-framework.actions.pasteItem.success={0} {0,choice,1#elemento ha sido pegado|1< elementos han sido pegados} en {1}.
confirmation.delete.yes=Sí, borrar
confirmation.no=No
confirmation.delete.modified.message=<b>Aviso</b> <br/>Los siguientes subnodos han sido modificados pero no publicados. Si se han movido de localization, no se eliminarán correctamente de las instancias públicas. <br/> <br/> Subnodos modificados:
Note that the # Other messages and button labels
section contains additional Spanish message keys. These have been added because they are defined in other Magnolia modules and affect the action, field, and button labels in the Bookshelf app.
Testing the translation
When you save the file, Magnolia immediately detects the change. Refresh your browser to see the new app labels.

Contribute your translations to Magnolia
Have you translated a Magnolia app? Join the Internationalization effort. Send us the translated .properties
files. We will add them to the product.