================================ How to build unminified frontend ================================ .. contents:: :local: .. important:: These guides work only for package installation. If you're using Fleio deployed with docker you will have to build the frontend as described bellow, and then you will have to build a custom frontend image as described in :ref:`change-docker-files`. 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 (angularjs) ============================================ In order to get access to unminified version 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: .. code-block:: python 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 dependencies. Go in the directory containing the unminified sources and run: .. code-block:: python 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: .. code-block:: bash 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. .. code-block:: python 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 newstaff and reseller frontend. Reseller frontend (Angular) --------------------------- First of all, change into the directory containing the unminified resources and copy them in an independent directory: .. code-block:: python 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: .. code-block:: python 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: .. code-block:: python cd /preferred-path/reseller-changed/dist/ngfrontend/ mv reseller /var/webapps/fleio/frontend/reseller 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``: .. code-block:: python 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/ Staff frontend (Angular) ------------------------ First of all, change into the directory containing the unminified resources and copy them in an independent directory: .. code-block:: python 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: .. code-block:: python 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: .. code-block:: bash 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: .. code-block:: python 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``: .. code-block:: python 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: .. code-block:: python 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: .. code-block:: python 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: .. code-block:: bash 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: .. code-block:: python 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``: .. code-block:: python 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.