1

I am a junior developer and I have acquired a freelance contract to learn Magento 2 Community and customize a storefront for a start-up company.

I am familiar with Sinatra, Rails, and Node; however, Magento, PHP, and LESS are new to me.

So far, I have created a new theme and changed the logo and favicon of the theme.

I am trying to understand how to achieve the shortest feedback loop during the development process. Right now, although I am using Magento 2's developer mode, it seems I have to manually clear cache and deploy static assets to see any changes made in my example CSS file.

I am using Incognito mode in Chrome, so I do not have to clear the browser's cache.

I have the example CSS file at: /var/www/html/app/design/frontend/Gomato/base/web/css/all_stores_style.css

Since this is a custom CSS file, I have also declared this file in: /var/www/html/app/design/frontend/Gomato/base/Magento_Theme/layout/default_head_blocks.xml

The example CSS file includes only:

* { background-color: green; }

I am unable to see the color change until I run the following command from the web root directory: sudo bin/magento setup:static-content:deploy en_CA

Then, I want to modify the color to blue. I edit the above CSS file to:

* { background-color: blue; }

  1. If I reload the web page, the color does not change.
  2. If I deploy again, it still does not change. The CSS file in the pub directory is still the same.

I need to manually delete the file then deploy for Magento to copy the CSS file from the app directory into the pub directory.

Is this the correct development process? I find this painstakingly time consuming. I am used to making a change to a file and reloading the page to see the changes made. Is this possible, without any other steps (clearing cache, deleting a static file, deploying, etc)? Or, is this the Magento "way".

Thank you,

David

David Haley
  • 13
  • 2

1 Answers1

0

2 steps for local frontend feedback loop

1) On your local environment disable Magento Cache.

2) Use Grunt or GULP (Grunt easier setup for me) to compile your LESS styles for the shortest feedback loop. Then you will not need to use sudo bin/magento setup:static-content:deploy en_CA every time. (About 45 minutes - 1 hour if new to LESS I think -> less time if experienced)

Step 3 is optional and was not asked for in OP question but is helpful.

3) You could setup "Live Reload plugin" if you really want it to load automatically. It can detect change on your local files and reload in browser for you.

P.S. You will still need to run the setup:static-content:deploy command on production servers and environments.

camdixon
  • 560
  • 6
  • 19
  • 1
    Thank you.

    I already had Magento Cache disabled.

    I installed Grunt and Guard-LiveReload with the Chrome RemoteLiveReload plugin and it is working as expected. I can modify a LESS file, Guard will automatically compile it to a CSS file in the public directory, and LiveReload will refresh the page and show the changes.

    I am happy now. Thank you!

     – David Haley Dec 11 '16 at 23:55