Skip to main content

Quick development guide

After the app is installed, disable the cache and enable debug output.

debug_output => true
templatecache => false
templatecompile => false
modulecompile => false

Compressing JS Files​

Each time you modify any JS file, run this command to compress the JS files.

To compile JS from the lhc_web folder, execute the following. This will compile the main JS and old widget JavaScript files.

  • npm install && gulp

New Frontend Widget​

To compile the new widget V2 (frontend):

  • There are two apps: wrapper and widget.
  • cd lhc_web/design/defaulttheme/widget/wrapper && npm install && npm run build
  • cd lhc_web/design/defaulttheme/widget/react-app && npm install && npm run build

Back Office Application​

The back office consists of multiple mini parts:

  • Dashboard Left toolbar (DashboardChatTabs.js), Group Chat (GroupChat.js), Canned Messages (CannedMessages.js), Mail application (MailChat.js)
    • cd lhc_web/design/defaulttheme/js/admin && npm run build
  • Bot builder application (ReactJS)
    • cd lhc_web/design/defaulttheme/js/react && npm run build
  • Dashboard widgets (Svelte)
    • cd lhc_web/design/defaulttheme/js/svelte && npm run build

Preparing Production Build​

This should be run with all extensions installed. It generates unique hash files including active extensions.

  • Recompile static JS/CSS files. This is required if you change core JS files. It also avoids missing CSS/JS files if more than one server is used.
    • php cron.php -s site_admin -c cron/util/generate_css -p 1 && gulp js-static

One Command to Rule Them All​

I usually run the following command from the lhc_web folder before releasing the next version. It will recompile everything.

cd lhc_web/ && ./deploy.sh

During the development process, make sure you disable the network cache (Network -> Disable cache) in the Chrome developer toolbar.

How to Change the Back Office Style​

  • Override styles.
  • Compile them with steps from Preparing production build.

How to Find Which Files Are Responsible for a Particular URL?​

Follow the instructions on how to override any URL. The same flow applies to figuring out which files are responsible for a particular URL.

Using that flow, you can find which file is responsible for AJAX-based actions.

How to Find Where the Template Is Located?​

Follow the instructions on how to override any template. The same flow applies to figuring out where a template is located.

More useful links: