Magento 2 CSS and JavaScript Files Are Not Loading

If you got stuck installing and running Magento 2, you’ve come to the right place. Below, we shed light on how to fix the problem related to CSS and JS files that are not loading from a corresponding folder. Note that the situation describes Magento 2 on WAMP on a Windows 7 machine.

You’ve done everything possible, but your site is not loading, you are faced with 404 responses, and no styles or javascript are loaded? Perhaps, the following article will help you. It describes the similar situation that happened in the environment with the following specifications: Magento-CE-2.0.0+Samples, Apache 2.4.9, PHP 5.5.12, and MySQL 5.6.17.

If something goes wrong like in the current situation, look at the browser console. If you see that there are attempts to access files that are not in the pub/static folder among all errors, you will find out the solution to your problem soon. In our case, the “frontend” folder was loaded with most of the files except some CSS files.

The PHP deploy command doesn’t help, but there are still two possible solutions to the problem.

Fix the issue by editing XML files.

Follow these steps:

1. Download the Magento 2 zip with sample data from magentocommerce.com/download.
2. Create a new db in phpmyadmin.
3. Extract the zip in the htdocs folder.
4. Run Magento 2 installation. Instead of localhost, use 127.0.0.1 for both store and admin URLs.
5. If the installation was successful, DO NOT run Magento.
6. Now, delete caches and sessions of Magento 2 under the following path:
   ROOT > var > cache > *DELETE ALL* ROOT > var > page_cache > *DELETE ALL* ROOT > var > session > *DELETE ALL*
7. Go to ROOT > app > etc > di.xml and edit the di.xml file. This will prevent Magento 2 from creating symlinks for static resources on a local server.

To edit the di.xml file, follow these steps:

1. Open the file in a code editor.
2. Find the virtualType name=”developerMaterialization” section.
3. Find the following item: <item name=”view_preprocessed” xsi:type=”object”>.
4. Modify it. Changing
   Magento\Framework\App\View\Asset\MaterializationStrategy\Symlink
   To:
   Magento\Framework\App\View\Asset\MaterializationStrategy\Copy

The final part of the solution requires deleting old files generated under ROOT > pub > static. You have to delete everything except HTACCESS.

Fix the issue via Composer

Follow these steps:

1. Install Composer.
2. Download the Magento 2 zip with sample data from magentocommerce.com/download.
3. Create a new db in phpmyadmin.
4. Extract the zip in the htdocs folder.
5. Run Magento 2 installation. Instead of localhost, use 127.0.0.1 for both store and admin URLs.
6. If the installation was successful, DO NOT run Magento.

Now, you have to run several more actions:

1. Press WINDOWS KEY + R to open the RUN dialog
2. Type “cmd” to open Command Prompt.
3. Type “cd PATH_TO_YOUR_MAGENTO2_FILES” to enter the Magento 2 ROOT directory.
4. Type “composer install” to verify your Composer installation in the above directory. In case of errors, check the Composer installation once again.
5. Type “php bin/magento setup:static-content:deploy” to set up static content to deploy it on the Magento store. In case of errors, check whether everything is ok with your PHP.EXE and PHP.INI Environment Variable.
6. Type “php bin/magento cache:flush” to flush Magento cache.
7. Now, Magento 2 is successfully installed.

We hope this post was useful. It is based on the StackExchange question by E.Gain and answers by Fayyaz Khattak. For more useful articles, check out our Cookbook.