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)

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

@kunj 

Hi,

 

I don't see versions.

 

<link  rel="stylesheet" type="text/css"  media="all" href="http://127.0.0.1/magento2/pub/static/frontend/Magento/luma/en_GB/mage/calendar.css" />
<link  rel="stylesheet" type="text/css"  media="all" href="http://127.0.0.1/magento2/pub/static/frontend/Magento/luma/en_GB/css/styles-m.css" />
<link  rel="stylesheet" type="text/css"  media="screen and (min-width: 768px)" href="http://127.0.0.1/magento2/pub/static/frontend/Magento/luma/en_GB/css/styles-l.css" />
<link  rel="stylesheet" type="text/css"  media="print" href="http://127.0.0.1/magento2/pub/static/frontend/Magento/luma/en_GB/css/print.css" />
<link  rel="icon" type="image/x-icon" href="http://127.0.0.1/magento2/pub/static/frontend/Magento/luma/en_GB/Magento_Theme/favicon.ico" />
<link  rel="shortcut icon" type="image/x-icon" href="http://127.0.0.1/magento2/pub/static/frontend/Magento/luma/en_GB/Magento_Theme/favicon.ico" />
<script  type="text/javascript"  src="http://127.0.0.1/magento2/pub/static/frontend/Magento/luma/en_GB/requirejs/require.js"></script>
<script  type="text/javascript"  src="http://127.0.0.1/magento2/pub/static/frontend/Magento/luma/en_GB/mage/requirejs/mixins.js"></script>
<script  type="text/javascript"  src="http://127.0.0.1/magento2/pub/static/frontend/Magento/luma/en_GB/requirejs-config.js"></script>

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

You need to check .htaccess file in your magento root folder like where app folder is exist at same path, .htaccess file exist or not?
If Issue Solved, Click Kudos/Accept As solutions. Get Magento insight from
Magento 2 Blogs/Tutorial

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

@Rakesh Jesadiya

Yes, there is .htaccess file in app and in root.

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

@kunj

 

Hi

 

There is .htaccess.

 

############################################
## 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 756M
    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 756M
    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>
        <IfVersion < 2.4>
            order allow,deny
            deny from all
        </IfVersion>
        <IfVersion >= 2.4>
            Require all denied
        </IfVersion>
    </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>
        <IfVersion < 2.4>
            order allow,deny
            deny from all
        </IfVersion>
        <IfVersion >= 2.4>
            Require all denied
        </IfVersion>
    </Files>

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

This gives 500 error.

http://127.0.0.1/magento2/pub/static.php?resource=$0

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:

 

<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)

@kunj

Fixed ! 


Thank you very much @kunj and @Rakesh Jesadiya  !!

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

@tvgarden, Welcome, Happy to help you. 

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

Thanks for the solution. @kunj

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

Can you please share how did you fix it?