Magento2 Installation – Fix CSS and JavaScript Not Loading

installationmagento-2.0magento2static-contentwindows

I am attempting to install and run Magento 2 on WAMP on a Windows 7 machine with little success.

After jumping through the many and various hoops to get the site to load I am now faced with 404 responses and no styles or javascript loading.

Spec is as follows:

  • Magento-CE-2.0.0+Samples
  • Apache 2.4.9
  • PHP 5.5.12
  • MySQL 5.6.17

When I look at the browser console among the errors are attempts to access files that are not in the pub/static folder. The "frontend" folder does get loaded and most of the files are present. I have noticed however that some CSS files are not present.

On running the PHP deploy command

php bin/magento setup:static-content:deploy

that is mentioned in other posts I get the below error. I am not sure how to remedy this?

Fatal error: Allowed memory size of 134217728 bytes exhausted (tried
to allocate 64 bytes) in
C:\wamp\www\magento\vendor\oyejorge\less.php\lib\Less\Visitor.php on
line 45

Any assistance will be greatly appreciated.

UPDATE

I bumped up the PHP memory allowance and ran the PHP deploy script again. This time it did not error and executed fully. However, the same issue as described above is still present. The site loads but every attempt to load any page or asset results in a 404 page not found an error with no styling applied.

Please see below the errors in Chrome Inspector.

enter image description here

Best Answer

SOLUTION # 1 (IF YOU WANT TO EDIT XML FILE)

I would like you to download Magento 2 zip from magentocommerce.com/download with sample data, create new db in phpmyadmin, extract zip in htdocs folder. Install Magento 2 but do not use localhost use 127.0.0.1 in store URL and admin URL. After successful installation DO NOT run magento.

Now we are going to clear / delete caches and sessions of Magento 2. Go to following paths and delete everything:

ROOT > var > cache > *DELETE ALL*
ROOT > var > page_cache > *DELETE ALL*
ROOT > var > session > *DELETE ALL*

When Magento 2 is not in production mode, it will try to create symlinks for some static resources on local server. We have to change that behavior of Magento 2 by going to edit ROOT > app > etc > di.xml file. Open up di.xml in your favorite code editor, find the virtualType name="developerMaterialization" section. In that section below, you will find an item <item name="view_preprocessed" xsi:type="object"> which needs to be modified. You can modify it by changing the following content:

Magento\Framework\App\View\Asset\MaterializationStrategy\Symlink

To:

Magento\Framework\App\View\Asset\MaterializationStrategy\Copy

Now last step, also delete old files generated in ROOT > pub > static > DELETE ALL EXCEPT .HTACCESS

SOLUTION # 2

Install Composer. Now I would like you to download Magento 2 zip from magentocommerce.com/download, create new db in phpmyadmin, extract zip in htdocs folder. Install Magento 2 but do not use localhost use 127.0.0.1 in store URL and admin URL. After successful installation DO NOT run magento.

Now we are going to verify Composer installation, Deploy static content, clear / flush Magento cache and reindex the Magento 2 blocks. To perform all above actions, press WINDOWS KEY + R to open RUN dialog and type “cmd” to open Command Prompt.

Type “cd PATH_TO_YOUR_MAGENTO2_FILES” to enter in Magento 2 ROOT directory.

Now to verify Composer installation in above directory, type “composer install”.

If you get any error in this step, please check your Composer installation

In this step, we are setting up static content to deploy on our Magento store. To perform this, type “php bin/magento setup:static-content:deploy”.

For Those who are on Magento 2.2.x

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

If you get any error, check your PHP.EXE and PHP.INI Environment Variable

Clear / Flush Magento cache by typing “php bin/magento cache:flush” in CMD.

And finally, to Reindex Magento Static Blocks type “php bin/magento indexer:reindex”.

You are done with successful installation of Magento 2.

Related Topic