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.