Fix Broken UI Issue in Magento 2

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.

Conclusion

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.