Work with HTML and JS in Magento 2
Work with HTML and JS in Magento 2

Work with HTML and JS in Magento 2

During development in Magento 2, we face many issues related to HTML or JS. Sometimes js and HTML changes are not reflected.

I often see that many developer run all the commands after doing changes in HTML or JS files. To reflect Html or js changes you don’t need to run any command. You even don’t need to run cache:clean or cache:flush command.

In this article, I will give some tricks and tips about how you can work with HTML and JS.

Enable developer mode

This is very important that you should keep developer mode while working with HTML or JS files.

Following are the developer mode Intended:

  • Disables static view file caching
  • Provides verbose logging
  • Enables automatic code compilation
  • Enables enhanced debugging
  • Shows custom X-Magento-* HTTP request and response headers
  • Results in the slowest performance
  • Shows errors on the frontend

You can use this command to check the current mode

php bin/magento deploy:mode:show

You can use this command to set the developer mode

php bin/magento deploy:mode:set developer

Enable symlinks

You should enable symlink for the pub/static folder. Keep the pub/static files as a symlink. This folder contains Html, Js, CSS, Fonts etc.. Files.

To check files are symlink or not you can check pub/static folder with arrow symbol like below screenshot

If you are unable to find arrow link below files. Follow below steps

Step 1: Delete all files

Delete all files from pub/static folder except .htaccess file. Please keep note that you don’t need to remove .htaccess file.

Now refresh the homepage of your site and check symlink generated in pub/static folder. Still symlink are not generated please follow second step.

Step 2: Change in di.xml

Open your di.xml from app/etc/di.xml check following section

<virtualType name="developerMaterialization" type="Magento\Framework\App\View\Asset\MaterializationStrategy\Factory">
    <arguments>
        <argument name="strategiesList" xsi:type="array">
            <item name="view_preprocessed" xsi:type="object">Magento\Framework\App\View\Asset\MaterializationStrategy\Symlink</item>
            <item name="default" xsi:type="object">Magento\Framework\App\View\Asset\MaterializationStrategy\Copy</item>
        </argument>
    </arguments>
</virtualType>

In developerMaterialization type, you should keep view_preprocessed as a symlink object. If view_preprocessed object Magento\Framework\App\View\Asset\MaterializationStrategy\Symlink set as in your system. Please change it to object Magento\Framework\App\View\Asset\MaterializationStrategy\Symlink

Disable cache from the browser

You should keep the cache disable from the browser. To disable cache from browser go to Right-click -> Inspect -> Go to network Tab -> Check Disable cache

Also, keep note that you should keep open console with disabling cache while reloading the page.

The trick to check the modification of HTML and JS

After doing all above changes like enable developer mode, enable symlink, disabling browser cache, Now I will give you a trick to check the modification of HTML and JS files without running any command. You even don’t need to run cache:clean or cache:flush command.

After doing modifications in HTML or JS file reload the page in the browser with opening network tab in console with disabling cache as described above.

Now open file which you have modified in a new tab by double-clicking on file or Right Click->Open in new tab

Now check your changes in a new tab if changes not reflated just reload the newly opened tab and go to the main page and reload the page to check the changes. You just need to reload that file after doing any modification.

I hope this article will help you to understand how you can work with HTML and JS files in Magento 2. If you have any question you can comment below.

If you like this article please share it via following sharing links. You can subscribe to my blog to get the latest articles and updates. Happy Coding..:)