Magento 2 Installation – Fix CSS/JS/Images Not Loading

magento2magento2-dev-beta

I am trying to install Magento2(0.1.0-alpha107 ) in my localhost powered by OSX 10.10 + brew installed php-fpm + mysql + nginx.
Steps that I followed for installation:

  • mkdir /path/to/magento2 && cd /path/to/magento2
  • git clone git@github.com:magento/magento2.git .
  • composer install
  • cd setup
  • composer install
  • php -f index.php install --base_url=http://magento2alpha.dev/ --backend_frontname=admin --db_host=localhost --db_name=magento2alpha --db_user=root --db_pass=root --admin_firstname=Raj --admin_lastname=KB --admin_email=magepsycho@gmail.com --admin_username=admin --admin_password=pass123 --language=en_US --currency=USD --timezone=America/Chicago

So far everything worked great. But when you load the frontend: http://magento2alpha.dev/
it's showing plain text only (i.e. css/images/js are missing).
View source gives you the path like http://magento2alpha.dev/pub/static/frontend/Magento/blank/en_US/[css/images]/[css/images file] which led to the 404 page
My nginx conf file looks like:

server {
    listen 80;
    server_name magento2alpha.dev;
    root /Users/Raj/Sites/magento/magento2alpha;

    location /setup {
        try_files $uri $uri/ @setuphandler;
    }

    # Rewrite Setup's Internal Requests
    location @setuphandler {
        rewrite /setup /magento/magento2alpha/setup/index.php;
    }

    location / {
        index index.php index.html;
        try_files $uri $uri/ @handler;
    }

     # Rewrite Internal Requests
     location @handler {
        rewrite / /magento/magento2alpha/index.php;
     }

     # Rewrite magento2 static files
     #location /pub/static {
     #   rewrite ^/pub/static/(.*)$ /magento/magento2alpha/pub/static.php?resource=$1? last;
     #}

     location /pub/static {
          try_files $uri $uri/ @static;
     }

     location @static {
           rewrite ^/pub/static/(.*)$ /magento/magento2alpha/pub/static.php?resource=$1? last;
     }

     #location ~ .php/ {
     #    rewrite ^(.*.php)/ $1 last;
     #}

    location ~ \.php$ { ## Execute PHP scripts
        try_files $uri =404;
        expires        off;
        fastcgi_pass   127.0.0.1:9000;
        fastcgi_read_timeout 900s;
        fastcgi_index  index.php;
        fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
        include        fastcgi_params;

        ## Magento 2 Developer mode
        fastcgi_param MAGE_MODE "developer";
    }
}

I guess the issue lies in the static files rewrite. But this is what I followed from the github which is not working.
Is there any workaround?

Best Answer

Any file requested within /pub/static that does not exist currently needs to get routed through Magento. This is currently done through /pub/static.php.

You can see this rewrite in /pub/static/.htaccess

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]

Looking at your nginx configuration you have this commented out:

 # Rewrite magento2 static files
 #location /pub/static {
 #   rewrite ^/pub/static/(.*)$ /magento/magento2alpha/pub/static.php?resource=$1? last;
 #}

Presumably making those lines executable would solve the issue, I'm not very familiar with nginx configuration but something like this might also work:

location / {
    if (!-e $request_filename){ 
        rewrite ^(.*)$ /../static.php?resource=$0 last;
    }
}
Related Topic