Prep dev environment for theming

Just as with JavaScript and PHP development, there are specific updates we need to make to make our development environment more friendly for theme development.

The first thing we must always do, no matter what sort of development we are doing, is to make sure developer mode is enabled. To find out what the current deploy mode is set to, we can run:

bin/magento deploy:mode:show

We can see that we are currently in developer mode. If we were in some other mode, we can set this to developer mode by typing:

bin/magento deploy:mode:set developer

This ensures that Magento’s backend processes are set up optimally for development.

Cache types

We also need to turn off certain caches that could stop our changes from showing up on the frontend. We can get all of the available cache types by running:

bin/magento cache:status

We won’t go into extreme detail about all the caches, but let’s look at the layout, block_html, full_page and translate caches.

These are the caches that typically have the biggest impact on frontend development processes, so we can just disable them during development so we don’t need to worry about anything cache-related.

Disable caches

We can disable these caches from the command line by executing:

bin/magento cache:disable layout block_html full_page translate

Disable Browser Cache

It’s also very possible that certain CSS or JavaScript changes we make will be cached by our web browser. There's nothing more frustrating than making changes and not knowing why they didn't take effect. The browser is probably to blame because it helps to store these assets.

An easy way to disable the browser cache is to open the Dev Tools, and go to the Network tab. Look for the Disable Cache box, and check it:

Now, all you need to do is keep the browser dev tools open at the bottom of the screen. This may be a bit annoying if you haven’t done this in the past, but if you make it smaller and just always keep it open like this at the bottom of the screen, you won’t need to ever worry about the browser long-caching static assets such as CSS & JavaScript.