================================ How to build unminified frontend ================================ .. contents:: :local: :backlinks: none .. 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 :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 (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 staff frontend. 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.