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-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 occurs
later. 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, 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 is to create the Dockerfile
, in the /home/fleio/compose/custom
directory.
touch /home/fleio/compose/custom/Dockerfile
Insert the following code in /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
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
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
pull_policy: never
Now we will build and apply the customizations:
# make sure you're in the directory with Docker Compose files
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-built the frontend 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
Now if you access the end-user panel, you should see that the SIGN IN
button text has changed.