Prepare your Magento environment for checkout development

Before starting development in the checkout process, it is essential to make a few updates and ensure that the development environment is set up correctly within Chrome.

Chrome DevTools Configuration

1. Open up Chrome DevTools.
2. Go to the Network tab.
3. Ensure the “Disable Cache” checkbox is checked. This prevents Google Chrome from caching JavaScript assets while working.
4. Make sure Chrome DevTools remains open to prevent cache from re-enabling.

Magento Developer Mode and Cache

1. Ensure Magento developer mode is enabled.
2. Turn on caches.
3. Use Magento cache clean (built into the docker-magento project).

The Magento cache clean is a simple file watcher that automatically cleans any affected cache types, greatly aiding in Magento development.

Admin Configuration Updates

To make the development experience more pleasant, make a few updates within the admin settings.

Updating Default Cookie Settings

1. Go to Stores > Configuration.
2. Under General > Web, select “Default Cookie Settings.”
3. Change “Cookie Lifetime” from the default 3600 seconds (1 hour) to 31536000 seconds (1 year).
4. Save the configuration.

Updating Admin Session Lifetime

1. Scroll down to Advanced > Admin.
2. Under Security, change “Admin Session Lifetime” from 900 seconds (15 minutes) to 31536000 seconds (1 year).
3. Save the configuration.

Clearing Cache

1. Go to Cache Management.
2. Clear any invalidated caches to refresh and apply the updated settings.

PhpStorm Configuration

1. Open PhpStorm > Preferences.
2. Go to the Plugins section.
3. Search for and install the Magento PhpStorm plugin. This plugin aids in IntelliSense, autocomplete, and other helpful features.
4. Ensure the plugin is enabled for your project under “PHP Frameworks.”
5. Check the “Enable Magento Integration” box and confirm that it displays the correct version number of Magento.

XDebug Setup

It is a great idea to set up XDebug within PhpStorm before attempting any custom work beyond the lessons in this course. If stuck on a particular issue, XDebug can be used to quickly determine the problem.

With these configurations in place, you should be ready to start development.