After installation or some code updates, you might see Magento UI not being loaded properly. I will show you how to fix broken UI issue in Magento 2 in this tutorial.
Fix broken UI issue in Magento 2
There are many reasons that causes broken UI in Magento 2, it can affect both admin and frontend UI. Here’s how to fix it.
1. Enable Apache rewrite mode
If you don’t use Apache to serve Magento, omit this step.
If you’re using Apache to serve Magento site, you need to enable Apache rewrite module, which is done by:
$ sudo a2enmod rewrite
The, restart Apache server:
$ sudo systemctl restart apache2
Make sure your Magento project is setup with option
--url-rewrites=1. Otherwise, it will fail to load correct static files.
2. Clean up caches
Sometimes, it might be the problem of caching. So it’s better just to re-generate cache by deleting all current cache files.
$ rm -rf var/cache/* $ rm -rf var/page_cache/* $ rm -rf var/session/* $ rm -rf var/view_preprocessed/*
3. Generate static files
After removing cache, it is time to re-generate static files. Type the following Magento command:
$ php bin/magento setup:static-content:deploy
4. Re-index data
Next step is to re-index all data so that storefront won’t have problem loading them.
$ php bin/magento indexer:reindex
Without indexing, you will see a slow performance when accessing storefront and admin.
At this point, it should fix broken UI issue in Magento 2. If it doesn’t work, try to make a fresh installation of Magento again to make sure there is no corruptive data in Magento project.