How to build unminified frontend

Important

These guides only work for package installation. If you’re using Fleio deployed with Docker you will have to build the frontend as described below, and then you will have to build a custom frontend image as described in Adding or changing files in Fleio Docker images.

Manual changes in Docker containers (other than Fleio setting files that are stored in Docker volumes) are not persistent and will be overwritten at upgrade.

How to build unminified frontend (Angular)

After you have the unminified sources you will have to apply the custom code that you might want to add / remove. After that you need to compile it and replace the old angular frontend with the custom one.

In order to compile the frontend you will need the following prerequisites installed: npm, @angular/cli.

apt-install npm or yum install npm (depending on your OS)
npm install -g n
n stable
npm install -g @angular/cli (answer with N to all questions)

Please note that after changing the node version to stable you need to reload the PATH variable.

After you have installed all the dependencies and you have the unminified resources, you need to apply all the changes that you want to the angular files. After the development process is finished you need to build the frontend using the following recommended procedure, for staff frontend.

Staff frontend (Angular)

First of all, change into the directory containing the unminified resources and copy them in an independent directory:

mkdir /preferred-path/ngfrontend-changed
cp --recursive /path/to/unminified/files/ngfrontend/* /preferred-path/ngfrontend-changed

After you copied the files you need to change directory in /preferred-path/ngfrontend-changed and run the following commands:

npm install
ng build --configuration=production-staff

If everything went ok you should now have a new folder called dist. This folder contains the complied sources and we need to do some changes before replacing the original fleio sources.

Go in ./dist/ngfrontend/staff/assets/config-base and edit staff.config.json and replace "backendApiUrl": "//localhost:8000/staffapi/", with the correct backend API URL (should be “//frontend-url/backend/staffapi”).

Move the original file locations in order to have a backup by running:

mv /var/webapps/fleio/frontend/staff /var/webapps/fleio/frontend/staff.old

This will move the original angular staff resources in staff.old folder.

Now move the new complied resources to /var/webapps/fleio/frontend/staff/ and apply the correct owner:

cd /preferred-path/staff-changed/dist/
mv staff /var/webapps/fleio/frontend/staff
chown -R fleio:fleio /var/webapps/fleio/frontend/staff

Last step is to create the /var/webapps/fleio/frontend/staff/assets/config and copy the staff.config.json file from /var/webapps/fleio/frontend/staff/assets/config-base:

mkdir /var/webapps/fleio/frontend/staff/assets/config
cp /var/webapps/fleio/frontend/staff/assets/config-base/staff.config.json /var/webapps/fleio/frontend/staff/assets/config/

Now you should have your changed angular staff working. If you encounter any issues you can open a new support ticket and the team will assist you with them.

Enduser frontend (Angular)

First of all, change into the directory containing the unminified resources and copy them in an independent directory:

mkdir /preferred-path/ngfrontend-changed
cp --recursive /path/to/unminified/files/ngfrontend/* /preferred-path/ngfrontend-changed

After you copied the files you need to change directory in /preferred-path/ngfrontend-changed and run the following commands:

npm install
ng build --configuration=production-enduser

If everything went ok you should now have a new folder called dist. This folder contains the complied sources and we need to do some changes before replacing the original fleio sources.

Go in ./dist/ngfrontend/enduser/assets/config-base and edit enduser.config.json and replace "backendApiUrl": "//localhost:8000/api/", with the correct backend api url (should be “//frontend-url/backend/api”).

Move the original file locations in order to have a backup by running:

mv /var/webapps/fleio/frontend/enduser /var/webapps/fleio/frontend/enduser.old

This will move the original angular enduser resources in enduser.old folder.

Now move the new complied resources to /var/webapps/fleio/frontend/enduser/ and apply the correct owner:

cd /preferred-path/enduser-changed/dist/
mv enduser /var/webapps/fleio/frontend/enduser
chown -R fleio:fleio /var/webapps/fleio/frontend/enduser

Last step is to create the /var/webapps/fleio/frontend/enduser/assets/config and copy the enduser.config.json file from /var/webapps/fleio/frontend/enduser/assets/config-base:

mkdir /var/webapps/fleio/frontend/enduser/assets/config
cp /var/webapps/fleio/frontend/enduser/assets/config-base/enduser.config.json /var/webapps/fleio/frontend/enduser/assets/config/

Now you should have your changed angular enduser working.

If you encounter any issues you can open a new support ticket and the team will assist you with them.