How to build unminified frontend (angularjs)

In order to get access to unminified verison you will need to have a perpetual license (owned). If you have such license and you want to customize the frontend by your needs you will need the unminified version (please open a support ticket and we will provide you the needed resources).

After you have the unminified sources you will need to globally install the following dependencies:

apt-get install npm OR yum install npm (depending on OS)
npm install -g n
n 8.10.0
npm install -g bower gulp-cli

The next step is to install the bower/npm dendencies. Go in the directory containing the unminified sources and run:

npm install
bower install (use --allow-root if you're root)
gulp build

You should have no errors. However, if something does not work please open a support ticket and we will assist you. After the build is complete you will have a new directory called “.tmp”. In this folder you will have the build directory which contains the new frontend.

Next step is to replace the old frontend with the new one. We recommend to use the following procedure:

mv .tmp/build/site /var/webapps/fleio/frontend/site.new
cd /var/webapps/fleio/frontend/
mv /var/webapps/fleio/frontend/site /var/webapps/fleio/frontend/site.old
mv /var/webapps/fleio/frontend/site.new /var/webapps/fleio/frontend/site
cp /var/webapps/fleio/frontend/site.old/constants.js /var/webapps/fleio/frontend/site/constants.js
cp /var/webapps/fleio/frontend/site.old/staff/constants.js /var/webapps/fleio/frontend/site/staff/constants.js

Now you should have your custom frontend working. If you’re receiving any errors please contact us.

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 developement process is finished you need to build the frontend using the following recommended procedure, for newstaff and reseller frontend.

Reseller frontend

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

mkdir /prefered-path/reseller-changed
cp tslint.json /prefered-path/reseller-changed/
cp tsconfig.spec.json /prefered-path/reseller-changed/
cp tsconfig.json /prefered-path/reseller-changed/
cp tsconfig.app.json /prefered-path/reseller-changed/
cp package.json /prefered-path/reseller-changed/
cp package-lock.json /prefered-path/reseller-changed/
cp browserslist /prefered-path/reseller-changed/
cp angular.json /prefered-path/reseller-changed/
cp --recursive src /prefered-path/reseller-changed/

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

npm install
ng build --configuration=production-reseller

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/reseller/assets/config-base/ and edit reseller.config.json and replace "backendApiUrl": "//localhost:8000/resellerapi/", with the correct backend api url (should be “//frontend-url/backend/resellerapi”).

Make a backup of the original resources by running mv /var/webapps/fleio/frontend/reseller /var/webapps/fleio/frontend/reseller.old. This will move the original reseller resources in reseller.old folder.

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

cd /prefered-path/reseller-changed/dist/ngfrontend/
mv reseller /var/webapps/fleio/frontend/eseller
chown -R fleio:fleio /var/webapps/fleio/frontend/reseller

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

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

Angular staff

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

mkdir /prefered-path/staff-changed
cp tslint.json /prefered-path/staff-changed/
cp tsconfig.spec.json /prefered-path/staff-changed/
cp tsconfig.json /prefered-path/staff-changed/
cp tsconfig.app.json /prefered-path/staff-changed/
cp package.json /prefered-path/staffchanged/
cp package-lock.json /prefered-path/staff-changed/
cp browserslist /prefered-path/staff-changed/
cp angular.json /prefered-path/staff-changed/
cp --recursive src /prefered-path/staff-changed/

After you copied the files you need to change directory in /prefered-path/staff-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 /prefered-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.