cancel
Showing results for 
Search instead for 
Did you mean: 

CSS and JS files not loaded after installation (Wamp64)

SOLVED

Re: CSS and JS files not loaded after installation (Wamp64)

Thank You So much its working well!!!

Save my day!!!!

Re: CSS and JS files not loaded after installation (Wamp64)

The error has been fixed,

Thanks!

Re: CSS and JS files not loaded after installation (Wamp64)

Thank for the solution, it was about the .htaccess file of Magento 2

now the problem is gone

Re: CSS and JS files not loaded after installation on linux server

thank its helped me.

Regards,
Rohit Chauhan
M2 Certified Expert

Re: CSS and JS files not loaded after installation (Wamp64)

Thanks, I have spent lot of time behind other solutions available through out various communities. But yours solution did the trick.

Re: CSS and JS files not loaded after installation (Wamp64)

"No, you just need to add '.htaccess' file in 'pub/static' folder with this code:"

I was doing configration in aws ec2 and this solution solved my problem.

Thanks for help.


@kunj wrote:

No, you just need to add '.htaccess' file in 'pub/static' folder with this code:

 

<IfModule mod_php5.c>
php_flag engine 0
</IfModule>

<IfModule mod_php7.c>
php_flag engine 0
</IfModule>

# To avoid situation when web server automatically adds extension to path
Options -MultiViews

<IfModule mod_rewrite.c>
    RewriteEngine On

    # Remove signature of the static files that is used to overcome the browser cache
    RewriteRule ^version.+?/(.+)$ $1 [L]

    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-l

    RewriteRule .* ../static.php?resource=$0 [L]
</IfModule>

############################################
## setting MIME types

# JavaScript
AddType application/javascript js jsonp
AddType application/json json

# HTML

AddType text/html html

# CSS
AddType text/css css

# Images and icons
AddType image/x-icon ico
AddType image/gif gif
AddType image/png png
AddType image/jpeg jpg
AddType image/jpeg jpeg

# SVG
AddType image/svg+xml svg

# Fonts
AddType application/vnd.ms-fontobject eot
AddType application/x-font-ttf ttf
AddType application/x-font-otf otf
AddType application/x-font-woff woff
AddType application/font-woff2 woff2

# Flash
AddType application/x-shockwave-flash swf

# Archives and exports
AddType application/zip gzip
AddType application/x-gzip gz gzip
AddType application/x-bzip2 bz2
AddType text/csv csv
AddType application/xml xml

<IfModule mod_headers.c>

    <FilesMatch .*\.(ico|jpg|jpeg|png|gif|svg|js|css|swf|eot|ttf|otf|woff|woff2)$>
        Header append Cache-Control public
    </FilesMatch>

    <FilesMatch .*\.(zip|gz|gzip|bz2|csv|xml)$>
        Header append Cache-Control no-store
    </FilesMatch>

</IfModule>

<IfModule mod_expires.c>

############################################
## Add default Expires header
## http://developer.yahoo.com/performance/rules.html#expires

    ExpiresActive On

    # Data
    <FilesMatch \.(zip|gz|gzip|bz2|csv|xml)$>
        ExpiresDefault "access plus 0 seconds"
    </FilesMatch>
    ExpiresByType text/xml "access plus 0 seconds"
    ExpiresByType text/csv "access plus 0 seconds"
    ExpiresByType application/json "access plus 0 seconds"
    ExpiresByType application/zip "access plus 0 seconds"
    ExpiresByType application/x-gzip "access plus 0 seconds"
    ExpiresByType application/x-bzip2 "access plus 0 seconds"

    # CSS, JavaScript, html
    <FilesMatch \.(css|js|html)$>
        ExpiresDefault "access plus 1 year"
    </FilesMatch>
    ExpiresByType text/css "access plus 1 year"
    ExpiresByType text/html "access plus 1 year"
    ExpiresByType application/javascript "access plus 1 year"

    # Favicon, images, flash
    <FilesMatch \.(ico|gif|png|jpg|jpeg|swf|svg)$>
        ExpiresDefault "access plus 1 year"
    </FilesMatch>
    ExpiresByType image/gif "access plus 1 year"
    ExpiresByType image/png "access plus 1 year"
    ExpiresByType image/jpg "access plus 1 year"
    ExpiresByType image/jpeg "access plus 1 year"
    ExpiresByType image/svg+xml "access plus 1 year"

    # Fonts
    <FilesMatch \.(eot|ttf|otf|svg|woff|woff2)$>
        ExpiresDefault "access plus 1 year"
    </FilesMatch>
    ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
    ExpiresByType application/x-font-ttf "access plus 1 year"
    ExpiresByType application/x-font-otf "access plus 1 year"
    ExpiresByType application/x-font-woff "access plus 1 year"
    ExpiresByType application/font-woff2 "access plus 1 year"

</IfModule>

And this `.htaccess` file in `pub` folder with this code:

 

 

############################################
## Optional override of deployment mode. We recommend you use the
## command bin/magento deploy:mode:set to switch modes instead

# Options are default, production, or developer
#   SetEnv MAGE_MODE default

############################################
## Uncomment these lines for CGI mode.
## Make sure to specify the correct cgi php binary file name
## it might be /cgi-bin/php-cgi

#    Action php5-cgi /cgi-bin/php5-cgi
#    AddHandler php5-cgi .php

############################################
## GoDaddy specific options

#   Options -MultiViews

## You might also need to add this line to php.ini
##     cgi.fix_pathinfo = 1
## If it still doesn't work, rename php.ini to php5.ini

############################################
## This line is specific for 1and1 hosting

    #AddType x-mapp-php5 .php
    #AddHandler x-mapp-php5 .php

############################################
## Default index file

    DirectoryIndex index.php

<IfModule mod_php5.c>
############################################
## Adjust memory limit

    php_value memory_limit 768M
    php_value max_execution_time 18000

############################################
## Disable automatic session start
## before autoload was initialized

    php_flag session.auto_start off

############################################
## Enable resulting html compression

    #php_flag zlib.output_compression on

###########################################
# Disable user agent verification to not break multiple image upload

    php_flag suhosin.session.cryptua off
</IfModule>
<IfModule mod_php7.c>
############################################
## Adjust memory limit

    php_value memory_limit 768M
    php_value max_execution_time 18000

############################################
## Disable automatic session start
## before autoload was initialized

    php_flag session.auto_start off

############################################
## Enable resulting html compression

    #php_flag zlib.output_compression on

###########################################
# Disable user agent verification to not break multiple image upload

    php_flag suhosin.session.cryptua off
</IfModule>


<IfModule mod_security.c>
###########################################
# Disable POST processing to not break multiple image upload

    SecFilterEngine Off
    SecFilterScanPOST Off
</IfModule>

<IfModule mod_deflate.c>

############################################
## Enable apache served files compression
## http://developer.yahoo.com/performance/rules.html#gzip

    # Insert filter on all content
    ###SetOutputFilter DEFLATE
    # Insert filter on selected content types only
    #AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript

    # Netscape 4.x has some problems...
    #BrowserMatch ^Mozilla/4 gzip-only-text/html

    # Netscape 4.06-4.08 have some more problems
    #BrowserMatch ^Mozilla/4\.0[678] no-gzip

    # MSIE masquerades as Netscape, but it is fine
    #BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

    # Don't compress images
    #SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary

    # Make sure proxies don't deliver the wrong content
    #Header append Vary User-Agent env=!dont-vary

</IfModule>

<IfModule mod_ssl.c>

############################################
## Make HTTPS env vars available for CGI mode

    SSLOptions StdEnvVars

</IfModule>

<IfModule mod_rewrite.c>

############################################
## Enable rewrites

    Options +FollowSymLinks
    RewriteEngine on

############################################
## You can put here your magento root folder
## path relative to web root

    #RewriteBase /magento/

############################################
## Workaround for HTTP authorization
## in CGI environment

    RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

############################################
## TRACE and TRACK HTTP methods disabled to prevent XSS attacks

    RewriteCond %{REQUEST_METHOD} ^TRAC[EK]
    RewriteRule .* - [L,R=405]

############################################
## Never rewrite for existing files, directories and links

    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-l

############################################
## Rewrite everything else to index.php

    RewriteRule .* index.php [L]

</IfModule>


############################################
## Prevent character encoding issues from server overrides
## If you still have problems, use the second line instead

    AddDefaultCharset Off
    #AddDefaultCharset UTF-8

<IfModule mod_expires.c>

############################################
## Add default Expires header
## http://developer.yahoo.com/performance/rules.html#expires

    ExpiresDefault "access plus 1 year"
    ExpiresByType text/html A0
    ExpiresByType text/plain A0

</IfModule>

###########################################
## Deny access to release notes to prevent disclosure of the installed Magento version

    <Files RELEASE_NOTES.txt>
        order allow,deny
        deny from all
    </Files>

# For 404s and 403s that aren't handled by the application, show plain 404 response
ErrorDocument 404 /errors/404.php
ErrorDocument 403 /errors/404.php

############################################
## If running in cluster environment, uncomment this
## http://developer.yahoo.com/performance/rules.html#etags

    #FileETag none

###########################################
## Deny access  to cron.php
    <Files cron.php>
        order allow,deny
        deny from all
    </Files>

<IfModule mod_headers.c>
    ############################################
    ## Prevent clickjacking
    Header set X-Frame-Options SAMEORIGIN
</IfModule>

 
After this flush the cache and try in private windows.

 


 

Re: CSS and JS files not loaded after installation (Wamp64)

Thank you so much it helps me a lot. Awesome!!

Re: CSS and JS files not loaded after installation (Wamp64)

Fixed ! 

Thank you very much!!!!!!!!!!!!!! Woman Very Happy

Re: CSS and JS files not loaded after installation (Wamp64)

still not working ,, 

I follow the steps that u listed above,, 

please help me 

Re: CSS and JS files not loaded after installation (Wamp64)

hi,

my magento version is 2.4.3

php xampp 7.4

 

sir, i follow all the listed steps by you 

but not be able to get rid of this problem

please help me as soon as possible