PART 1.2.1.3 – Commands in workflow

Command relevant for frontend

m2 = php bin/magento, enter m2 in terminal to see all available commands

Cache

Turn off

php bin/magento cache:disable | m2 cache:disable

Turn on

php bin/magento cache:enable | m2 cache:enable

Flush all

php bin/magento cache:flush | m2 cache:flush

Cleaning cache, page-cache and merged requirejs-config

m2-qc

Cleaning cache, page-cache and merged requirejs-config +  

cleraning generated code and non-symlinked files from static

m2-qcc

Clean all

m2-qccc

 

To avoid issues with static files, you must clean the old files to make sure you get all the changes for the new module. Using m2-qccc after installing a new module is recommended.

Grunt

Removes the theme related static files in the pub/static and var directories.

grunt clean:<theme>

Republishes symlinks to the source files to the pub/static/frontend/<Vendor>/<theme>/<locale> directory.

grunt exec:<theme>

Compiles .css files using the symlinks published in the pub/static/frontend/<Vendor>/<theme>/<locale> directory

grunt less:<theme>

Tracks the changes in the source files, recompiles.css files, and reloads the page in the browser pages (Doesn’t work very well with devbox)

grunt watch

Merging and minification

Disable merging and minification

m0

Enable merging and minification

m1

Remember to run m0 after importing project db to local machine. Development is painfully slow if merging and minification is enabled on local environments. 

Xdebug

Disable xdebug

vd0

Enable xdebug

vd1

Disable xdebug if you’re not actively debugging and are planning to use Magento admin. Remember to enable it if you need to debug something.

Reindex

Reindex

php bin/magento indexer:reindex | m2 indexer:reindex

After adding the new module

Upgrade

m2-qccc

After running this command you’ll be prompted to run the command “php bin/magento setup:static-content:deploy”, there is no need to do this in a local environment since you’ll probably have grunt or gulp for this. 

Deploy static file

Deploy static files

php bin/magento setup:static-content:deploy

Usually not needed

Practical examples

What commands you need to run depends on what caches you have disabled in Magento.

Adding new files: 

grunt

gulp

m2-qccc

grunt exec:feworkshop

m2 dev:source-theme:deploy –theme=”Vaimo/feworkshop” –locale=”en_US” –area=”frontend”

grunt less:feworkshop

gulp

grunt watch (or use watch from phpStorm which is faster)

gulp watch

PART 1.2.1.2 – Magento 2 Modes

Please note that the standard mode for a freshly imported project is developer mode. There is usually no reason to change this on a local environment.

 

developer

 

 

production

 

 

 

default

 

Mode

Static files caching

Exceptions displayed

Exceptions logged

Performance impacted

For most developers it is enough to know that the different modes exist, in case they are needed for troubleshooting.

Only developer mode should be used by developers. It has many benefits although it renders Magento instance noticeably slow.

Technical explanation from the BE training

Developer Mode

Intended for development only – slowest performance

In developer mode:

• Static view files are not cached; they are written to the Magento pub/static directory every time they’re called.

• Uncaught exceptions are displayed in the browser.

• System logging in var/report is verbose.

• An exception is thrown in the error handler, rather than being logged.

• An exception is thrown when an event subscriber cannot be invoked.

Production Mode

Intended for deployment on a production system.

In production mode:

• Static view files are deployed once and are served from cache only. New or updated files are not written to the file system. Every time a file is requested it is retrieved from the cache.

• The Magento installation directory can have read-only permissions.

• Errors are logged to the file system and are never displayed to the user.

Details:

• The static view files deployment command enables you to write static files to the Magento file system when the Magento software is set for production mode.

• Static view files are located in the <your Magento install dir>/pub/static directory, and some are cached in the <your Magento install dir>/var/view_preprocessed directory.

Default Mode

Magento operates in this mode if no mode is explicitly set.

• Errors are logged to the file reports at the server and are never shown to a user.

• Static view files can be created by request; for example, if they are not in the cache.

• Default mode allows you to deploy the Magento application on a single server without changing any settings.

PART 1.2.1.1 – Grunt vs. Gulp

Grunt installation

Your next step is grunt installation. Install grunt on your devbox.

To be able to use grunt you need to register you theme inside dev/tools/grunt/configs/themes.js. In many projects we add a version of the theme.js to the theme and then map it inside the composer.json of the theme:

 

“extra”: {

  “vaimo-module-category”: “theme”,

  “map”: [

      [

          “dev/tools/grunt/configs/themes.js”,

          “../../dev/tools/grunt/configs/themes.js”

      ]

  ]

}

If you use grunt this is probably currently the best way of working Increase grunt compile performance to 6 second

Gulp installation

If you would like to work with gulp, please, see documentation – https://bitbucket.org/vaimo/module-frontend-workflow/overview

In the example project gulp is already prepared. Outside of devbox install gulp npm install gulp -g . Then in the project folder run npm install.
 

Exercise 4.0

Please, install grunt or gulp to your project.

PART 1.2.1 – Workflow

Important commands

m0  – disabled merging and minification, this is a Vaimo specific command.

If merging and minification is not disabled, your local environment is VERY slow.

Remember to run after fetching db

Resources

http://devdocs.magento.com/guides/v2.1/architecture/view/static-process.html

http://devdocs.magento.com/guides/v2.1/config-guide/cli/config-cli-subcommands-static-view.html

Static and dynamic files?

Files that are used by the browser to render a page are considered “static”, e g CSS, frontend specific JS and images. Due to the folder structure in Magento 2, static files are not accessible by the browser. These files need to be (preprocessed and) copied to a specific folder, /pub, which is accessible from the outside.  

Static view files

A set of theme files that are returned by the server to a browser as is, without any processing, are called the static files of a theme. These include fonts, images, CSS content.

Dynamic view files

View files that are processed or executed by the server in order to provide a result to the client are referred to as dynamic files. These include .less files, templates, and layouts.

Key difference: Static vs. dynamic

The key difference between static files and other theme files is that static files appear on a web page as references to the files, whereas other theme files take part in the page generation, but are not explicitly referenced on a web page as files.

Public static files

Static view files that can be accessed by a direct link from the storefront are referred to as public theme files. Public static files are published to the /pub/static/frontend/<Vendor>/<theme>/<language>/ directory and its subdirectories.