Set up Magento environment for JavaScript development

Before diving into Knockout.js within Magento, it’s crucial to set up your development environment properly. This lesson walks you through the necessary steps.

Chrome Dev Tools

First, open up the Chrome Dev Tools. You can do this using the shortcut Command+Option+i on macOS or Ctrl+Shift+i on Linux or Windows. Alternatively, right-click anywhere on the page, select Inspect, and then click the Network tab.

Disable Cache

Chrome caches a lot of files, so to avoid headaches with Chrome caching JavaScript files in Magento, make sure the “Disable cache” checkbox is checked. This is usually unchecked by default.

Console Tab

While working with JavaScript in Magento, you’ll typically want to have the Console tab open to inspect any errors or other debugging information. Keep in mind that the Inspector Tools must remain open to disable cache.

You can also directly open the console using the shortcut Command+Option+j on macOS or Ctrl+Shift+j on Linux or Windows.

Disable Magento Caches

To disable some Magento caches, open up the terminal and type bin/magento cache:status. This command will output all the caches and their status, with a 1 representing enabled caches.

You’ll want to disable any caches that will constantly change as you work, such as layout, block_html, and full_page. To do this, type bin/magento cache:disable layout block_html full_page.

Note: If you’re using the docker-magento development environment setup, you don’t need to disable these caches. The cache clean module does this for you automatically, purging affected caches whenever a file is changed.

Setting Deployment Mode

Finally, ensure that the deploy mode is set correctly by typing bin/magento deploy:mode:show. This command will display the current deployment application mode, which should be set to “developer.” If it’s set to “default,” change it by typing bin/magento deploy:mode:set developer. This enables developer mode, ensuring that the correct compilation processes and cache flushing strategies are set up for development.

After completing these steps, your development environment should be ready for JavaScript development with Knockout.js in Magento.