Frequent Css and js changes not reflecting Magento 2 in Windows environment

Question

I am modifying a module which uses css and js.

OS : WINDOWS
Magento Mode : Developer

What I've tried :

php bin/magento setup:static-content:deploy
php bin/magento indexer:reindex
deleted cache folder under var/cache
deleted C:\xampp\htdocs\magento2\pub\static ( except .htaccess file)

By doing this all the css and js updates, but I have to do it each time even for minor css changes

In ubuntu, it works fine when I am in developer mode. I opened it private browser, even flushed the browser cache.

Update: In developer mode on windows environment if we delete all the files form pub/static folder and than refresh the page it will show the updated css and js .

I have no idea its the only way to work on windows environment as in Linux in developer mode everything got updated as we refresh the page.

To remove version number from files path Stores>Configuration>Advanced>Developer>[ Static Files Settings tab] Sign Static Files to NO

Answer 1

Follow below mention steps to get "Frequent Css and js changes"

1. Updating the JS in your respected module,before refreshing page the same file from pub/static/frontend/namespace/theme/ ... module/js/... delete it so after page refresh fresh JS file will generate in pub folder.
2. Updating the CSS in your respected module, do the Pt. 1 for css.

for more info see this link, In this link i explained for LESS changes as well.

Note : After doing Pt. 1 or/and Pt. 2 still fresh code not reflect in browser then please do hard refresh

Cmd/Ctrl key + Shift key + press R

Answer 2

Magento 2 use soft links for static content materialization which is not available on Windows.

I recommend using a virtual machine with Linux based distributive for development.

Answer 3

I was facing the same issue with my less updates noting showing unless I flushed my static files. The fix for me was to disable mod_expires. This was caching the css and etc.

Inside of the pub/static/.htaccess file you will should have something like the following:

<IfModule mod_expires.c>

############################################
## Add default Expires header
## http://developer.yahoo.com/performance/rules.html#expires

    ExpiresActive On

    # Data
    <FilesMatch \.(zip|gz|gzip|bz2|csv|xml)$>
        ExpiresDefault "access plus 0 seconds"
    </FilesMatch>
    ExpiresByType text/xml "access plus 0 seconds"
    ExpiresByType text/csv "access plus 0 seconds"
    ExpiresByType application/json "access plus 0 seconds"
    ExpiresByType application/zip "access plus 0 seconds"
    ExpiresByType application/x-gzip "access plus 0 seconds"
    ExpiresByType application/x-bzip2 "access plus 0 seconds"

    # CSS, JavaScript, html
    <FilesMatch \.(css|js|html|json)$>
        ExpiresDefault "access plus 1 year"
    </FilesMatch>
    ExpiresByType text/css "access plus 1 year"
    ExpiresByType text/html "access plus 1 year"
    ExpiresByType application/javascript "access plus 1 year"
    ExpiresByType application/json "access plus 1 year"

    # Favicon, images, flash
    <FilesMatch \.(ico|gif|png|jpg|jpeg|swf|svg)$>
        ExpiresDefault "access plus 1 year"
    </FilesMatch>
    ExpiresByType image/gif "access plus 1 year"
    ExpiresByType image/png "access plus 1 year"
    ExpiresByType image/jpg "access plus 1 year"
    ExpiresByType image/jpeg "access plus 1 year"
    ExpiresByType image/svg+xml "access plus 1 year"

    # Fonts
    <FilesMatch \.(eot|ttf|otf|svg|woff|woff2)$>
        ExpiresDefault "access plus 1 year"
    </FilesMatch>
    ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
    ExpiresByType application/x-font-ttf "access plus 1 year"
    ExpiresByType application/x-font-otf "access plus 1 year"
    ExpiresByType application/x-font-woff "access plus 1 year"
    ExpiresByType application/font-woff2 "access plus 1 year"

</IfModule>

By disabling mod_expires or commenting out the above and doing a hard refresh in your browser (Mac Users hold down Shift + Command + r) your changes should start showing each time you make them.

Answer 4

When debugging changes for JS and CSS, i find it helpful to look at the files that the browser is loading. If you open your inspector in Chrome (Firefox has the same concept) and get into the sources tab you can see the actual files that are being loaded from the pub/static. If you don't see your module's files there, you know that it's not compiling into the pub folder and can debug from there.

If the file is there, you can look at it and see if your changes are there. If they aren''t, delete the file in the pub/static folder, clear the var/view_preprocess folder, re-compile and you should then see your changes.

If it's still not showing up, you might have an issue with file name/directory name issue. And might be a permission issue on the file system itself.

Answer 5

Now try this commands and check your private browser:

php bin/magento setup:static-content:deploy -f

rm -rf var/cache/* var/generation/* var/page_cache/* var/view_preprocessed/*

rm -rf var/cache/* generated/*

Answer 6

What worked for me was changing to Client side less compilation found in:

Stores > Configuration > Advanced > Developer > Frontend Development Workflow

Also make sure your store is in developer mode.

php bin/magento deploy:mode:set developer

Answer 7

In Windows (not WSL2/1) I think you must set an XML somewhere to copy not symlink at least on Magento 2.2.0 that I tried.

But officially Magento 2 is not supported on windows so recommend to develop it in Docker with WSL2 & Ubuntu or rent a server or startup a Linux Virtual PC...

Please See: https://devdocs.magento.com/guides/v2.3/install-gde/system-requirements-tech.html