How to replace strings in Angular frontend

With 2021.05 release we have added the possibility to replace strings from Fleio, with your custom ones. In order to do that we will have to define a new language called “en-replace” which will contain the custom strings, besides the default ones.

First of all, you will have to get the default translations from our public repository: https://github.com/fleio/fleio-i18n

If you check the fleio-i18n/translations/ngfrontend/src/assets/locale/ location, you will see that there are multiple templates that can be used to get the String ID and the String:

  • template-enduser.json
  • template-reseller.json
  • template-staff.json
  • template.json

If you inspect the template-enduser.json you will see that the translations format will be:

{
  "locale": "en-US",
  "translations": {
    "STRING ID": "STRING"
  }
}

Warning

You should create and edit the following files as fleio user. This ensures that no file permission issue later occurs. If you want to know more about file permissions in a docker deployment, see Docker installation file permissions.

You should switch to fleio user before continuing:

sudo -i -u fleio

As an example, we will change the SIGN IN text with SIGN IN - CHANGED STRING. First, you will have to create a new json file called messages.en-replace.json in the /home/fleio/compose/custom directory. If the custom directory does not exist, please create it.

Now, if you inspect the template.json file, you will see that the SIGN IN string has 5207635742003539443 ID. In the messages.en-replace.json file we will have to add the following:

{
  "locale": "en-US",
  "translations": {
    "5207635742003539443": "SIGN IN - CHANGED STRING"
  }
}

The next step would be to create the Dockerfile, in the /home/fleio/compose/custom directory.

touch /home/fleio/compose/custom/Dockerfile

Insert the following code in the /home/fleio/compose/custom/Dockerfile file. This will ensure that on each recreate / upgrade, the fleio_frontend_1 image will contain the changed strings.

ARG FLEIO_DOCKER_HUB
ARG FLEIO_RELEASE_SUFFIX

FROM ${FLEIO_DOCKER_HUB}/fleio_frontend${FLEIO_RELEASE_SUFFIX}

# we're defining the Fleio installation path in one place and we're using it below
ENV INSTALL_PATH="/var/webapps/fleio"

COPY messages.en-replace.json "$INSTALL_PATH/frontend/enduser/assets/locale/messages.en-replace.json"

If you want to change strings for staff or reseller panel, you will have to change the path where you’re copying the messages.en-replace.json file to:

  • staff: $INSTALL_PATH/frontend/staff/assets/locale/messages.en-replace.json
  • reseller: $INSTALL_PATH/frontend/reseller/assets/locale/messages.en-replace.json # only if enabled

We will also have to add the following code to the /home/fleio/compose/docker-compose.override.yml file:

# Add here your docker-compose customizations
# docker-compose.override.yml is not overwritten by Fleio
# (while docker-compose.yml may be OVERWRITTEN on Fleio upgrades)

version: "3.7"

services:
  frontend:
    build:
      context: ./custom/
      dockerfile: Dockerfile
      args:
        - FLEIO_DOCKER_HUB
        - FLEIO_RELEASE_SUFFIX
    image: fleio_frontend_custom

Now we will build and apply the customizations:

# make sure you're in the directory where docker-compose files are
cd /home/fleio/compose

# build your image
docker-compose build

# apply your changes to the running frontend
docker-compose up -d

After we have re-build the frotend image, we will have to change the default language to en-replace for the panels that we have added the changed strings (in our case the enduser.config.json):

fleio edit enduser.config.json
fleio edit staff.config.json
fleio edit reseller.config.json # only if reseller is enabled

Now if you access the enduser Angular panel you should see that the SIGN IN button text has changed.