Magento 2 CSS and JavaScript not loading from correct folder

Question

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.

Answer 1

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.

Answer 2

you just need to update the apache2.conf file.

On Ubuntu 16.04

1. Open and edit the file /etc/apache2/apache2.conf
2. Navigate to the place in the apache2.conf file <Directory /var/www/>
3. Change "AllowOverride None" to "AllowOverride All"
4. Save the file
5. Restart apache2 -> sudo service apache2 restart

Answer 3

For me it was simply because mod_rewrite wasn't enabled.

sudo a2enmod rewrite

and

service apache2 restart

Answer 4

If you are facing problem of css and js page load design after installation in magento2

please follow the following step-:

open the terminal and navigate to magento web root

 $ cd /var/www/html/magento2 

Step 1.

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

Step 2.

$ php bin/magento indexer:reindex

Step 3.

make sure apache “rewrite_module” is enable and then restart the server

Step 4.

$ chown -R www-data:www-data /var/www/html/magento2 

Step 5.

 $ chmod -R 777 /var/www/html/magento2 

Step 6.

delete cache folder under var/cache

The above step working. I hope this will work for you also.

Let me know if any issue. :)

http://gotechnies.com/css-javascript-files-loading-magento-2-installation/

Answer 5

Here is the simplest solution if showing version name in css path

like : pub/static/version323334/

then run this query in mysql

INSERT INTO core_config_data (path, value) VALUES ('dev/static/sign', 0)
ON DUPLICATE KEY UPDATE value = 0;

after that clear the config cache

 bin/magento cache:clean config

you can also disable static file version from admin

Answer 6

I had the same issue resolved by adding

sudo nano /etc/apache2/apache2.conf

Modify this

<Directory /var/www/>
        Options Indexes FollowSymLinks
        AllowOverride None
        Require all granted
</Directory>

to this

<Directory /var/www/html>
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
</Directory>

you should also enable the mod_rewrite and insall ssl certificates apache2 module:

sudo a2enmod ssl

sudo a2ensite default-ssl

sudo a2enmod rewrite

sudo service apache2 restart

Answer 7

1. Try to disable cache if you do not disable it before
2. Make sure you have the latest version of Magento with clean code. If you modify or customize something make sure fix all errors.

3. Run several commands below may help you.

   php bin/magento indexer:reindex

   php bin/magento cache:flush

Remove folders in

• pub/static/frontend/*
• var/cache

• var/view_preprocessed/*

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

Answer 8

In my case I accidentally deleted .htaccess file from ROOT/pub/ and ROOT/pub/staticfolders. Then it is started working when I revert it back.

Answer 9

Solved !!!

Run following commands in CLI interface of your Magento2 root folder:

php bin/magento setup:static-content:deploy

php bin/magento indexer:reindex

Then delete var folder by this command at your root of magento2.

rm -rf var/*

Then refresh your homepage and admin panel. Its Working !!!!! Cool !!!!

Answer 10

I had the same issue with 404s. I solved it by making sure the VirtualHost directive in Apache was correct. Here is my VirtualHost:

<VirtualHost *:80>
    DocumentRoot /var/www/magento2
    ServerName magento-ce-2.1.6
    <Directory "/var/www/magento2">
        Options Indexes FollowSymLinks
        AllowOverride All
    </Directory>
</VirtualHost>

Answer 11

See this post http://infoeverysolution.com/index.php/2020/01/16/magento-2-css-nd-js-not-loading-issue/. This is an issue with pub folder htacess file if its missing.

Answer 12

I solved it by following these steps by BlueOrchidd:

https://community.magento.com/t5/Installing-Magento-2/Magento-2-Installation-Worst-Experience-Ever/m-p/23786#M382

One important thing: Dont change Locale to anything that en_US. after installation deal with that ..

Answer 13

I had the exact same issue as the OP and it was simply because I set my locale to en_AU, so using the default deploy command only generated the en_US content. You have to add the locale you are actually using to the EN of the command, like this:

php bin/magento setup:static-content:deploy en_US en_AU

Answer 14

I tried the above solutions. But it didn't help me. Despite, I used the same commands which they mentioned with the changes of sequence. They are,

1. clear cache, composer_home, generation, log, page_cache, tmp and view_preprocessed from var directory

2. run the following commands one by one.

php bin/magento indexer:reindex

php bin/magento cache:flush

php bin/magento setup:static-content:deploy

I hope this may help to someone like me.

Answer 15

Disable mod_pagespeed

Pagespeed processes a "cached" instance of your content with an abbreviation, i.e if this is the normal file.

image.css

It will be set as follows.

image.pagespeed.css

The above is a very simply example, but already you can see where the underlying issue is. This can cause improper static content loading due to not being able to be found via the core pathing, due to the fact that those are temporarily. This is an inherit problem with Mod_Pagespeed, ergo why we advise keeping it disabled.

the ansewer of fast comet support, and it solved my problem

Answer 16

For Ubuntu 18.04 (Bionic). I have used following steps for for the static files to load correctly.

After installation is complete:

Make sure apache module 'rewrite' is enabled if not then do following

• cd /etc/apache2
• run command a2enmod rewrite
• sudo vi /etc/apache2/apache2.conf

Then make following changes

Modify from:

<Directory /var/www/>
     Options Indexes FollowSymLinks
     AllowOverride None
     Require all granted
</Directory>

to

<Directory /var/www/>
    Options Indexes FollowSymLinks
    AllowOverride All
    Require all granted
</Directory>

Then restart apache

sudo service apache2 restart

or

sudo /etc/init.d/apache2 restart

Then change the permissions for <magento root director>

• chmod -R 774 /var/www/html/<magento root director>

Then deploy the static content

• php bin/magento setup:static-content:deploy -f (-f is required if you are in development env)

Then flush the cache and reindex

• <magento root directory> php bin/magento cache:flush
• <magento root directory> php bin/magento indexer:reindex

OR

• <magento root directory> rm -R /var/cache*

Then access your home page using

• 127.0.0.1/your_configured_url instead of localhost/your_configured_url

Answer 17

Ditch composer and install using the latest zip from here

That did the job for me

Answer 18

You just need to execute below commands in your cmd :

  php bin/magento setup:static-content:deploy

  php bin/magento cache:flush

Answer 19

I agree that the problem is that .htaccess gets deleted after deploying static content. So, to fix it, just get a copy of the file from Magento official docs. Also, very important to run the static deployment command in production mode. The problem happens to me every time I'm doing the static content deployment in developer mode.

Answer 20

This is how i found and solved the cause of the problem:

First, check the "View Page Source" of your webpage. Find the .css file link and click it. If you find 500 internal error, that means some .htaccess file is causing the problem. Try to follow the .css file path in your magento project and you will find that .css file does not even exist there.

How to solve this? Go on and remove the .htaccess file from pub/. Now run Click thesourceJust remove the .htaccess file from pub/ then run php bin/magento setup:static-content:deploy -f.

This should resolve the problem.

Answer 21

if you tried everything above and didn't succeed , you probably installed magento in a subdirectory in your webserver , which will lead to 404 on assets , what you should do is open the .htaccess in your pub/static find the next lines :

## you can put here your pub/static folder path relative to web root
RewriteBase /magento/pub/static/

you should notice that the value of RewriteBase should be relative to your web root .. adjust the value for your server configurations (start from the folder containing and don't forget the "/" as the first character ...

Answer 22

@haim's solution worked for me

sudo a2enmod rewrite

and

service apache2 restart