Magento 2 CSS and JavaScript not loading from correct folder

  • 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

    @TejabhagavanKollepara This question was asked first, is well formed, has good answers, so IMO the other question is a dupe candidate, not this one... B.t.w., if the flag on the other question as a duplicate to this one was turned down, it is not necessary to flag this question as duplicate of the other to try to achieve the same.

    See S.A's answer, too – a fresh Magento installation is in "default" (not "production") mode and does not need the static content deployed, which is what you're being told to do in all the other answers.

  • 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.

    Also in php.ini change **max_execution_time** to 500, **memory_limit** to 2048M, **post_max_size** to 2048M, **upload_max_filesize** to 2048M and **max_file_uploads** to 2048.

    Thank you for your quick response. I have made these changes but they have had no effect. I restarted WAMP server after making the changes. I have edited the question to show the errors that I can see in the Chrome inspector

    Oh i am sorry to mention one more thing, first delete all cache and session, make changes in **di.xml** and also delete everything from **ROOT > pub > static > DELETE ALL EXCEPT .HTACCESS**

    @E.Gain see edited answer

    Hi, I have done this and still no change

    Do I need to run the PHP deploy AFTER clearing all of the cache and the pub/static folder?

    i would like you to download magento 2 zip from https://www.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, first clear cache and session, edit di.xml file and then enter magento 2 url in browser. this is the actual way to install magento 2 on localhost

    @E.Gain your welcome :)

    this is the most craziest solution to this issue...

    @MagenX well but it works :)

    lol, sure it works, you can open a can of beer using hammer, or you can pull off the tab on the top.... see the difference in your solution?? we dont need a hammer to open it...

    @MagenX This is every person's view that which tool he more prefer to use. In your eyes, you criticize everything as hammer rather than sharing your view of solution.

    Answer has been edited.

    If you set a default language other than en_US you need to deploy static files for that language specific: php bin/magento setup:static-content:deploy nl_NL en_US

    Can I use localhost after successful installation or it may cause problem later?

    @BhojendraNepal I would suggest you to use 127.0.0.1 rather than localhost since other applications may bypass it.

    I've tried both solution #1 and #2 here to install Magento 2 on Windows but always get the unstyled css and 404's. I detailed the way I thought it should be done here: http://magento.stackexchange.com/questions/139054/why-does-the-web-based-install-of-magento-2-on-windows-7-localhost-using-xampp-a but no one answered and I still cannot get Magento 2 on Windows no matter how I try. I only want it for local development, I have working Linux installs. I used 127.0.0.1 but can't understand why for some that works in place of localhost and if its recommended anyway.

    Solution #2 worked like a charm, thank you for saving me hours if not days, dealing with this issue!

    @JonathanMarzullo your welcome!

    loy shy..... :)

    #Soluation 2, working all step as you have given, but page not found error gating

    Still, i am facing the error empty page, may i know other possibilities of error.

    @FayyazKhattak Did you ever faced this error : https://snag.gy/oI9DjQ.jpg, How can i solve the error Refused to apply style and MIME Type

  • 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

    It was so hard to find this answer! Everywhere else people suggest (re-)deploying static content even though a fresh Magento installation is in "default" (not "production") mode and does not need the static content deployed.

  • 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/

    how run these commands in windows ?

    "Let me know if any issue" - doesn't work on Windows.

    It works for me just for first 3 steps. :)

    It works perfect in 2.2

    Not so smart to set permission to 777 for all files on the server.

    I'm not really impressed with the step where you gives full read write permission to the entire magento installation.

    setting permissions to 777 is bad advice but hopefully any sysadmins will know better.

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

    sudo a2enmod rewrite

    and

    service apache2 restart

    perfect solution!!! +1 :)

  • 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

    enter image description here

    This worked for me thank you. However, query needs to be fixed INSERT INTO core_config_data (path, `value`) VALUES ('dev/static/sign', 0);

    what is path and values

    path, value are fields name i already define values ( dev/static/sign , 0) , just run this sql it should be work

    perfect solution!!! made my day :) +1

  • 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
    

    This, plus rm -rf var/* worked for me. Great and good spot.

    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

  • 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.

  • 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 !!!!

License under CC-BY-SA with attribution


Content dated before 6/26/2020 9:53 AM